forked from opentiny/tiny-vue
51 lines
1.9 KiB
Vue
51 lines
1.9 KiB
Vue
<template>
|
||
<tiny-layout>
|
||
<tiny-row> 是否禁用：<tiny-switch v-model="disabled"></tiny-switch> </tiny-row>
|
||
<tiny-row>
|
||
<tiny-button :disabled="disabled">默认按钮</tiny-button>
|
||
<tiny-button type="primary" :disabled="disabled">主要按钮</tiny-button>
|
||
<tiny-button type="success" :disabled="disabled">成功按钮</tiny-button>
|
||
<tiny-button type="info" :disabled="disabled">信息按钮</tiny-button>
|
||
<tiny-button type="warning" :disabled="disabled">警告按钮</tiny-button>
|
||
<tiny-button type="danger" :disabled="disabled">危险按钮</tiny-button>
|
||
</tiny-row>
|
||
|
||
<tiny-row>
|
||
<tiny-button :disabled="disabled" plain>默认按钮</tiny-button>
|
||
<tiny-button type="primary" :disabled="disabled" plain>主要按钮</tiny-button>
|
||
<tiny-button type="success" :disabled="disabled" plain>成功按钮</tiny-button>
|
||
<tiny-button type="info" :disabled="disabled" plain>信息按钮</tiny-button>
|
||
<tiny-button type="warning" :disabled="disabled" plain>警告按钮</tiny-button>
|
||
<tiny-button type="danger" :disabled="disabled" plain>危险按钮</tiny-button>
|
||
</tiny-row>
|
||
|
||
<tiny-row>
|
||
<tiny-button :disabled="disabled" ghost>幽灵按钮</tiny-button>
|
||
<tiny-button :icon="TinyIconSearch" :disabled="disabled">图标按钮</tiny-button>
|
||
<tiny-button :icon="TinyIconSearch" :disabled="disabled"> </tiny-button>
|
||
<tiny-button :icon="TinyIconSearch" :disabled="disabled" circle> </tiny-button>
|
||
</tiny-row>
|
||
</tiny-layout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { Button as TinyButton, Layout as TinyLayout, Row as TinyRow, Switch as TinySwitch } from '@opentiny/vue'
|
||
import { iconSearch } from '@opentiny/vue-icon'
|
||
|
||
const disabled = ref(false)
|
||
const TinyIconSearch = iconSearch()
|
||
</script>
|
||
|
||
<style scoped>
|
||
.tiny-row {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.tiny-button {
|
||
margin-bottom: 10px;
|
||
margin-left: 0;
|
||
margin-right: 8px;
|
||
}
|
||
</style>
|