54 lines
1.8 KiB
Vue
54 lines
1.8 KiB
Vue
<script setup>
|
||
import { Plus, Search, Trash2 } from '@lucide/vue'
|
||
import Button from '../button/button.vue'
|
||
</script>
|
||
|
||
<template>
|
||
<section class="showcase-section" aria-labelledby="button-title">
|
||
<div class="section-heading">
|
||
<p class="eyebrow">Components</p>
|
||
<h2 id="button-title">Button 按钮</h2>
|
||
<p>保持克制的交互组件，优先保证可读性和响应速度。</p>
|
||
</div>
|
||
|
||
<p class="demo-label">基础用法</p>
|
||
<div class="demo-panel">
|
||
<Button type="primary">主要操作</Button>
|
||
<Button type="secondary">次要操作</Button>
|
||
<Button type="outline">描边按钮</Button>
|
||
<Button type="ghost">低强调</Button>
|
||
<Button type="danger">危险操作</Button>
|
||
<Button type="link">链接按钮</Button>
|
||
</div>
|
||
|
||
<p class="demo-label">禁用态</p>
|
||
<div class="demo-panel">
|
||
<Button disabled>默认禁用</Button>
|
||
<Button type="secondary" disabled>次要禁用</Button>
|
||
<Button type="outline" disabled>描边禁用</Button>
|
||
<Button type="danger" disabled>危险禁用</Button>
|
||
</div>
|
||
|
||
<p class="demo-label">加载态</p>
|
||
<div class="demo-panel">
|
||
<Button loading>提交中</Button>
|
||
<Button type="secondary" loading>保存中</Button>
|
||
<Button type="outline" loading>加载中</Button>
|
||
</div>
|
||
|
||
<p class="demo-label">通栏</p>
|
||
<div class="demo-panel">
|
||
<Button block>通栏按钮</Button>
|
||
</div>
|
||
|
||
<p class="demo-label">图标按钮</p>
|
||
<div class="demo-panel">
|
||
<Button><Plus /> 新建</Button>
|
||
<Button type="secondary"><Search /> 搜索</Button>
|
||
<Button type="outline">删除 <Trash2 /></Button>
|
||
<Button type="danger" aria-label="删除"><Trash2 /></Button>
|
||
<Button type="ghost" aria-label="新建"><Plus /></Button>
|
||
</div>
|
||
</section>
|
||
</template>
|