Lynx UI logo
Lynx UI

<Checkbox>

一个适用于 ReactLynx 的无样式复选框组件,支持受控/非受控选中态和半选态。

基础用法

<Checkbox> 的基本使用方式

部分选中

<Checkbox> 表示一组选项中部分(而非全部)被选中时,使用部分选中状态

结构

<Checkbox className="checkbox">
  <CheckboxIndicator className="checkbox-indicator">
    {<YourOwnCheckIcon />}
  </CheckboxIndicator>
</Checkbox>

API

Checkbox

checkboxProps
iOS
Android
类型ViewProps
Checkbox 支持将原始视图属性直接展开到这个属性中。
checked
iOS
Android
类型boolean
是否选中。如果设置了此属性,Checkbox 将处于受控模式,这意味着 defaultChecked 属性将不起作用。
className
iOS
Android
Harmony
类型string
类名
defaultChecked
iOS
Android
类型boolean·默认值false
默认是否选中。使用此属性意味着 Checkbox 为非受控状态。
disabled
iOS
Android
类型boolean·默认值false
是否禁用。如果设置了此属性,Checkbox 将无法交互。
indeterminate
iOS
Android
类型boolean·默认值false
是否为不确定状态。
onChange
iOS
Android
类型(checked: boolean) => void
状态变化时触发的回调函数
style
iOS
Android
Harmony
类型CSSProperties
样式
children
iOS
Android
类型ReactNode | ((status: { checked: boolean; indeterminate: boolean; active: boolean; disabled: boolean }) => ReactNode)
子节点

基于状态的样式与渲染

该组件将每一项内部状态通过两条等价通道同时对外暴露,下表逐行给出两者的对应关系:

  • CSS className:根节点上会动态加上 ui-<state> 形式的类名,可直接用 .ui-<state> { ... } 选择器定制样式;
  • Render-prop 字段:当 children 传入函数时,同一个状态会以 children({ <state>: boolean, ... }) 的形式作为参数传入,便于在运行时做条件渲染。
ui-checked
Render Propchecked·类型boolean
复选框当前是否处于选中态。 当 status.checked 为 true 时生效,可用于 `.ui-checked { ... }`。
ui-indeterminate
Render Propindeterminate·类型boolean
复选框是否处于不确定态。 当 status.indeterminate 为 true 时生效,可用于 `.ui-indeterminate { ... }`。
ui-active
Render Propactive·类型boolean
复选框当前是否处于按下态(且未被禁用)。 当 status.active 为 true 时生效,可用于 `.ui-active { ... }`。
ui-disabled
Render Propdisabled·类型boolean
复选框是否处于禁用态。 当 status.disabled 为 true 时生效,可用于 `.ui-disabled { ... }`。

CheckboxIndicator

children
iOS
Android
类型ReactNode
Checkbox 的提示框,仅当 checked 或 indeterminate 为 true 时显示子节点。如果需要在 checked 或 indeterminate 为 false 时也保持子节点的显示,需要将 forceMount 设置为 true。
className
iOS
Android
Harmony
类型string
类名
forceMount
iOS
Android
类型boolean·默认值false
强制挂载子节点。如果设置为 true,即使 checked 或 indeterminate 为 false,子节点也会被挂载。
style
iOS
Android
Harmony
类型CSSProperties
样式
除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。