Button 按钮

常用的操作按钮。

基础按钮

基础按钮包括不同颜色状态下的填充按钮、描边按钮、虚框按钮和文字按钮。

<template>
  <div className="idesign-demo-block-column">
    <!-- 灰色 info -->
    <div className="idesign-demo-block-row">
      <i-button type="info">填充按钮</i-button>
      <i-button type="info" variant="outline">描边按钮</i-button>
      <i-button type="info" variant="dashed">虚框按钮</i-button>
      <i-button type="info" variant="text">文字按钮</i-button>
    </div>
    <!-- 蓝色 primary（默认） -->
    <div className="idesign-demo-block-row">
      <i-button type="primary">填充按钮</i-button>
      <i-button type="primary" variant="outline">描边按钮</i-button>
      <i-button type="primary" variant="dashed">虚框按钮</i-button>
      <i-button type="primary" variant="text">文字按钮</i-button>
    </div>
    <!-- 绿色 success -->
    <div className="idesign-demo-block-row">
      <i-button type="success">填充按钮</i-button>
      <i-button type="success" variant="outline">描边按钮</i-button>
      <i-button type="success" variant="dashed">虚框按钮</i-button>
      <i-button type="success" variant="text">文字按钮</i-button>
    </div>
    <!-- 黄色 warning -->
    <div className="idesign-demo-block-row">
      <i-button type="warning">填充按钮</i-button>
      <i-button type="warning" variant="outline">描边按钮</i-button>
      <i-button type="warning" variant="dashed">虚框按钮</i-button>
      <i-button type="warning" variant="text">文字按钮</i-button>
    </div>
    <!-- 红色 error -->
    <div className="idesign-demo-block-row">
      <i-button type="error">填充按钮</i-button>
      <i-button type="error" variant="outline">描边按钮</i-button>
      <i-button type="error" variant="dashed">虚框按钮</i-button>
      <i-button type="error" variant="text">文字按钮</i-button>
    </div>
  </div>
</template>

显示代码复制代码复制代码

聚焦状态

可以使用 active 属性来定义按钮是否被聚焦，该属性接受一个 Boolean 类型的值。

<template>
  <div className="idesign-demo-block-column">
    <!-- 填充按钮 -->
    <div className="idesign-demo-block-row">
      <i-button type="info" active> Info </i-button>
      <i-button type="primary" active> Primary </i-button>
      <i-button type="success" active> Success </i-button>
      <i-button type="warning" active> Warning </i-button>
      <i-button type="error" active> Error </i-button>
    </div>
    <!-- 描边按钮 -->
    <div className="idesign-demo-block-row">
      <i-button type="info" variant="outline" active> Info </i-button>
      <i-button type="primary" variant="outline" active> Primary </i-button>
      <i-button type="success" variant="outline" active> Success </i-button>
      <i-button type="warning" variant="outline" active> Warning </i-button>
      <i-button type="error" variant="outline" active> Error </i-button>
    </div>
    <!-- 虚框按钮 -->
    <div className="idesign-demo-block-row">
      <i-button type="info" variant="dashed" active> Info </i-button>
      <i-button type="primary" variant="dashed" active> Primary </i-button>
      <i-button type="success" variant="dashed" active> Success </i-button>
      <i-button type="warning" variant="dashed" active> Warning </i-button>
      <i-button type="error" variant="dashed" active> Error </i-button>
    </div>
    <!-- 文字按钮 -->
    <div className="idesign-demo-block-row">
      <i-button type="info" variant="text" active> Info </i-button>
      <i-button type="primary" variant="text" active> Primary </i-button>
      <i-button type="success" variant="text" active> Success </i-button>
      <i-button type="warning" variant="text" active> Warning </i-button>
      <i-button type="error" variant="text" active> Error </i-button>
    </div>
  </div>
</template>

显示代码复制代码复制代码

禁用状态

可以使用 disabled 属性来定义按钮是否被禁用，该属性接受一个 Boolean 类型的值。

