カスタマイズなしの状態

カスタムエレメント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>

レンダリング結果