ZIO UI

Button 按钮

按钮用于开始一个即时操作。

何时使用

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

形态

通过variant设置按钮类型，目前支持solid、outline、text三种类型，默认为outline类型。
<template>
  <div class="button-size-demo">
    <z-button variant="solid">Solid Button</z-button>
    <z-button>Outline Button</z-button>
    <z-button variant="text">Text Button</z-button>
  </div>
</template>

主题色



通过color设置按钮主题，目前支持secondary、primary、danger三种类型，默认为secondary类型。
<template>
  <div class="button-size-demo">
    <z-button variant="solid" color="secondary">Secondary</z-button>
    <z-button color="secondary">Secondary</z-button>
    <z-button variant="text" color="secondary">Secondary</z-button>
  </div>
  <br />
  <div class="button-size-demo">
    <z-button variant="solid" color="primary">Primary</z-button>
    <z-button color="primary">Primary</z-button>
    <z-button variant="text" color="primary">Primary</z-button>
  </div>
  <br />
  <div class="button-size-demo">
    <z-button variant="solid" color="danger">Danger</z-button>
    <z-button color="danger">Danger</z-button>
    <z-button variant="text" color="danger">Danger</z-button>
  </div>
</template>

尺寸

通过size设置按钮大小，支持xs、sm、md、lg四种类型，默认为md。
<template>
  <div class="button-size-demo">
    <z-button size="xs">Mini</z-button>
    <z-button size="sm">Small</z-button>
    <z-button>Middle</z-button>
    <z-button size="lg">Large</z-button>
  </div>
</template>

禁用状态


通过disabled参数设置按钮禁用状态。
<template>
  <div class="button-size-demo">
    <z-button theme="solid">Solid Button</z-button>
    <z-button>Outline Button</z-button>
    <z-button theme="text">Text Button</z-button>
  </div>
  <br />
  <div class="button-size-demo">
    <z-button theme="solid" disabled>Solid Button</z-button>
    <z-button disabled>Outline Button</z-button>
    <z-button theme="text" disabled>Text Button</z-button>
  </div>
</template>

加载中状态 

<template>
  <z-button>加载中</z-button>
</template>

Button 参数

参数名类型默认说明跳转 Demo
variantIButtonVariant'outline'可选，按钮形态形态
colorIButtonColor'secondary'可选，按钮主题主题色
sizeIButtonSize'md'可选，按钮尺寸尺寸
disabledbooleanfalse可选，是否禁用 button禁用状态
loadingbooleanfalse可选，设置加载中状态加载中状态

类型

IButtonVariant 

type IButtonVariant = 'solid' | 'outline' | 'text';

IButtonSize 

type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';

IButtonColor 

type IButtonColor = 'primary' | 'secondary' | 'danger';