按钮

按钮提供了一个触发动作的方法. 一个按钮的字幕应该提示它会执行什么动作. 标题一般是文本,但按钮也可以有一个带有文本的图标或仅仅是一个图标(我们称之为图标按钮).

按键标题默认决定其宽度,但也可以拉伸取其容器的宽度. 按钮可以通过互相粘接来形成一个组合,像拆分按钮那样让用户能够使用.

使用量

import { Button } from '@asphalt-react/button'

<Button>Click me</Button>

备选案文和意向

按钮分为4个变体来强调不同的关卡:

• 小学 (默认):强烈呼吁采取行动.
• 中学:用于支持主按钮.
• 高等教育: 对于比主要行动不重要的行动.
• 坚果: 对于不重要的行动.

有3个意图,与上述变体结合,处理多种支持行动:

• 品牌 (默认):对于大多数推荐的动作.
• 危险: 对于删除等具有一定风险要素的行动.
• 系统: 建议采取的行动较少.

备选案文和意图是相互排斥的。 如果一个变体或意图不止一次发生,按钮会回到默认值. 例如,使用 primary 财务报告和审定财务报表 nude {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}我们一起会回到一个 primary 变种.

大小

按钮支持 4 个大小 : - 额外小(xs) - 小型(s) - 中型(m) - 大型(l)

链接为按钮

按钮具有使一个语义链接被取作按钮(我们称之为"链接按钮")的能力. 链接按钮和图标链接按钮——图标作为标题——如果链接在新标签中打开,处理安全和隐私风险.

拆分按钮

你可以做一个 拆分按钮 组合带有菜单按钮的默认动作按钮.

设定 stickEnd 改为 true 启动按钮和 stickStart 改为 true 在结尾按钮.

使用 stick 道克在结尾按钮上可选地增强它的风格,以便让默认和菜单按钮一起看起来很好. stick 在左侧添加间隔 primary, (中文(简体) ), tertiary 打开 nude 变量按钮,如果 secondary 变体可以去掉左边的边框.

import { Button } from '@asphalt-react/button'

<div>
    <Button stickEnd>Default action</Button>
    <Button stickStart stick>Menu</Button>
</div>

无障碍

1. 按钮接受反应 ref 允许查阅基本内容.

2. 他们接受大部分 按钮元素属性 例如 disabled 打开 onClick 并支持 数据 * 属性。 。 。 .

3. 制取的按钮元素有一个 type 属性设置为"按钮". 你可以推翻 type 属性,如果需要.

4. 所有按钮都具有可聚焦性和键盘可导航性; 选项卡 (或 调动+ 键选项卡 倒着打的时候.

5. 空间 财务报告和审定财务报表 输入 键在焦点时触发按钮.

6. 输入 键在焦点时触发链接按钮.

7. 所有按钮接受 aria- * 属性 按钮角色。 。 。 .

8. 链接按钮接受 aria- * 属性 链接角色。 。 。 .

无障碍必须具备

添加 aria-label 或者说 aria-labelledby 在图标按钮中帮助辅助技术.

道具

儿童

响应按钮标题的节点

小学

渲染为主变体

中学

渲染为次要变体

高等教育

第三级变种

裸着

制作裸体变体

品牌

品牌意图

危险

危险意图

系统

招标系统意图

链接

创建链接按钮

作为

链接元素要渲染 。 接受 HTML 元素或反应组件.

作为选项

接受链接元素的道具和属性.

图标

渲染图标按钮

紧凑

缩小按钮的大小,保持内容的大小不变. 适用于有空间约束的用例.

修饰语

限定符是增强标题的图标或单词. 按键默认预置了修饰符. 为图标接受 SVG 。 离职 @asphalt-react/iconpack 用于 SVG 包裹的 React 组件.

请勿使用 qualifier 生成图标按钮,使用 icon 换作道具

修饰结束

附加标题的修饰符

大小

控制按钮大小 。 可能的值分别为"x","s","m","l",分别用于额外的中小和大小

缩放

伸开按钮取取容器宽度

开始

适应让其他按钮坚持启动

粘结

适应让其他按钮粘到底

粘贴

增强辅助按钮的样式.

下划线

链接下加下划线