<mf-drilldown></mf-drilldown>

ドリルダウン表示用エレメント
使用例

指定可能な属性

• lang (String)
  表示言語を属性langで指定することが出来る。
  使用例

• head-text (String)
  ヘッダ部に表示するテキスト
  使用例

• reset-text (String)
  リセットボタン用のリンクに表示するテキスト
  (default: “reset”)
  使用例

• body-class-selected (String)
  項目選択により絞り込み検索されているときにbodyタグに設定されるクラス名
  (default: “mf_finder_drilldown_selected”)
  絞り込み状態に応じて表示を切り替える例

サンプル集

デザインのカスタマイズについて、いくつかのサンプルを以下に載せました。 - サンプル集

DOM構造とclass設定

• div.mf_finder_drilldown
  • (スロット「head」で以下はカスタマイズ可能)
    • header.mf_finder_drilldown_head
      • 属性head-textの値(空の場合は )
  • ul.mf_finder_drilldown_items
    • li.mf_finder_drilldown_item ドリルダウンの項目毎に出力される
      .mf_finder_drilldown_item_depth_<depth> depthは階層の深さ
      • div
        .mf_finder_drilldown_item_leaf この項目が末端(leaf)の場合に設定される
        .mf_finder_drilldown_item_open この項目が子階層を持ち、子階層を表示中の場合に設定される
        .mf_finder_drilldown_item_selected この項目で絞り込み検索されている場合に設定される
        .mf_finder_drilldown_item_nohit この項目内でのヒット件数が0の場合に設定される
        • span.mf_finder_drilldown_item_bullet この項目が子階層を持つ場合は空
        • a.mf_finder_drilldown_item_bullet この項目が子階層を持たない場合は空 ユーザーが子階層の表示/非表示を切り替えるためのリンク
        • a.mf_finder_drilldown_item_link ユーザーがこの項目で絞り込み検索するためのリンク
          • span.mf_finder_drilldown_item_title
            • [項目名]
          • span.mf_finder_drilldown_item_count
            • [項目内のヒット件数]
      • ul.mf_finder_drilldown_item_children この項目が子階層を持たない場合は空
        • 子階層の項目ごとにli.mf_finder_drilldown_item以下を繰り返し
  • div.mf_finder_drilldown_reset 絞り込み検索されているときにのみ表示される
    • a > 属性reset-textの値

DOMカスタマイズ用スロット

スロットについては以下の説明を参照

• Vue.jsの名前付きスロット
• Vue.jsのスコープ付きスロット

スロット名 head

参照可能なプロパティ

• self : このカスタムエレメントのインスタンス
• customProp : 属性:custom-prop-func で指定した関数の返すデータ

使用例