@aliwind/rc-actions
v1.0.0-alpha.1
Published
React component for Alibaba Cloud.
Downloads
9
Readme
name: rc-actions zhName: 表格中的行操作器 type: biz-component
@aliwind/rc-actions
表格中的行操作器
使用示例
基本用法:
MDXInstruction:importDemo:BasicDemo
当操作数量超过 threadhold 时,多出的操作会收敛在下拉菜单中:
MDXInstruction:importDemo:ThreadholdDemo
visible 属性可以控制是否渲染这个操作项:
MDXInstruction:importDemo:VisibleDemo
使用 visible 的效果等同于{showEdit && <LinkButton>编辑</LinkButton>}
。
自定义下拉按钮,<LinkMore>
让你方便地定义标准化的下拉按钮:
MDXInstruction:importDemo:CustomExpandTriggerDemo
Actions 的 children 可以传入任意的 inline 元素,比如 button:
MDXInstruction:importDemo:CustomChildrenDemo
FragmentDemo:
MDXInstruction:importDemo:FragmentDemo
上面的 FragmentDemo 只是说明本组件对子组件中的 React.Fragment 的处理,无需特别关注。不建议在本组件中使用 React.Fragment。
控制 Actions 是否自动换行:
MDXInstruction:importDemo:WrapDemo
APIs
Actions
MDXInstruction:renderInterface:IActionsProps
LinkButton
<LinkButton>
用于定义<Actions>
中的操作按钮,接受的 props 与普通的<span>
相同,经常使用的是onClick
。
为什么你不应该直接将<a>
当做按钮使用:
- 使用
<a>
来定义“按钮”是不符合语义的。 - 控制
<a>
的样式是一件很麻烦的事情,你需要控制:hover
:visited
:active
:focus
等状态下的样式。并且不同浏览器的表现可能也会不同。 - 在
<a>
的 onClick 中,你需要时刻记得event.preventDefault()
,否则可能出现难以预料的跳转行为,见前面的“基本用法”DEMO。
LinkMore
<LinkMore>
用于定义<Actions>
中的下拉按钮,接受的 props 与普通的<span>
相同,经常使用的是onClick
。