IKUN-UI

Appearance

按钮 Button ​

按钮用于触发一个操作 🏀

普通按钮 ​

type设置按钮类型，shape属性为圆角按钮

<template>
  <ik-space wrap="wrap">
    <ik-button>普通按钮</ik-button>
    <ik-button type="primary">主要按钮</ik-button>
    <ik-button type="success">成功按钮</ik-button>
    <ik-button type="warning">警告按钮</ik-button>
    <ik-button type="danger">危险按钮</ik-button>
    <ik-button round>普通按钮</ik-button>
    <ik-button type="primary" round>主要按钮</ik-button>
    <ik-button type="success" round>成功按钮</ik-button>
    <ik-button type="warning" round>警告按钮</ik-button>
    <ik-button type="danger" round>危险按钮</ik-button>
  </ik-space>
</template>

朴素按钮 ​

通过 plain 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<template>
  <ik-space wrap="wrap">
    <ik-button type="primary" plain>朴素按钮</ik-button>
    <ik-button type="success" plain>朴素按钮</ik-button>
    <ik-button type="warning" plain round>朴素按钮</ik-button>
    <ik-button type="danger" plain round>朴素按钮</ik-button>
  </ik-space>
</template>

禁用 ​

disabled属性可直接禁用按钮

<template>
  <ik-space wrap="wrap">
    <ik-button disabled>普通按钮</ik-button>
    <ik-button type="primary" disabled>主要按钮</ik-button>
    <ik-button type="success" disabled>成功按钮</ik-button>
    <ik-button type="warning" disabled>警告按钮</ik-button>
    <ik-button type="danger" disabled>危险按钮</ik-button>
  </ik-space>
</template>

带图标 ​

icon可设置图标，默认放置文字前面。内部也接受slot

<template>
  <ik-space>
    <ik-button icon="add">按钮</ik-button>
    <ik-button>
      <ik-icon name="user" />
      按钮
    </ik-button>
    <ik-button>
      按钮
      <ik-icon name="main" />
    </ik-button>

    <ik-button ikun v-ripple></ik-button>
  </ik-space>
</template>

不同大小 ​

size可设置按钮大小





<template>
  <ik-space>
    <ik-button size="small">普通按钮</ik-button>
    <ik-button type="primary" size="small">主要按钮</ik-button>
  </ik-space>
  <br />
  <br />
  <ik-space>
    <ik-button>普通按钮</ik-button>
    <ik-button type="primary">主要按钮</ik-button>
  </ik-space>
  <br />
  <br />
  <ik-space>
    <ik-button size="large">普通按钮</ik-button>
    <ik-button type="primary" size="large">主要按钮</ik-button>
  </ik-space>
</template>

加载中按钮 ​

<template>
  <ik-space>
    <ik-button loading>加载中</ik-button>
    <ik-button type="primary" loading>请稍后</ik-button>
  </ik-space>
</template>

水波纹效果按钮 ​

<template>
  <ik-space>
    <ik-button v-ripple>按 钮</ik-button>
    <ik-button type="primary" v-ripple>按 钮</ik-button>
    <ik-button type="success" v-ripple>按 钮</ik-button>
    <ik-button type="warning" v-ripple>按 钮</ik-button>
    <ik-button type="danger" v-ripple>按 钮</ik-button>
  </ik-space>
</template>

Props ​

参数说明类型可选值默认值
type按钮类型stringprimary warning success danger-
round圆形按钮booleanBooleanfalse
plain朴素按钮booleanBooleanfalse
size按钮大小stringsmall default largedefault
loading是否加载中booleanBooleanfalse

Events ​

参数说明返回参数默认值
clickclick 事件(): Event => {}-

MIT Licensed

©ikun