<mf-drilldown></mf-drilldown>

Drilldown setting Example of use

Applicable attributes

• lang (String)
  You can specify the display language with attribute lang.
  Example of use

• ajax-url (String)
  ajax Search URL

• head-text (String)
  Set text title of the Drilldown ELEMENT
  Example of use

• reset-text (String)
  Text label of reset button
  (default: “reset”)
  Example of use

• body-class-selected (String)
  The class name set in the body tag when narrowing search by item selection
  (default: “mf_finder_drilldown_selected”)
  Example of switching display according to narrowed down state

Sample collection

A few examples of layout/design customization are listed below.

• Sample collection

DOM structure and class settings

• div.mf_finder_drilldown
  • ( Slot “head” and you can customize the following)
    • 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> :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 current custom element
• customProp: data returned by the function specified by attribute :custom-prop-func

Example of use