无定制化状态时

使用自定义元素mf-drilldown

代码

html

  <mf-drilldown></mf-drilldown>

渲染结果

设置显示语言

将属性lang设置到自定义元素的上层元素或自定义元素本身(也可以在body标签设置)。

代码

html

  <mf-drilldown lang="zh"></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>

渲染结果果