`<Switch>`

一个适用于 ReactLynx 的无样式开关组件，提供切换状态基础能力。

基础用法

<Switch> 的基本使用方式

结构

<Switch>
  <SwitchThumb />
</Switch>

<Switch>
  <SwitchTrack />
  <SwitchThumb />
</Switch>

API

SwitchTrack

The track of the Switch. Represents the background area on which the thumb slides. Can also be used for pressed overlays or state decorations.

children

iOS

Android

类型ReactNode

轨道的内容插槽，可用于添加覆盖层或状态装饰。

className

iOS

Android

Harmony

类型string

类名

style

iOS

Android

Harmony

类型CSSProperties

样式

SwitchThumb

The thumb of the Switch. The draggable/clickable handle that toggles the state.

children

iOS

Android

类型ReactNode

手柄的内容插槽，可放置自定义元素（如图标）。

className

iOS

Android

Harmony

类型string

类名

style

iOS

Android

Harmony

类型CSSProperties

样式

Switch

Props for the Switch component.

checked

iOS

Android

类型boolean

是否选中。如果设置了 checked，则 Switch 将处于受控模式，此时 defaultChecked 将被忽略。

className

iOS

Android

Harmony

类型string

类名

defaultChecked

iOS

Android

类型boolean·默认值false

默认选中状态，仅在非受控模式下生效。

disabled

iOS

Android

类型boolean·默认值false

是否禁用，当为 true 时用户无法操作。

onChange

iOS

Android

类型(checked: boolean) => void

状态变化时触发的回调函数。参数 checked 表示最新的选中状态。

style

iOS

Android

Harmony

类型CSSProperties

样式

switchProps

iOS

Android

类型ViewProps

Switch 支持将原始视图属性直接展开到这个属性中。

children

iOS

Android

类型ReactNode | ((status: { checked: boolean; active: boolean; disabled: boolean }) => ReactNode)

Switch 的内容，可以是节点或根据状态动态渲染的函数。

基于状态的样式与渲染

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

CSS className：根节点上会动态加上 ui-<state> 形式的类名，可直接用 .ui-<state> { ... } 选择器定制样式；
Render-prop 字段：当 children 传入函数时，同一个状态会以 children({ <state>: boolean, ... }) 的形式作为参数传入，便于在运行时做条件渲染。

ui-checked

Render Propchecked·类型boolean

是否选中。当 status.checked 为 true 时生效，可用于 `.ui-checked { ... }`。

ui-active

Render Propactive·类型boolean

是否处于激活状态（按下或交互中）。当 status.active 为 true 时生效，可用于 `.ui-active { ... }`。

ui-disabled

Render Propdisabled·类型boolean

是否禁用。当 status.disabled 为 true 时生效，可用于 `.ui-disabled { ... }`。

#<Switch>

#基础用法

#结构

#API

#SwitchTrack

#SwitchThumb

#Switch

基于状态的样式与渲染

`<Switch>`

基础用法

结构

API

SwitchTrack

SwitchThumb

Switch