カスタマイズなしの状態

カスタムエレメントmf-drilldownを利用する。

コード

html

  <mf-drilldown></mf-drilldown>

レンダリング結果

表示言語の設定

カスタムエレメントの上位のエレメント(bodyでもよい)またはカスタムエレメント自体に 属性langを設定する。

コード

html

  <mf-drilldown lang="ja"></mf-drilldown>

レンダリング結果

ヘッダをcssでカスタマイズ

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .head-bycss .mf_finder_drilldown_head {
    background-color: pink;
  }
  /* content をデフォルト(Drill down)から「階層型カテゴリ」へ変更 */
  .head-bycss .mf_finder_drilldown_head:before {
    content: "階層型カテゴリ";
  }
  </style>

html

  <mf-drilldown class="head-bycss"></mf-drilldown>

レンダリング結果

ヘッダのテキストを属性「head-text」で指定

属性 head-textで指定する。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-head-text .mf_finder_drilldown_head {
    background-color: pink;
  }
  /* content を空に */
  .my-head-text .mf_finder_drilldown_head:before {
    content: "";
  }
  </style>

html

  <mf-drilldown class="my-head-text" head-text="ドリルダウン"></mf-drilldown>

レンダリング結果

リセットボタンのテキストを属性「reset-text」でカスタマイズ

属性 reset-textで指定する。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-reset-text .mf_finder_drilldown_reset a {
    background-color: pink;
  }
  </style>

html

  <mf-drilldown class="my-reset-text" reset-text="絞り込み解除"></mf-drilldown>

レンダリング結果

絞り込み状態に応じて表示を切り替える

絞り込み状態に応じて、bodyタグでclass「mf_finder_drilldown_selected」がトグルする。

※トグルさせるclassを属性 body-class-selectedで変更することも可能。

コード

css追加

  <style>
  /* 絞り込まれていない場合*/
  .my-dd-hide-selected {
    visibility: visible;
    background-color: aqua;
  }
  .my-dd-show-selected {
    visibility: hidden;
  }
  /* 絞り込まれている場合*/
  .mf_finder_drilldown_selected .my-dd-hide-selected {
    visibility: hidden;
  }
  .mf_finder_drilldown_selected .my-dd-show-selected {
    visibility: visible;
    background-color: pink;
  }
  </style>

html

  <div class="my-dd-hide-selected">絞り込みされていません</div>
  <div class="my-dd-show-selected">絞り込みされています</div>
  <mf-drilldown></mf-drilldown>

レンダリング結果

ヘッダのコンテンツをカスタマイズする

スロット headでテンプレートをカスタマイズする。

コード

css追加

  <style>
  /* 変更箇所の背景色をピンクに(実際は不要) */
  .my-head-slot .my-dd-head {
    background-color: pink;
  }
  </style>

html

  <mf-drilldown class="my-head-slot">
    <template slot="head">
      <!-- ヘッダの先頭にアイコン設置 -->
      <header class="my-dd-head">
        <img src="//c.marsflag.com/mf/img/mf_pwdb.gif">ドリルダウン
      </header>
    </template>
  </mf-drilldown>

レンダリング結果