[{"id":"840f0737-df1d-47ae-bb0a-359b01fe0608","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d5d9cdef-8854-4505-89be-a2bbc3cb4482","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3dc3dd55-35b0-4d23-bf62-47bc3650e4ee","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"80d84fbc-d0f8-4e4a-947f-e3e4de9b49b2","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"9152b7ca-0186-4fe3-a26f-5a05f322db07","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]}]
        
(Showing Draft Content)

筛选器样式

用于设置数据筛选器样式相关属性,比如筛选器样式、方向、是否自动折行等外观相关样式。不同的筛选器具体的设置项不完全相同。

关于日期范围筛选器的样式设置,请详见日期范围

image image image

样式

设置标签的样式,不同的筛选器样式不同。

标签列表:

标签列表提供了十种内置样式,您可以选择一个快速应用。

image2022-6-15_17-1-34.png

相对日期:

相对日期提供了3种标签的样式,可设置为标签、列表或按钮组。

  • 标签(默认值)

    image.png

  • 列表

    image.png

  • 按钮组

    image2022-6-15_16-59-28.png

数值范围筛选器:

  • 滑块(默认):通过拖拽来调整数值范围;

    image.png

  • 输入框:通过输入数值来调整数值范围;

    image.png

  • 输入框+滑块:既可以通过拖拽来调整数值范围,也可通过输入数值来调整。

    image.png


标签

当数值范围筛选器的筛选器样式选择了输入框,则可以设置输入框中间的标签文字。

image

显示输入框/比较符号

当数值范围筛选器的筛选器样式选择了输入框,则可以设置输入框以及比较符号的显示与否。

image

方向

设置标签的方向,可设置为横向或纵向。

  • 横向(默认值)。

  • 纵向,将方向设定为纵向,将隐藏自动折行、对齐方式及宽度自适应等属性。

    image.png

自动折行

设置是否自动折行,默认为

  • 否(默认值),当不能显示所有项目时,出现横向滚动条。

    image.png

  • 是,当一行显示不下时,将自动折行,不会出现横向滚动条。当选择自动折行时,隐藏“对齐方式”选项。

    image.png

对齐方式

设置标签相对于组件边框的对齐方式,可设置为左对齐、居中或右对齐。

下图为左对齐效果。

image2022-6-15_17-15-29.png

文本对齐

设置标签内部文本的左右对齐方式。

下图为右对齐效果。(同时垂直方向顶部对齐)

image2022-6-15_17-14-24.png

文本垂直对齐

设置标签内部文本垂直方向的对齐方式。

下图为顶部对齐效果。(同时左右方向右对齐)

image2022-6-15_17-14-21.png

宽度自适应

设置每个标签的宽度是否保持一致。

  • 是(默认值),每个标签项目的宽度不一致,根据每个标签项目的内容来决定标签项目的宽度;

  • 否,每个标签项目的宽度是一样的,当标签项目的内容过长时,出现“...”。

选项宽度/高度

设置每个选项的宽度和高度。

image2022-6-15_17-18-45.png

选项内/外边距

设置内外边距。

内边距:

image2022-1-12_18-2-14.png


外边距:

image2022-1-12_18-4-0.png

合并边框

当选项外边距为 0时,相邻标签会有两条边框,此时显示效果不佳。

开启合并边框后,中间即可显示为一条边框。如下图所示。

image2022-1-13_12-16-17.png

内边框颜色/尺寸

设置多维列表框和多维下拉框的内边框颜色和粗细。

image2022-6-15_17-33-47.png

内容字体设置

设置筛选器内容的字体样式。