121 lines
2.5 KiB
Vue
121 lines
2.5 KiB
Vue
<template>
|
|
<div style="display: flex; gap: 8px;">
|
|
<AButton>
|
|
Normal
|
|
</AButton>
|
|
<AButton status="primary">
|
|
主按钮
|
|
</AButton>
|
|
<AButton status="warning">
|
|
警告
|
|
</AButton>
|
|
<AButton status="danger">
|
|
危险
|
|
</AButton>
|
|
<AButton status="success">
|
|
成功
|
|
</AButton>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px;">
|
|
<AButton type="outline">
|
|
Normal
|
|
</AButton>
|
|
<AButton status="primary" type="outline">
|
|
主按钮
|
|
</AButton>
|
|
<AButton status="warning" type="outline">
|
|
警告
|
|
</AButton>
|
|
<AButton status="danger" type="outline">
|
|
危险
|
|
</AButton>
|
|
<AButton status="success" type="outline">
|
|
成功
|
|
</AButton>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px;">
|
|
<AButton type="dashed">
|
|
Normal
|
|
</AButton>
|
|
<AButton status="primary" type="dashed">
|
|
主按钮
|
|
</AButton>
|
|
<AButton status="warning" type="dashed">
|
|
警告
|
|
</AButton>
|
|
<AButton status="danger" type="dashed">
|
|
危险
|
|
</AButton>
|
|
<AButton status="success" type="dashed">
|
|
成功
|
|
</AButton>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px;">
|
|
<AButton type="text">
|
|
Normal
|
|
</AButton>
|
|
<AButton status="primary" type="text">
|
|
主按钮
|
|
</AButton>
|
|
<AButton status="warning" type="text">
|
|
警告
|
|
</AButton>
|
|
<AButton status="danger" type="text">
|
|
危险
|
|
</AButton>
|
|
<AButton status="success" type="text">
|
|
成功
|
|
</AButton>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px;">
|
|
<AButton disabled>
|
|
禁用
|
|
</AButton>
|
|
<AButton status="primary" disabled>
|
|
禁用
|
|
</AButton>
|
|
<AButton type="outline" disabled>
|
|
禁用
|
|
</AButton>
|
|
<AButton type="dashed" disabled>
|
|
禁用
|
|
</AButton>
|
|
<AButton type="text" disabled>
|
|
禁用
|
|
</AButton>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px;">
|
|
<AButton loading>
|
|
loading
|
|
</AButton>
|
|
<AButton status="primary" loading>
|
|
loading
|
|
</AButton>
|
|
<AButton type="outline" loading>
|
|
loading
|
|
</AButton>
|
|
<AButton type="dashed" loading>
|
|
loading
|
|
</AButton>
|
|
<AButton type="text" loading>
|
|
loading
|
|
</AButton>
|
|
</div>
|
|
<div style="display: flex; gap: 8px;">
|
|
<AButton status="primary" size="small">
|
|
small
|
|
</AButton>
|
|
<AButton status="primary" size="medium">
|
|
medium
|
|
</AButton>
|
|
<AButton status="primary" size="large">
|
|
large
|
|
</AButton>
|
|
</div>
|
|
</template>
|