element-plus/docs/examples/button/text.vue
JeremyWuuuuu 5d2daca248
docs(components): [button] link button (#7694)
- Update docs for link button.
- Update vp-translation wrong usage of button.
- Update doc show cases examples.
- Update commit hash value for `link button`
2022-05-14 12:58:09 +08:00

48 lines
1.1 KiB
Vue

<template>
<p>Basic text button</p>
<div class="flex justify-space-between mb-4 flex-wrap gap-4">
<el-button
v-for="button in buttons"
:key="button.text"
:type="button.type"
text
>{{ button.text }}</el-button
>
</div>
<p>Background color always on</p>
<div class="flex justify-space-between mb-4 flex-wrap gap-4">
<el-button
v-for="button in buttons"
:key="button.text"
:type="button.type"
text
bg
>{{ button.text }}</el-button
>
</div>
<p>Disabled text button</p>
<div class="flex justify-space-between flex-wrap gap-4">
<el-button
v-for="button in buttons"
:key="button.text"
:type="button.type"
text
disabled
>{{ button.text }}</el-button
>
</div>
</template>
<script setup lang="ts">
const buttons = [
{ type: '', text: 'plain' },
{ type: 'primary', text: 'primary' },
{ type: 'success', text: 'success' },
{ type: 'info', text: 'info' },
{ type: 'warning', text: 'warning' },
{ type: 'danger', text: 'danger' },
] as const
</script>