Play UIButton
常见的操作按钮。
用法
type
设置按钮的类型。
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button mode="solid">
solid
</pl-button>
<pl-button mode="outline">
outline
</pl-button>
<pl-button mode="ghost">
ghost
</pl-button>
<pl-button mode="link">
link
</pl-button>
<pl-button mode="white">
white
</pl-button>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button mode="solid">
solid
</pl-button>
<pl-button mode="outline">
outline
</pl-button>
<pl-button mode="ghost">
ghost
</pl-button>
<pl-button mode="link">
link
</pl-button>
<pl-button mode="white">
white
</pl-button>
</div>
</div>
</template>size
设置按钮的尺寸。
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button mode="solid" size="mini">
mini
</pl-button>
<pl-button mode="solid" size="small">
small
</pl-button>
<pl-button mode="solid" size="medium">
medium
</pl-button>
<pl-button mode="solid" size="large">
large
</pl-button>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button mode="solid" size="mini">
mini
</pl-button>
<pl-button mode="solid" size="small">
small
</pl-button>
<pl-button mode="solid" size="medium">
medium
</pl-button>
<pl-button mode="solid" size="large">
large
</pl-button>
</div>
</div>
</template>state
设置按钮的状态。
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button state="primary">
primary
</pl-button>
<pl-button state="info">
info
</pl-button>
<pl-button state="success">
success
</pl-button>
<pl-button state="warning">
warning
</pl-button>
<pl-button state="danger">
danger
</pl-button>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button state="primary">
primary
</pl-button>
<pl-button state="info">
info
</pl-button>
<pl-button state="success">
success
</pl-button>
<pl-button state="warning">
warning
</pl-button>
<pl-button state="danger">
danger
</pl-button>
</div>
</div>
</template>shape
设置按钮的形状。
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button shape="rounded">
rounded
</pl-button>
<pl-button shape="pilled">
pilled
</pl-button>
<pl-button shape="circle">
circle
</pl-button>
<pl-button shape="plain">
plain
</pl-button>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button shape="rounded">
rounded
</pl-button>
<pl-button shape="pilled">
pilled
</pl-button>
<pl-button shape="circle">
circle
</pl-button>
<pl-button shape="plain">
plain
</pl-button>
</div>
</div>
</template>icon
设置按钮左右图标。
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button icon-left="airplane">
airplane
</pl-button>
<pl-button icon-right="browser-chrome">
browser-chrome
</pl-button>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button icon-left="airplane">
airplane
</pl-button>
<pl-button icon-right="browser-chrome">
browser-chrome
</pl-button>
</div>
</div>
</template>disabled
可以使用禁用属性定义是否禁用按钮。
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button disabled mode="solid">
solid
</pl-button>
<pl-button disabled mode="outline">
outline
</pl-button>
<pl-button disabled mode="ghost">
ghost
</pl-button>
<pl-button disabled mode="link">
link
</pl-button>
<pl-button disabled mode="white">
white
</pl-button>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button disabled mode="solid">
solid
</pl-button>
<pl-button disabled mode="outline">
outline
</pl-button>
<pl-button disabled mode="ghost">
ghost
</pl-button>
<pl-button disabled mode="link">
link
</pl-button>
<pl-button disabled mode="white">
white
</pl-button>
</div>
</div>
</template>属性
| 属性名 | 可选值 | 默认值 | 描述 |
|---|---|---|---|
| mode | solid | white | outline | ghost | link | solid | 设置按钮类型 |
| type | button | reset | submit | button | 设置按钮原生类型 |
| shape | rounded | pilled | circle | plain | rounded | 设置按钮形状 |
| size | small | medium | large | medium | 设置按钮尺寸 |
| state | info | success | warning | danger | info | 设置按钮状态 |
| iconLeft | Bootstrap Icons | 设置按钮左图标 | |
| iconRight | Bootstrap Icons | 设置按钮右图标 | |
| disabled | boolean | false | 设置按钮禁用状态 |
插槽
| 插槽名 | 参数 | 描述 |
|---|---|---|
| default | () | 自定义默认内容 |