跳到主要内容

复选框组和单选框组

3分钟设计一个复杂的复选框组件-场景1​

3分钟设计一个复杂的复选框组件-场景2​

简介​

复选框组（Check Group）是一个类似复选框和单选框组的高阶组件（Higher Order Component），它提供了一组可供选择的选项。

它具备自身的状态管理能力。无需编写任何代码来处理用户界面状态，比如哪个选项被选中，哪个选项未被选中。

复选框组 包含以下被包裹的部件：

  • 容器（1 个）：用于配置高阶组件的背景
  • 复选框图片（1 个）：用于配置选中和未选中状态下的图片
  • 图片（2 个）：用于配置各选项对应的图片
  • 复选框标签（1 个）：用于配置选中和未选中状态下的文本，例如，你可能希望被选中的选项具有特定的字体或颜色
  • 标签（2 个）：用于配置各选项对应的文本

复选框组 具备以下属性：

  • 选项

    配置该高阶组件包含多少个选项，并且每个选项最多有：

    • 最多 3 个可配置的图片
    • 最多 3 个可配置的标签

  • 当前选择

    该高阶组件的当前选择，你可以针对初始状态对其进行配置。

  • 排列方向

    将该高阶组件的排列方向配置为水平方向或垂直方向

  • 多选（复选 模式或 单选 模式）

    该高阶组件是否允许进行多项选择。因此，如果你将 多选 属性配置为 真，那它就是一个复选框组，否则，它就是一个单选框组。

  • 间隔

    配置各选项之间的距离

复选框图片与标签​

对于选中状态和未选中状态，分别有特定的图片和标签与之对应。

  • 图片

    配置选中状态下的图片。如果未进行配置，它将使用默认图片，要是连默认图片都未配置，那就会使用空值（NULL）。

    未配置默认图片的情况是你不需要该图片，所以可以直接将其隐藏。可参考上述视频中的用例 2。

  • 标签

    配置选中和未选中状态下的文本样式，例如，设置选项被选中时的文本颜色、字体等。如果未进行配置，它将使用标签的默认样式。