# 基础使用
<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
是否为扁平按钮