For AI agents: the complete documentation index is available at /next/zh/llms.txt, the full documentation bundle is available at /next/zh/llms-full.txt, and this page is available as Markdown at /next/zh/ui/components/checkbox.md.
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 许可协议进行许可。