無定製化狀態時

使用自定義元素mf-drilldown

代碼

html

  <mf-drilldown></mf-drilldown>

渲染結果

設置顯示語言

將屬性lang設置到自定義元素的上層元素或自定義元素本身(也可以在body標籤設置)。

代碼

html

  <mf-drilldown>lang="zh-tw"</mf-drilldown>

渲染結果

用CSS自定義標題

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .head-bycss .mf_finder_drilldown_head {
    background-color: pink;
  }
  /* 將標題內容從默認值(Drill down)更改為“層級結構篩選” */
  .head-bycss .mf_finder_drilldown_head:before {
    content: "層級結構篩選";
  }
  </style>

html

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

渲染結果

用屬性“head-text”指定標題文本

用屬性“head-text”指定標題文本

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .my-head-text .mf_finder_drilldown_head {
    background-color: pink;
  }
  /* 設置content為空 */
  .my-head-text .mf_finder_drilldown_head:before {
    content: "";
  }
  </style>

html

  <mf-drilldown class="my-head-text" head-text="進一步搜尋"></mf-drilldown>

渲染結果

使用屬性“reset-text”自定義重置按鈕的文本

用屬性 reset-text指定。

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .my-reset-text .mf_finder_drilldown_reset a {
    background-color: pink;
  }
  </style>

html

  <mf-drilldown class="my-reset-text">reset-text="重置篩選"></mf-drilldown>

渲染結果

根據所選的過濾篩選狀態切換顯示結果

設置到body標籤的觸發類“mf_finder_drilldown_selected”將根據篩選情況切換狀態。

除了觸發類也可以通過屬性屬性 body-class-selected來進行切換。

代碼

添加CSS

  <style>
  /* 尚未進行篩選時*/
  .my-dd-hide-selected {
    visibility: visible;
    background-color: aqua;
  }
  .my-dd-show-selected {
    visibility: hidden;
  }
  /* 已進行篩選時*/
  .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">尚未進行篩選</div>
  <div class=">my-dd-show-selected">已進行篩選</div>
  <mf-drilldown></mf-drilldown>

渲染結果

自定義標題的內容

用插槽 head自定義模板。

代碼

添加CSS

  <style>
  /* 為方便理解設置變化部分背景色為粉紅，實際代碼中不需要 */
  .my-head-slot .my-dd-head {
    background-color: pink;
  }
  </style>

html

  <mf-drilldown class="my-head-slot">
    <template slot="head">
      <!-- 給標題前面加一個icon -->
      <header class="my-dd-head">
        <img src="//c.marsflag.com/mf/img/mf_pwdb.gif">層級篩選
      </header>
    </template>
  </mf-drilldown>

渲染結果果