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

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

指定可能な属性

• 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.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 で指定した関数の返すデータ

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