<Button>
一个适用 于 ReactLynx 的无样式按钮组件,提供按压态(`active`)追踪和用于自定义样式的 render props。
Info
你可以查看源码来了解它的运行原理,也欢迎大家提 MR 来丰富其能力。
此外,你也可以参考这个实现,自行实现定制化的 Button 能力;
基础用法
Button
The root component of the Button, containing all of its child components.
buttonPropsiOSAndroidHarmony
按钮支持将原始视图属性直接展开到这个属性中。
classNameiOSAndroidHarmony
类名
disablediOSAndroidHarmony
决定按钮是否被禁用。
onClickiOSAndroidHarmony
按钮被点击时触发。
styleiOSAndroidHarmony
样式
childreniOSAndroidHarmony
子组件
基于状态的样式与渲染
该组件将每一项内部状态通过两条等价通道同时对外暴露,下表逐行给出两者的对应关系:
- CSS className:根节点上会动态加上
ui-<state>形式的类名,可直接用.ui-<state> { ... }选择器定制样式; - Render-prop 字段:当
children传入函数时,同一个状态会以children({ <state>: boolean, ... })的形式作为参数传入,便于在运行时做条件渲染。
ui-active
按钮当前是否处于按下态(且未被禁用)。
当 status.active 为 true 时生效,可用于 `.ui-active { ... }`。
ui-disabled
按钮是否处于禁用态。
当 status.disabled 为 true 时生效,可用于 `.ui-disabled { ... }`。