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

Drilldown ELEMENT with toggle

Applicable attributes

• ajax-url (String)
  ajax Search URL

• body-class-toggle (String)
  The name of the class to be attached to the body tag

• init-on (Boolean)
  Toggle on the initial state

• head-text (String)
  Set text title of the Drilldown ELEMENT
  Same as mf-drilldown’s attribute head-text

• reset-text (String)
  Text label of reset button
  (default: “reset”)
  Same as mf-drilldown’s attribute reset-text

• reset-badge-text (String)
  Text same as reset button, to be displayed as a badge on the toggle button
  (default: “reset”)

• body-class-selected (String)
  The class name set in the body tag when narrowing search by item selection
  (default: “mf_finder_drilldown_selected”)
  Same as mf-drilldown’s attribute body-class-selected

DOM structure and class settings

• div.mf_toggle_wrap.mf_finder_drilldown_toggle .mf_toggle_on :Toggle on
  • div.mf_toggle_button_wrap
    • a.mf_toggle_button :toggle button
      :Click here to toggle on/off state, and attribute body-class-toggle will be removed from the body tag.
      • div.mf_finder_drilldown_reset_badge
        • a :Reset badge refinement Displayed only when under narrowing search state :Click here to cancel narrowing down by Drilldown
  • div.mf_toggle_content_wrap
    • div.mf_toggle_content
      • div.mf_finder_drilldown
        • header.mf_finder_drilldown_head
          • Value of attribute head-text ( if empty)
        • ul.mf_finder_drilldown_items
          • li.mf_finder_drilldown_item :Output for each drilldown item
            .mf_finder_drilldown_item_depth_’’ :depth is the depth of the hierarchy
            • div .mf_finder_drilldown_item_leaf :To be used if this item is leaf level
              .mf_finder_drilldown_item_open :To be used when this item has child hierarchy and child hierarchy is being displayed
              .mf_finder_drilldown_item_selected :To be used when narrowing search by this item
              .mf_finder_drilldown_item_nohit :To be used when the number of hits in this item is 0
              • span.mf_finder_drilldown_item_bullet :Display none, if this item has a child hierarchy
              • a.mf_finder_drilldown_item_bullet :For user to show/hide the child hierarchy, no display if this item does not have child hierarchy
              • a.mf_finder_drilldown_item_link :Link for users to refine search by this item
                • span.mf_finder_drilldown_item_title
                  • [item name]
                • span.mf_finder_drilldown_item_count
                  • [Number of hits under this item]
            • ul.mf_finder_drilldown_item_children :Show empty if this item does not have a child hierarchy
              • Repeat li.mf_finder_drilldown_item for each item under the child hierarchy
        • div.mf_finder_drilldown_reset :To be displayed under narrowing search state only
          • a > value of attribute ‘reset-text’

Slot for DOM customization

For the slots, see the description below

• Vue.js Named Slots
• Vue.js Scoped Slots

Slot name head

Properties that can be referenced

• self: an instance of this CUSTOM ELEMENT
• customProp: data returned by the function specified by attribute :custom-prop-func

Same as mf-drilldown slothead