testzm0318
/
farris-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

docs(button): update button document

This commit is contained in:
Sagi 2022-10-08 23:27:50 +08:00
parent 83b7e4baaa
commit 74ddd39db5
1 changed files with 40 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/ui-vue/docs/components/button/index.md
View File

@ -11,7 +11,12 @@ Button 组件为不同使用场景提供了多种展示样式。
import { ref } from 'vue';
</script>
<template>
<f-button></f-button>
<f-button style="margin: 5px;"> 主要按钮 </f-button>
<f-button style="margin: 5px;" :button-type="'danger'"> 危险按钮 </f-button>
<f-button style="margin: 5px;" :button-type="'success'"> 成功按钮 </f-button>
<f-button style="margin: 5px;" :button-type="'warning'"> 警告按钮 </f-button>
<f-button style="margin: 5px;" :button-type="'secondary'"> 信息按钮 </f-button>
<f-button style="margin: 5px;" :button-type="'link'"> 文本按钮 </f-button>
</template>
```
@ -27,7 +32,40 @@ import { ref } from 'vue';
const disable = ref(true);
</script>
<template>
<f-button :disable="disable"></f-button>
<div class="my-2 d-flex">
<div class="f-demo-label">禁用按钮:</div>
<f-switch v-model="disable"></f-switch>
</div>
<div>
<f-button style="margin: 5px;" :disable="disable"> 主要按钮 </f-button>
<f-button style="margin: 5px;" :button-type="'danger'" :disable="disable"> 危险按钮 </f-button>
<f-button style="margin: 5px;" :button-type="'success'" :disable="disable"> 成功按钮 </f-button>
<f-button style="margin: 5px;" :button-type="'warning'" :disable="disable"> 警告按钮 </f-button>
<f-button style="margin: 5px;" :button-type="'secondary'" :disable="disable"> 信息按钮 </f-button>
<f-button style="margin: 5px;" :button-type="'link'" :disable="disable"> 文本按钮 </f-button>
</div>
</template>
<style scoped>
.f-demo-label {
line-height: 1.4rem;
margin-right: 8px;
}
</style>
```
:::
## 尺寸
:::demo
```vue
<script setup lang="ts">
import { ref } from 'vue';
</script>
<template>
<f-button style="margin: 5px;" :size="'small'"> 小尺寸 </f-button>
<f-button style="margin: 5px;" :size="'large'"> 大尺寸 </f-button>
</template>
```