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

顯示附toggle切換開關的Drill down元件

可指定屬性

• 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 重設標章 只顯示於被縮小範圍搜尋時
          點擊這裡可取消因Drill down而設置的縮小範圍搜尋
  • 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 出現於各個drill down項目中
            .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 此項目為點擊次數為零時的設定
              • 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`相同