TulipButton 按钮
平平无奇的按钮。
基本用法
使用 hue 改变它的默认主题色
<template>
<tu-button>默认按钮</tu-button>
<tu-button hue="primary">主要按钮</tu-button>
<tu-button hue="success">成功按钮</tu-button>
<tu-button hue="info">信息按钮</tu-button>
<tu-button hue="warning">警告按钮</tu-button>
<tu-button hue="error">错误按钮</tu-button>
</template>
展开源码
添加图标
添加图标来增加按钮的辨识度。
<template>
<tu-button :icon="CheckCircle">成功</tu-button>
<tu-button :icon="WarningCircle" icon-position="right">提示</tu-button>
</template>
<script setup lang="ts">
import { CheckCircle, WarningCircle } from 'tulip/icons'
</script>展开源码
禁用状态
<template>
<tu-button disabled>默认按钮</tu-button>
<tu-button hue="primary" disabled>主要按钮</tu-button>
<tu-button hue="success" disabled>成功按钮</tu-button>
<tu-button hue="info" disabled>信息按钮</tu-button>
<tu-button hue="warning" disabled>警告按钮</tu-button>
<tu-button hue="error" disabled>错误按钮</tu-button>
</template>
展开源码
加载状态
按钮有 loading 状态。
<template>
<tu-button :icon="CheckCircle" :loading="loading" @click="onClick">点我</tu-button>
<tu-button :loading="loading" @click="onClick">点我</tu-button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { CheckCircle } from 'tulip/icons'
const loading = ref<boolean>(false)
const onClick = () => loading.value = !loading.value
</script>
展开源码
虚线按钮
使用 dashed 设置虚线按钮。
<template>
<tu-button dashed>默认按钮</tu-button>
<tu-button hue="primary" dashed>主要按钮</tu-button>
<tu-button hue="success" dashed>成功按钮</tu-button>
<tu-button hue="info" dashed>信息按钮</tu-button>
<tu-button hue="warning" dashed>警告按钮</tu-button>
<tu-button hue="error" dashed>错误按钮</tu-button>
</template>
展开源码
透明背景
带有 ghost 属性的透明背景按钮。
<template>
<tu-button ghost>默认按钮</tu-button>
<tu-button hue="primary" ghost>主要按钮</tu-button>
<tu-button hue="success" ghost>成功按钮</tu-button>
<tu-button hue="info" ghost>信息按钮</tu-button>
<tu-button hue="warning" ghost>警告按钮</tu-button>
<tu-button hue="error" ghost>错误按钮</tu-button>
</template>
展开源码
大小
按钮有三种大小。
<template>
<tu-button size="small">小号</tu-button>
<tu-button>默认</tu-button>
<tu-button size="large">大号</tu-button>
</template>
展开源码
形状
按钮有多种形状。
<template>
<tu-button>默认按钮</tu-button>
<tu-button round>圆角按钮</tu-button>
<tu-button :icon="CheckCircle" circle />
</template>
<script setup lang="ts">
import { CheckCircle } from 'tulip/icons'
</script>展开源码
文本按钮
按钮可以是文本。
<template>
<tu-button :icon="CheckCircle" text>默认按钮</tu-button>
</template>
<script setup lang="ts">
import { CheckCircle } from 'tulip/icons'
</script>展开源码
按钮组
可以添加按钮组，使用 vertical 属性可以使按钮组竖向排列。
<template>
<tu-button-group>
<tu-button>上一页</tu-button>
<tu-button>第1页</tu-button>
<tu-button>第2页</tu-button>
<tu-button>第3页</tu-button>
<tu-button>下一页</tu-button>
</tu-button-group>
<tu-button-group vertical>
<tu-button>上一章</tu-button>
<tu-button>第一章</tu-button>
<tu-button>第二章</tu-button>
<tu-button>第三章</tu-button>
<tu-button>下一章</tu-button>
</tu-button-group>
</template>
展开源码
Button 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| hue | 按钮的色调 | 'default' | 'primary' | 'success' | 'warning' | 'info' | 'error' | 'default' |
| type | 原生 type 属性 | 'button' | 'submit' | 'reset' | 'button' |
| loading | 按钮 loading 状态 | boolean | false |
| disabled | 按钮禁用状态 | boolean | false |
| icon | 给按钮添加图标 | string | undefined |
| icon-position | 按钮图标的位置 | 'left' | 'right' | 'left' |
| dashed | 虚线按钮 | boolean | false |
| ghost | 按钮是否为透明背景 | boolean | false |
| text | 显示文本按钮 | boolean | false |
| round | 显示圆角按钮 | boolean | false |
| circle | 显示圆形按钮 | boolean | false |
| size | 按钮的大小 | 'large' | 'medium' | 'small' | 'medium' |
Button Group 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| vertical | 是否竖直排列按钮组 | boolean | false |