<Checkbox>
一个 适用于 ReactLynx 的无样式复选框组件,支持受控/非受控选中态和半选态。
基础用法
<Checkbox> 的基本使用方式
部分选中
当 <Checkbox> 表示一组选项中部分(而非全部)被选中时,使用部分选中状态
结构
API
Checkbox
checkboxPropsiOSAndroid
Checkbox 支持将原始视图属性直接展开到这个属性中。
checkediOSAndroid
是否选中。如果设置了此属性,Checkbox 将处于受控模式,这意味着 defaultChecked 属性将不起作用。
classNameiOSAndroidHarmony
类名
defaultCheckediOSAndroid
默认是否选中。使用此属性意味着 Checkbox 为非受控状态。
disablediOSAndroid
是否禁用。如果设置了此属性,Checkbox 将无法交互。
indeterminateiOSAndroid
是否为不确定状态。
onChangeiOSAndroid
状态变化时触发的回调函数
styleiOSAndroidHarmony
样式
childreniOSAndroid
子节点
基于状态的样式与渲染
该组件将每一项内部状态通过两条等价通道同时对外暴露,下表逐行给出两者的对应关系:
- CSS className:根节点上会动态加上
ui-<state>形式的类名,可直接用.ui-<state> { ... }选择器定制样式; - Render-prop 字段:当
children传入函数时,同一个状态会以children({ <state>: boolean, ... })的形式作为参数传入,便于在运行时做条件渲染。
ui-checked
复选框当前是否处于选中态。
当 status.checked 为 true 时生效,可用于 `.ui-checked { ... }`。
ui-indeterminate
复选框是否处于不确定态。
当 status.indeterminate 为 true 时生效,可用于 `.ui-indeterminate { ... }`。
ui-active
复选框当前是否处于按下态(且未被禁用)。
当 status.active 为 true 时生效,可用于 `.ui-active { ... }`。
ui-disabled
复选框是否处于禁用态。
当 status.disabled 为 true 时生效,可用于 `.ui-disabled { ... }`。
CheckboxIndicator
childreniOSAndroid
Checkbox 的提示框,仅当 checked 或 indeterminate 为 true 时显示子节点。如果需要在 checked 或 indeterminate 为 false 时也保持子节点的显示,需要将 forceMount 设置为 true。
classNameiOSAndroidHarmony
类名
forceMountiOSAndroid
强制挂载子节点。如果设置为 true,即使 checked 或 indeterminate 为 false,子节点也会被挂载。
styleiOSAndroidHarmony
样式