标准组件

标准组件窗口展示的是当前看板所支持的所有的过滤组件列表，按照功能可分为文本、下拉框、数值类、日期类、过滤容器和按钮等六大类。

• 按住并拖动标准组件上方的分割线，可以对标准组件的高度进行调整（最大不超过 50%）。

• 点击该窗口右上角最右侧收起按钮或者按住分割线向下拖动至最低点时，可以对该窗口进行折叠操作，折叠后仅显示窗口标题。再次点击该按钮，则可以将该窗口展开至折叠前高度（也可按住分割线向上拖动至任意位置）。

• 点击该窗口右上角放大镜按钮时，出现搜索框并自动获得焦点，用户输入搜索条件可以进行组件筛选。点击右侧叉号清除搜索条件并关闭搜索框。

TIP

图片展示了标准组件窗口可通过拖动分割线进行高度调整，点击收起按钮进行折叠窗口，再次点击恢复窗口，标题搜索及关闭搜索功能。

文本输入

文本输入组件可实现文本条件过滤，包含三个基本区域。

• ① 标题

  • 对应最右侧配置栏中的标题内容，修改配置中的标题内容后，画板内会自动同步修改。

• ② 查询器

  • 对应最右侧配置栏中的查询器一栏，可在右侧配置里修改查询器默认值（可选值为包含、开头为、结尾为、精准匹配、不包含、开头不是、结尾不是、不匹配等），默认为包含。勾选锁定后查询器将锁定，画板内将不再显示该区域。

• ③ 文本输入框

  • 对应最右侧配置栏中的以下配置
    • 默认值：文本输入框的默认文本。
    • 提示：文本输入框没有值时的默认显示文案。
    • 配置：勾选允许清空，则当文本输入框有值时，右侧会出现叉号，点击叉号即可清空输入框。
    • 前缀/后缀：可以为图标、文字或者两者相结合（图标在前），默认出现在输入框内，勾选外部则图标会移动至输入框外。

下拉框

下拉框组件可实现选定值过滤，包含三个基本区域。

• ① 标题

  • 标题文案对应最右侧配置栏中的标题内容，修改配置中的标题内容后，画板内会自动同步修改。

• ② 选择框

  • 为下拉框配置好数据配置（详见数据配置）后，点击选择框区域可出现下拉列表，用户点击列表项即可完成下拉筛选。
    • 配置：勾选多选则下拉框允许选择多值；勾选过滤则允许在下拉框内输入文字，对下拉列表进行过滤；勾选允许清空则当下拉框有值时会在下拉框最后出现叉号，点击叉号可清除已选项。
    • 默认值：下拉框的默认选中项。
    • 提示：下拉框没有值时的默认显示文案。

• ③ 下拉按钮

  • 对应下拉按钮一栏，默认勾选显示，取消勾选后画板内将不再显示该区域。

数值与数值区间

数值（区间）组件可实现数值条件过滤，包含两种形式：输入和滑块，通过最右侧配置栏中的形式一栏进行切换。

输入

输入数值（区间）组件包含四个基本区域。

• ① 标题

  • 对应最右侧配置栏中的标题内容，修改配置中的标题内容后，画板内会自动同步修改。

• ② 查询器（数值区间组件无此区域及配置）

  • 对应最右侧配置栏中的查询器一栏，可在右侧配置里修改查询器默认值（可选值为>、>=、=、<=、<、!=等），默认为>。勾选锁定后查询器将锁定，画板内将不再显示该区域。

• ③ 数值输入框

  • 对应最右侧配置栏中以下配置
    • 限制范围：规定数值的范围，当设置范围值时，输入框内的数值会在输入框失去焦点时进行范围检查，超出会自动计算为范围最大/最小值。
    • 默认值：数值输入框的默认数值。
    • 提示：数值输入框没有值时的默认显示文案。
    • 配置：勾选允许清空，则当数值输入框有值时，右侧会出现叉号，点击叉号即可清空输入框。
    • 前缀/后缀：可以为图标、文字或者两者相结合（图标在前），默认出现在输入框内，勾选外部则图标会移动至输入框外。

• ④ 操作区

  • 对应最右侧配置栏中的步长一栏，每次点击操作区向上箭头即为增加步长值，向下箭头即为减少步长值。

滑块

滑块数值（区间）组件包含三个基本区域。

• ① 标题

  • 对应最右侧配置栏中的标题内容，修改配置中的标题内容后，画板内会自动同步修改。

• ② 滑块

  • 对应最右侧配置栏中以下配置
    • 限制范围：规定滑块的范围，滑块滑动时会根据划过的百分比计算出滑块值。
    • 默认值：数值滑块的默认值。
    • 步长：滑块滑动一次增加或减少的最小值。
    • 颜色：设置滑块的轨道和圆点颜色。
    • 显示方向：滑块展示方向，默认水平，勾选垂直后滑块变为垂直展示。

• ③ 标签

  • 对应最右侧配置栏中以下配置
    • 后缀：只能是文本，会拼接在滑块数值的后边进行展示（通常用来做单位）。
    • 颜色：设置标签的背景色。

日期与日期区间

日期（区间）组件可实现日期条件过滤，包含三个基本区域。

