Win Design

Button 按钮

代码演示

场景样式

轻量按钮

虚线按钮

幽灵按钮

圆角按钮

圆形按钮

文字按钮

基础用法

按钮有场景、轻量级、虚线、幽灵、圆角、圆形、文字按钮等共7种类型，可以根据具体需求选用。

查看代码 < />

<template>
  <section class="demo-wrapper">
    <h3 class="label">场景样式</h3>
    <w-button>默认按钮</w-button>
    <w-button type="primary">确认按钮</w-button>
    <w-button type="success">成功按钮</w-button>
    <w-button type="info">信息按钮</w-button>
    <w-button type="warning">警告按钮</w-button>
    <w-button type="error">危险按钮</w-button>
  </section>
  <section class="demo-wrapper">
    <h3 class="label">轻量按钮</h3>
    <w-button plain>默认按钮</w-button>
    <w-button type="primary" plain>确认按钮</w-button>
    <w-button type="success" plain>成功按钮</w-button>
    <w-button type="info" plain>信息按钮</w-button>
    <w-button type="warning" plain>警告按钮</w-button>
    <w-button type="error" plain>危险按钮</w-button>
  </section>
  <section class="demo-wrapper">
    <h3 class="label">虚线按钮</h3>
    <w-button dashed>默认按钮</w-button>
    <w-button type="primary" dashed>确认按钮</w-button>
    <w-button type="success" dashed>成功按钮</w-button>
    <w-button type="info" dashed>信息按钮</w-button>
    <w-button type="warning" dashed>警告按钮</w-button>
    <w-button type="error" dashed>危险按钮</w-button>
  </section>
  <section class="demo-wrapper">
    <h3 class="label">幽灵按钮</h3>
    <div style="display:inline-block;padding: 10px 15px 0;background-color: #484848;">
      <w-button ghost>Default</w-button>
      <w-button type="error" ghost>Error</w-button>
      <w-button ghost dashed>Dashed</w-button>
      <w-button type="warning" ghost dashed>Dashed Warning</w-button>
      <w-button type="text">Text</w-button>
    </div>
  </section>
  <section class="demo-wrapper">
    <h3 class="label">圆角按钮</h3>
    <w-button round>默认按钮</w-button>
    <w-button type="primary" round>确认按钮</w-button>
    <w-button type="success" round>成功按钮</w-button>
    <w-button type="info" round>信息按钮</w-button>
    <w-button type="warning" round>警告按钮</w-button>
    <w-button type="error" round>危险按钮</w-button>
  </section>
  <section class="demo-wrapper">
    <h3 class="label">圆形按钮</h3>
    <w-button icon="w-icon-search" circle></w-button>
    <w-button type="primary" icon="w-icon-edit" circle></w-button>
    <w-button type="success" icon="w-icon-link" circle></w-button>
    <w-button type="info" icon="w-icon-info" circle></w-button>
    <w-button type="warning" icon="w-icon-mark" circle></w-button>
    <w-button type="error" icon="w-icon-delete" circle></w-button>
  </section>
  <section class="demo-wrapper">
    <h3 class="label">文字按钮</h3>
    <w-button type="text">开具申请单</w-button>
  </section>
</template>

图标按钮

为按钮添加 icon 属性即可将按钮变为图标按钮, 也可以使用插槽的方式通过 i 标签更灵活地定义图标。

查看代码 < />

<template>
  <w-button type="primary" icon="w-icon-edit"></w-button>
  <w-button type="primary" icon="w-icon-share"></w-button>
  <w-button type="primary" icon="w-icon-delete"></w-button>
  <w-button type="primary">下载<i class="w-icon-download w-icon--right"></i></w-button>
  <w-button icon="w-icon-search">搜索</w-button>
</template>

按钮组

使用w-button-group组件包裹w-button的形式就可以形成一个按钮组。

查看代码 < />

<template>
  <w-button-group>
    <w-button type="primary" icon="w-icon-edit"></w-button>
    <w-button type="primary" icon="w-icon-share"></w-button>
    <w-button type="primary" icon="w-icon-delete"></w-button>
  </w-button-group>
  <w-button-group>
    <w-button plain icon="w-icon-triangle-left">上一页</w-button>
    <w-button plain>下一页 <i class="w-icon-triangle-right"></i></w-button>
  </w-button-group>
</template>

尺寸选择

一般地, 推荐使用 size='medium' 以达到精致紧凑的视觉效果, 当然也有其他大小以供选择： large / medium / small / mini。

查看代码 < />

<template>
  <w-button size="large" round>large button</w-button>
  <w-button type="primary" size="medium" round>medium</w-button>
  <w-button type="success" size="small" round>small</w-button>
  <w-button type="info" size="mini" round>mini</w-button>
</template>


禁用状态

为组件添加 disabled 属性即可禁用按钮。

查看代码 < />

<template>
  <w-button disabled>默认按钮</w-button>
  <w-button type="primary" disabled>确认按钮</w-button>
  <w-button type="success" disabled>成功按钮</w-button>
  <w-button type="info" disabled>信息按钮</w-button>
  <w-button type="warning" disabled>警告按钮</w-button>
  <w-button type="error" disabled>危险按钮</w-button>
  <w-button icon="w-icon-search" disabled>搜索</w-button>
  <br />
  <w-button plain disabled>默认按钮</w-button>
  <w-button type="primary" plain disabled>确认按钮</w-button>
  <w-button type="success" plain disabled>成功按钮</w-button>
  <w-button type="info" plain disabled>信息按钮</w-button>
  <w-button type="warning" plain disabled>警告按钮</w-button>
  <w-button type="error" plain disabled>危险按钮</w-button>
  <w-button type="text" disabled>开具处方</w-button>
  <br />
  <w-button dashed disabled>默认按钮</w-button>
  <w-button type="primary" dashed disabled>确认按钮</w-button>
  <w-button type="success" dashed disabled>成功按钮</w-button>
  <w-button type="info" dashed disabled>信息按钮</w-button>
  <w-button type="warning" dashed disabled>警告按钮</w-button>
  <w-button type="error" dashed disabled>危险按钮</w-button>
</template>

加载中

用组件的loading属性, 可以控制按钮的加载状态。

查看代码 < />

<template>
  <w-button loading type="primary" icon="w-icon-edit">发 送</w-button>
</template>

API

Attributes

参数 说明 类型 可选值 默认值 Version
autofocus 是否默认聚焦 Boolean — false
circle 是否圆形按钮 Boolean — false
disabled 是否禁用状态 Boolean — false
ghost 是否启用幽灵按钮 Boolean — false
loading 是否加载中状态 Boolean — false
icon 图标类名 String — —
native-type 原生 type 属性 String button / submit / reset button
plain 是否朴素按钮 Boolean — false
round 是否圆角按钮 Boolean — false
size 尺寸 String large / medium / small / mini medium
type 类型 String primary / success / warning / error / info / text —

贡献者

类型 参与者
设计者 UED视觉组
维护者 UED前端组
上次更新: 3/17/2020, 8:46:00 PM

← Icon 图标 →