<template>
  <div className="idesign-demo-block-column">
    <!-- 填充按钮 -->
    <div className="idesign-demo-block-row">
      <i-button type="info" disabled> Info </i-button>
      <i-button type="primary" disabled> Primary </i-button>
      <i-button type="success" disabled> Success </i-button>
      <i-button type="warning" disabled> Warning </i-button>
      <i-button type="error" disabled> Error </i-button>
    </div>
    <!-- 描边按钮 -->
    <div className="idesign-demo-block-row">
      <i-button type="info" variant="outline" disabled> Info </i-button>
      <i-button type="primary" variant="outline" disabled> Primary </i-button>
      <i-button type="success" variant="outline" disabled> Success </i-button>
      <i-button type="warning" variant="outline" disabled> Warning </i-button>
      <i-button type="error" variant="outline" disabled> Error </i-button>
    </div>
    <!-- 虚框按钮 -->
    <div className="idesign-demo-block-row">
      <i-button type="info" variant="dashed" disabled> Info </i-button>
      <i-button type="primary" variant="dashed" disabled> Primary </i-button>
      <i-button type="success" variant="dashed" disabled> Success </i-button>
      <i-button type="warning" variant="dashed" disabled> Warning </i-button>
      <i-button type="error" variant="dashed" disabled> Error </i-button>
    </div>
    <!-- 文字按钮 -->
    <div className="idesign-demo-block-row">
      <i-button type="info" variant="text" disabled> Info </i-button>
      <i-button type="primary" variant="text" disabled> Primary </i-button>
      <i-button type="success" variant="text" disabled> Success </i-button>
      <i-button type="warning" variant="text" disabled> Warning </i-button>
      <i-button type="error" variant="text" disabled> Error </i-button>
    </div>
  </div>
</template>

显示代码复制代码复制代码

不同尺寸

提供 small、medium（默认）、large 三种尺寸的按钮。

<template>
  <div className="idesign-demo-block-column">
    <!-- 小尺寸 small -->
    <div className="idesign-demo-block-row">
      <i-button size="small">填充按钮</i-button>
      <i-button variant="outline" size="small"> 描边按钮 </i-button>
      <i-button variant="dashed" size="small"> 虚框按钮 </i-button>
      <i-button variant="text" size="small"> 文字按钮 </i-button>
    </div>
    <!-- 中尺寸 medium（默认） -->
    <div className="idesign-demo-block-row">
      <i-button size="medium">填充按钮</i-button>
      <i-button variant="outline" size="medium"> 描边按钮 </i-button>
      <i-button variant="dashed" size="medium"> 虚框按钮 </i-button>
      <i-button variant="text" size="medium"> 文字按钮 </i-button>
    </div>
    <!-- 大尺寸 large -->
    <div className="idesign-demo-block-row">
      <i-button size="large">填充按钮</i-button>
      <i-button variant="outline" size="large"> 描边按钮 </i-button>
      <i-button variant="dashed" size="large"> 虚框按钮 </i-button>
      <i-button variant="text" size="large"> 文字按钮 </i-button>
    </div>
  </div>
</template>

显示代码复制代码复制代码

不同形状

提供 square、round（默认）、circle 三种形状的按钮。

<template>
  <div className="idesign-demo-block-column">
    <!-- 方角 square -->
    <div className="idesign-demo-block-row">
      <i-button shape="square">填充按钮</i-button>
      <i-button variant="outline" shape="square"> 描边按钮 </i-button>
      <i-button variant="dashed" shape="square"> 虚框按钮 </i-button>
    </div>
    <!-- 小圆角 round（默认） -->
    <div className="idesign-demo-block-row">
      <i-button shape="round">填充按钮</i-button>
      <i-button variant="outline" shape="round"> 描边按钮 </i-button>
      <i-button variant="dashed" shape="round"> 虚框按钮 </i-button>
    </div>
    <!-- 大圆角 circle -->
    <div className="idesign-demo-block-row">
      <i-button shape="circle">填充按钮</i-button>
      <i-button variant="outline" shape="circle"> 描边按钮 </i-button>
      <i-button variant="dashed" shape="circle"> 虚框按钮 </i-button>
    </div>
  </div>
</template>

显示代码复制代码复制代码

图标按钮

通过 icon 属性控制按钮中的内置图标：

<template>
  <div className="idesign-demo-block-row">
    <i-button size="small" icon="ThePlus">图标按钮</i-button>
    <i-button size="medium" icon="ThePlus">图标按钮</i-button>
    <i-button size="large" icon="ThePlus">图标按钮</i-button>
  </div>
</template>

显示代码复制代码复制代码

Button Attributes

属性	说明	类型	默认值
disabled	是否禁用按钮	boolean	false
active	是否聚焦状态	boolean	false
shape	按钮形状	"square"〡"round"〡"circle"	round
size	按钮尺寸	"small"〡"medium"〡"large"	medium
type	按钮类型	"info"〡"primary"〡"error"〡"warning"〡"success"	primary
variant	按钮形式	"base"〡"outline"〡"dashed"〡"text"	base

Button Events

属性	说明	类型	默认值
click	点击图标触发事件	(ev: MouseEvent) => true	--