• ① 标题

  • 对应最右侧配置栏中的标题内容，修改配置中的标题内容后，画板内会自动同步修改。

• ② 查询器（日期区间组件无此区域及配置）

  • 对应最右侧配置栏中的查询器一栏，可在右侧配置里修改查询器默认值（可选值为=、!=、>、>=、<、<=等），默认为=。勾选锁定后查询器将锁定，画板内将不再显示该区域。

• ③ 日期选择框

  • 点击选择框可出现日期选择器，根据当前日期格式计算展示视图（年、月、日）。对应最右侧配置栏中的以下配置
    • 日期格式：规定了当选择完日期后回显到选择框里的展示格式，可选值为YYYY年、YYYY/MM、YYYY-MM、YYYY.MM、YYYY年MM月、YYYY/MM/DD、YYYY-MM-DD、YYYY.MM.DD、YYYY年MM月DD日等，默认值为YYYY/MM/DD
    • 限制范围：规定日期的可选范围，范围外的日期无法选择。
    • 默认值：日期选择框的默认展示值。
    • 提示：日期选择框无值时的默认文案。

时间与时间区间

时间（区间）组件可实现时间条件过滤，包含三个基本区域

• ① 标题

  • 对应最右侧配置栏中的标题内容，修改配置中的标题内容后，画板内会自动同步修改。

• ② 查询器（时间区间组件无此区域及配置）

  • 对应最右侧配置栏中的查询器一栏，可在右侧配置里修改查询器默认值（可选值为=、!=、>、>=、<、<=等），默认为=。勾选锁定后查询器将锁定，画板内将不再显示该区域。

• ③ 时间选择框

  • 点击选择框可出现时间选择器，对应最右侧配置栏中的以下配置
    • 时间格式：规定了当选择完时间后回显到选择框里的展示格式，可选值为HH:mm、HH时mm分，默认值为HH:mm
    • 限制范围：规定日期的可选范围，范围外的日期无法选择。
    • 默认值：时间选择框的默认展示值。
    • 提示：时间选择框无值时的默认文案。

日期时间与日期时间区间

日期时间（区间）组件可实现日期时间条件过滤，包含三个基本区域

• ① 标题

  • 对应最右侧配置栏中的标题内容，修改配置中的标题内容后，画板内会自动同步修改。

• ② 查询器（日期时间区间组件无此区域及配置）

  • 对应最右侧配置栏中的查询器一栏，可在右侧配置里修改查询器默认值（可选值为=、!=、>、>=、<、<=等），默认为=。勾选锁定后查询器将锁定，画板内将不再显示该区域。

• ③ 日期时间选择框

  • 点击选择框可出现日期时间选择器，对应最右侧配置栏中的以下配置
    • 日期格式：规定了当选择完日期时间后回显到选择框里的展示格式，可选值为YYYY/MM/DD HH:mm、YYYY-MM-DD HH:mm、YYYY.MM.DD HH:mm、YYYY年MM月DD日 HH时mm分等，默认值为YYYY/MM/DD HH:mm
    • 限制范围：规定日期时间的可选范围，范围外的日期时间无法选择。
    • 默认值：日期时间选择框的默认展示值。
    • 提示：日期时间选择框无值时的默认文案。

过滤容器

过滤容器内部仅有搜索和重置两个按钮，本身无过滤功能，需要将其他标准组件拖动到容器内部后产生过滤效果。容器会将其内部的所有条件组合之后，在搜索按钮被点击时触发过滤效果。

• ① 标题

  • 对应最右侧配置栏中的标题内容，修改配置中的标题内容后，画板内会自动同步修改。

• ② 标签对齐

  • 规定其内部组件的标题对齐方式：左对齐、顶部对齐、右对齐（点击选中，再次点击选中按钮则取消选中）

按钮

按钮组件可提供链接跳转（跳转到外链或内部其他看板）功能。

• 名称：对应按钮文本，修改此配置内容后，画板内会自动同步修改。

• 颜色

  • 背景色：设置按钮背景的颜色。
  • 字体色：设置按钮文字的颜色。

• 样式

  • 扁平：勾选后仅显示按钮文字，不再显示按钮背景色。
  • 轮廓线：勾选后仅显示按钮文字和边框，不再显示按钮背景色。
  • 圆形：勾选后按钮四边均变为弧线，按钮可以调整为圆形或椭圆形。
  • 方形圆角：勾选后按钮变为大圆角。
  • 移除阴影：勾选后去除按钮阴影。
  • 移除圆角：勾选后去除按钮圆角，变为直角按钮。

• 边距：设置按钮的内边距，单值统一设置，切换为多值后，按照上、右、下、左的顺序设置四个值。

• 图标：点击可选择出现在按钮文字左侧、右侧的图标。

• 链接类型

  • 链接地址：链接类型选择为外链时显示该配置，为文本区域，输入完整链接地址后，点击按钮会跳转到该链接。
  • 链接看板：链接类型选择为看板时显示该配置，为所有已发布看板的树级结构列表，选择完成后点击按钮会跳转到该看板。

• 打开方式：链接跳转的方式

  • 新开窗口：新建窗口打开链接。
  • 覆盖当前窗口：在当前窗口打开链接。
  • 覆盖父级窗口：在父级窗口打开链接。