基础使用

<template>
  <c-button label="基础按钮" />
  <c-button
    label="轮廓按钮"
    outlined
  />
  <c-button
    label="圆角按钮"
    rounded
  />
  <c-button
    label="圆边按钮"
    round
  />
  <c-button
    label="扁平按钮"
    flat
    rounded
  />
</template>
点击展开/收起代码
点击打开交互式编辑器

主题

<template>
  <div class="c-row c-gutter-md c-wrap">
    <div>
      <c-button
        label="主色按钮"
        theme="primary"
      />
    </div>
    <div>
      <c-button
        label="辅色按钮"
        theme="secondary"
      />
    </div>
    <div>
      <c-button
        label="警告色按钮"
        theme="warning"
      />
    </div>
    <div>
      <c-button
        label="消极色按钮"
        theme="negative"
      />
    </div>
    <div>
      <c-button
        label="主色按钮"
        theme="primary"
        outlined
      />
    </div>
    <div>
      <c-button
        label="辅色按钮"
        theme="secondary"
        outlined
      />
    </div>
    <div>
      <c-button
        label="警告色按钮"
        theme="warning"
        outlined
      />
    </div>
    <div>
      <c-button
        label="消极色按钮"
        theme="negative"
        outlined
      />
    </div>
    <div>
      <c-button
        label="主色按钮"
        theme="primary"
        flat
      />
    </div>
    <div>
      <c-button
        label="辅色按钮"
        theme="secondary"
        flat
      />
    </div>
    <div>
      <c-button
        label="警告色按钮"
        theme="warning"
        flat
      />
    </div>
    <div>
      <c-button
        label="消极色按钮"
        theme="negative"
        flat
      />
    </div>
  </div>
</template>
点击展开/收起代码
点击打开交互式编辑器

形状

<script setup>
import { CButton } from '@casual-ui/vue'
</script>

<template>
  <CButton
    label="圆角按钮"
    rounded
  />
  <CButton
    label="圆边按钮"
    round
  />
</template>
点击展开/收起代码
点击打开交互式编辑器

尺寸

<template>
  <div class="c-row c-items-center c-gutter-md c-wrap">
    <div>
      <c-button
        label="超小尺寸"
        size="xs"
        theme="negative"
      />
    </div>
    <div>
      <c-button
        label="小尺寸"
        size="sm"
        theme="negative"
      />
    </div>
    <div>
      <c-button
        label="中等尺寸"
        size="md"
        theme="negative"
      />
    </div>
    <div>
      <c-button
        label="大尺寸"
        size="lg"
        theme="negative"
      />
    </div>
    <div>
      <c-button
        label="超大尺寸"
        size="xl"
        theme="negative"
      />
    </div>
  </div>
</template>
点击展开/收起代码
点击打开交互式编辑器

状态

<template>
  <c-button
    label="禁用状态"
    disabled
  />
  <c-button
    label="加载状态"
    loading
  />
</template>
点击展开/收起代码
点击打开交互式编辑器

块级

<template>
  <div class="c-mb-md">
    <c-button
      label="块级按钮"
      block
      size="lg"
      theme="warning"
    />
  </div>
  <div class="c-mb-md">
    <c-button
      label="块级按钮"
      block
      size="lg"
      rounded
    />
  </div>
  <div>
    <c-button
      label="块级按钮"
      block
      size="lg"
      round
      theme="negative"
      outlined
    />
  </div>
</template>
点击展开/收起代码
点击打开交互式编辑器

自定义 Loading 实例

<template>
  <c-button
    label="加载中"
    loading
  >
    <template #loading>
      <c-loading-audio />
    </template>
  </c-button>
  <c-button
    label="加载中"
    loading
    outlined
    round
  >
    <template #loading>
      <c-loading-dot />
    </template>
  </c-button>
  <c-button
    label="加载中"
    outlined
    rounded
    loading
  >
    <template #loading>
      <c-loading-bar />
    </template>
  </c-button>
</template>
点击展开/收起代码
点击打开交互式编辑器

图标按钮

<script setup>
import {
  matBuild,
  matCoPresent,
  matDeviceHub,
} from '@quasar/extras/material-icons/index'
</script>

<template>
  <c-button icon>
    <c-icon :content="matBuild" />
  </c-button>
  <c-button
    icon
    theme="secondary"
  >
    <c-icon :content="matBuild" />
  </c-button>
  <c-button
    icon
    style="font-size: 24px"
    theme="warning"
  >
    <c-icon :content="matCoPresent" />
  </c-button>
  <c-button
    outlined
    icon
    style="font-size: 32px"
    theme="negative"
  >
    <c-icon :content="matDeviceHub" />
  </c-button>
</template>
点击展开/收起代码
点击打开交互式编辑器

CButton API

Props
Slots
Events
label
string
默认值  ''

按钮文案

outlined
boolean
默认值  false

是否表现为轮廓风格

disabled
boolean
默认值  false

是否为禁用态

size
CSize
默认值  'md'

按钮尺寸

rounded
boolean
默认值  false

是否现为圆角

round
boolean
默认值  false

是否现为圆边

block
boolean
默认值  false

是否表现为块级

theme
CTheme
默认值  'primary'

主题

loading
boolean
默认值  false

是否处于加载中状态

icon
boolean
默认值  false

是否表现为图标按钮

flat
boolean
默认值  false

是否为扁平按钮