<mf-drilldown-toggle></mf-drilldown-toggle>

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

指定可能な属性

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

• body-class-toggle (String) body タグに付け外しするクラス名

• init-on (Boolean) 初期状態をトグルオンにする

• head-text (String) ヘッダ部に表示するテキスト mf-drilldownの属性head-textと同様

• reset-text (String) リセットボタン用のリンクに表示するテキスト (default: “reset”) mf-drilldownの属性reset-textと同様

• reset-badge-text (String) トグルボタンの上にバッジとして表示する、リセットボタンに使うテキスト (default: “reset”)

• body-class-selected (String) 項目選択により絞り込み検索されているときに body タグに設定されるクラス名 (default: “mf_finder_drilldown_selected”) mf-drilldownの属性body-class-selectedと同様

DOM構造とclass設定

• div.mf_toggle_wrap.mf_finder_drilldown_toggle .mf_toggle_on トグルオンの状態のときに設定される
  • div.mf_toggle_button_wrap
    • a.mf_toggle_button トグルボタン ここをクリックすると状態のオン/オフがトグルされ、属性body-class-toggle が body タグに付け外しされる。
      • div.mf_finder_drilldown_reset_badge
        • a リセット用バッジ 絞り込み検索されているときのみ表示される ここをクリックするとドリルダウンによる絞込が解除される
  • div.mf_toggle_content_wrap
    • div.mf_toggle_content
      • div.mf_finder_drilldown
        • header.mf_finder_drilldown_head
          • 属性head-textの値(空の場合は )
        • ul.mf_finder_drilldown_items
          • li.mffinder_drilldown_item ドリルダウンの項目毎に出力される .mf_finder_drilldown_item_depthdepth 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 で指定した関数の返すデータ

mf-drilldownのスロットheadと同様

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

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

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