State without customization

Use custom element mf-drilldown.

code

  <mf-drilldown></mf-drilldown>

Render result

Setting display language

Set the attribute "lang" to the upper element of the custom element (which may be the body) or the custom element itself.

code

html

  <mf-drilldown lang="ja"></mf-drilldown>

Render result

Customize header with css

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .head-bycss .mf_finder_drilldown_head {
    background-color: pink;
  }
  /* Change header content from default value (Drill down) to "hierarchical category" */
  .head-bycss .mf_finder_drilldown_head:before {
    content: "hierarchical category";
  }
  </style>

html

  <mf-drilldown class="head-bycss"></mf-drilldown>

Render result

Specify header text by attribute "head-text"

Use attribute "head-text".

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-head-text .mf_finder_drilldown_head {
    background-color: pink;
  }
  /* set content to empty */
  .my-head-text .mf_finder_drilldown_head:before {
    content: "";
  }
  </style>

html

  <mf-drilldown class="my-head-text" head-text="Drill down"></mf-drilldown>

Render result

Customize the content text of the reset button with the attribute "reset-text"

Use attribute "reset-text".

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-reset-text .mf_finder_drilldown_reset a {
    background-color: pink;
  }
  </style>

html

  <mf-drilldown class="my-reset-text" reset-text="Reset Drill down"></mf-drilldown>

Render result

Switch the display according to the narrowed down state

Class "mf_finder_drilldown_selected" will toggle with the body tag according to the narrowed down state.

* It is also possible to change the toggling class with the attribute "body-class-selected".

code

Add css

  <style>
  /* When not narrowed down */
  .my-dd-hide-selected {
    visibility: visible;
    background-color: aqua;
  }
  .my-dd-show-selected {
    visibility: hidden;
  }
  /* When narrowed down */
  .mf_finder_drilldown_selected .my-dd-hide-selected {
    visibility: hidden;
  }
  .mf_finder_drilldown_selected .my-dd-show-selected {
    visibility: visible;
    background-color: pink;
  }
  </style>

html

  <div class="my-dd-hide-selected">When not narrowed down</div>
  <div class="my-dd-show-selected">When narrowed down</div>
  <mf-drilldown></mf-drilldown>

Render result

Customize the contents of the header

Customize the template with slot head.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-head-slot .my-dd-head {
    background-color: pink;
  }
  </style>

html

  <mf-drilldown class="my-head-slot">
    <template slot="head">
      <!-- Set an icon before the title -->
      <header class="my-dd-head">
        <img src="//c.marsflag.com/mf/img/mf_pwdb.gif">Drill down
      </header>
    </template>
  </mf-drilldown>

Render result