<mf-drilldown></mf-drilldown>

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

使用例一覧

指定可能な属性

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

• ajax-url (String) ajax 検索用 URL

• 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.mffinder_drilldown_item ドリルダウンの項目毎に出力される .mf_finder_drilldown_item_depth<depth> depth は階層の深さ
      • div .mffinder_drilldown_item_leaf この項目が末端(leaf)の場合に設定される .mf_finder_drilldown_item_open この項目が子階層を持ち、子階層を表示中の場合に設定される .mf_finder_drilldown_item_selected この項目で絞り込み検索されている場合に設定される .mf_finder_drilldown_item_nohit この項目内でのヒット件数が 0 の場合に設定される_
        • span.mffinder_drilldown_item_bullet この項目が子階層を持つ場合は空_
        • a.mffinder_drilldown_item_bullet この項目が子階層を持たない場合は空 ユーザーが子階層の表示/非表示を切り替えるためのリンク_
        • a.mffinder_drilldown_item_link ユーザーがこの項目で絞り込み検索するためのリンク_
          • span.mf_finder_drilldown_item_title
            • [項目名]
          • span.mf_finder_drilldown_item_count
            • [項目内のヒット件数]
      • ul.mffinder_drilldown_item_children この項目が子階層を持たない場合は空_
        • 子階層の項目ごとにli.mf_finder_drilldown_item以下を繰り返し
  • div.mffinder_drilldown_reset 絞り込み検索されているときにのみ表示される_
    • a > 属性reset-textの値

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

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

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

スロット名 head

参照可能なプロパティ

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

MF3.0 カスタムエレメントマニュアル ver. 1.0.3

リファレンスマニュアル内検索

< マニュアルトップに戻る