Lynx UI logo
Lynx UI

<Button>

一个适用于 ReactLynx 的无样式按钮组件,提供按压态(`active`)追踪和用于自定义样式的 render props。
Info

你可以查看源码来了解它的运行原理,也欢迎大家提 MR 来丰富其能力。

此外,你也可以参考这个实现,自行实现定制化的 Button 能力;

基础用法

Button

The root component of the Button, containing all of its child components.

buttonProps
iOS
Android
Harmony
类型ViewProps
按钮支持将原始视图属性直接展开到这个属性中。
className
iOS
Android
Harmony
类型string
类名
disabled
iOS
Android
Harmony
类型boolean·默认值false
决定按钮是否被禁用。
onClick
iOS
Android
Harmony
类型() => void
按钮被点击时触发。
style
iOS
Android
Harmony
类型CSSProperties
样式
children
iOS
Android
Harmony
类型| ReactNode | ((state: {active: boolean, disabled: boolean}) => ReactNode)
子组件

基于状态的样式与渲染

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

  • CSS className:根节点上会动态加上 ui-<state> 形式的类名,可直接用 .ui-<state> { ... } 选择器定制样式;
  • Render-prop 字段:当 children 传入函数时,同一个状态会以 children({ <state>: boolean, ... }) 的形式作为参数传入,便于在运行时做条件渲染。
ui-active
Render Propactive·类型boolean
按钮当前是否处于按下态(且未被禁用)。 当 status.active 为 true 时生效,可用于 `.ui-active { ... }`。
ui-disabled
Render Propdisabled·类型boolean
按钮是否处于禁用态。 当 status.disabled 为 true 时生效,可用于 `.ui-disabled { ... }`。
除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。