跳到主要内容

按钮

用于开始一个即时操作。

何时使用​

标记了一个（或封装一组）操作命令。相应用户点击行为，触发相应的业务逻辑。

一、属性​

1. 功能​

  1. 显示标签：按钮上的描述文字
    image-20250708143750288
    image-20250708144204547

  2. 按钮图标：可以添加图标到按钮上
    image-20250708143836080
    image-20250708144010999

  3. 提示信息：鼠标悬浮于按钮上显示按钮的详细信息
    image-20250708144546356
    image-20250708144629525

  4. 交互类型：

    • 提交：将数据、表单内容发送到服务器或进行下一步特定处理的动作。按钮配置了提交之后，点击按钮，会提交包裹着按钮的表单容器的数据。
    • 按钮：一种具有多种功能的交互元素，可以执行各种操作指令，不一定只与提交数据有关，可以配置按钮的点击事件，然后自定义点击按钮之后要做的事情，配置事件的操作步骤详见 事件操作。

  5. 重置按钮：将按钮的交互类型配置为重置之后，点击按钮会将按钮外层的表单容器中已经输入的数据清空。

2. 外观​

image-20250708152752152

  1. 类型：可以更改按钮的类型，提供了六种按钮（默认、主要、虚线、链接、文本、幽灵），有不同的展示效果
    image-20250708153324183

  2. 尺寸：可以更改按钮的大小，提供三种尺寸（大、中、小）
    image-20240827152426997

  3. 形状：更改按钮的形状（默认是方形，提供了圆形和圆角）
    image-20240827152605426

  4. 满宽：根据与容器组件的位置大小关系自适应调整按钮组件大小

    • 未勾选满宽：
      image-20240827152638756

    • 勾选满宽：
      image-20240827152713076

  5. 危险按钮：删除 / 移动 / 修改权限等危险操作，一般需要二次确认
    例如删除按钮就是危险按钮：
    image-20240827152835300

  6. 幽灵属性：用于背景色比较复杂的地方，常用在首页 / 产品页等展示场景。幽灵属性会把按钮的背景色变为透明。
    image-20250708155454946

3. 状态​

详见 通用属性

二、样式​

无特殊样式，详见通用样式

三、常见使用场景​

  1. 普通使用

image-20240820140953647

  1. 改变按钮样式

image-20240820141019783

  1. 结合图标使用，可以放在需要使用比较小的按钮的位置，去掉文字只显示图标

image-20240820141044429
image-20240829083657373

  1. 结合表格容器使用，其中危险按钮采用了更加让人注意力集中的红色字体，例如删除按钮

image-20240820141230565

  1. 结合表单容器使用

image-20240820141319630