[]
        
在线Demo 免费试用
(Showing Draft Content)

筛选器样式

1. 概述

1.1 功能概述

用于设置数据筛选器样式相关属性,比如筛选器样式、方向、是否自动折行等外观相关样式。不同的筛选器具体的设置项不完全相同。本节仅为您介绍标签列表和相对日期的筛选器样式属性。如下图所示为标签列表和相对日期的筛选器样式属性,针对其他筛选器的样式属性请参考对应的筛选器章节内容介绍。

PixPin_2025-06-18_10-53-59 PixPin_2025-06-18_10-54-08

2. 筛选器样式

2.1 样式

  1. 设置标签的样式,标签列表和相对日期均提供了十种内置样式,您可以选择一个快速应用。

    PixPin_2025-06-18_10-56-40 PixPin_2025-06-18_10-58-46

2.2 方向

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

    PixPin_2025-06-18_11-07-47

  • 横向(默认值): 将方向设定为横向。

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

    PixPin_2025-06-18_11-02-30

2.3 自动折行

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

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

    PixPin_2025-06-18_11-04-50

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

    PixPin_2025-06-18_11-04-04

2.4 对齐方式

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

    PixPin_2025-06-18_11-07-11

    下图为对齐方式的三种效果。

    PixPin_2025-06-18_11-06-36

2.5 文本对齐

  1. 设置标签内部文本的左右对齐方式,可设置为左对齐、居中或右对齐。

    PixPin_2025-06-18_11-13-29

    下图为三种文本对齐效果。(同时已设置文本垂直对齐为顶部对齐)

    PixPin_2025-06-18_11-11-54

    PixPin_2025-06-18_11-12-48

2.6 文本垂直对齐

  1. 设置标签内部文本垂直方向的对齐方式,可设置为顶部、居中或底部。

    PixPin_2025-06-18_11-14-29

    下图为三种文本垂直对齐效果。(同时已设置对齐方式和文本对齐均为居中)

    PixPin_2025-06-18_11-17-10

    PixPin_2025-06-18_11-16-30

2.7 宽度自适应

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

    PixPin_2025-06-18_11-17-45

  • 是(默认值): 每个标签项目的宽度不一致,根据每个标签项目的内容来决定标签项目的宽度,开启后仅能设置选项宽度。

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

2.8 选项宽度/高度

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

    PixPin_2025-06-18_11-20-10

2.9 选项内/外边距

  1. 设置内外边距。

  • 内边距:

    PixPin_2025-06-18_11-22-06

    • 支持单独设置:

      PixPin_2025-06-18_11-23-55

  • 外边距:

    PixPin_2025-06-18_11-23-08

2.10 合并边框

  1. 当选项外边距为0时,相邻标签会有两条边框,此时显示效果不佳。开启合并边框后,中间即可显示为一条边框。如下图所示。

    PixPin_2025-06-18_13-57-50

    PixPin_2025-06-18_13-57-18

2.11 内容字体设置

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

    PixPin_2025-06-18_11-33-41