Skip to content

Latest commit

 

History

History
69 lines (38 loc) · 1.39 KB

File metadata and controls

69 lines (38 loc) · 1.39 KB
title Button 按钮
description 用于开启一个闭环的操作任务,如“删除”对象、“购买”商品等。
spline base
isComponent true
toc false

代码演示

01 组件类型

基础按钮

次按钮

使用场景:在用户进行的操作为流程中的辅助操作,或者进行不那么重要的交互行为时,选择用次按钮;次要按钮通常和主要按钮一起出现

主按钮

使用场景:大部分场景都可以使用,例如反馈页、表单页、对话框,一个页面建议最多只出现一个主按钮;

文字按钮

使用场景:它的操作通常和其旁边内容相关,通常出现在标题旁、字段旁、列表最下方

{{ base }}

图标按钮

图标按钮由图标+文字或图标构成。通过图标可增强识别性,以便直观理解。

{{ icon }}

幽灵按钮

幽灵按钮将按钮的内容反色,背景变为透明,一般是底色透明。常用于有色背景上,例如 banner 图等。

{{ ghost }}

组合按钮

{{ group }}

通栏按钮

通栏按钮在宽度上充满其所在的父容器(无 padding 和 margin 值)。该按钮常见于移动端和一些表单场景中。

{{ block }}

02 组件状态

按钮禁用态

{{ status }}

03 组件样式

按钮尺寸

{{ size }}

按钮形状

{{ shape }}

按钮主题

{{ theme }}