Play UIButton Group
按钮组组件，可用于对按钮进行组合。
用法
type
按钮组类型，它将覆盖内部按钮的类型。默认值为solid。
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group mode="solid">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="outline">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="white">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group mode="solid">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="outline">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="white">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template>state
按钮组状态，它将覆盖内部按钮的状态。默认值为info。
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group mode="solid">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group state="warning">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="outline" state="success">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="outline" state="danger">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group mode="solid">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group state="warning">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="outline" state="success">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="outline" state="danger">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template>shape
按钮组形状，它将覆盖内部按钮的形状。默认值为rounded。
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="white" shape="plain">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="outline" shape="pilled">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="white" shape="plain">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="outline" shape="pilled">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template>size
按钮组尺寸，它将覆盖内部按钮的尺寸。默认值为medium。
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group size="mini">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group size="small">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group size="medium">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group size="large">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group size="mini">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group size="small">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group size="medium">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group size="large">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template>vertical
您可以使用vertical属性来定义按钮组是否垂直。默认展示效果为水平。
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group vertical>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group vertical>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template>disabled
您可以使用disabled设置按钮组的禁用状态。
<template>
<div space-y-2>
<pl-button-group mode="solid" disabled>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</template><template>
<div space-y-2>
<pl-button-group mode="solid" disabled>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</template>属性
| 属性名 | 可选值 | 默认值 | 描述 |
|---|---|---|---|
| type | solid | white | outline | solid | 设置按钮组类型 |
| shape | rounded | pilled | plain | rounded | 设置按钮组形状 |
| size | mini | small | medium | large | medium | 设置按钮组尺寸 |
| state | info | success | warning | danger | info | 设置按钮组类型状态 |
| vertical | boolean | false | 设置按钮组为垂直方向 |
| disabled | boolean | false | 设置按钮组禁用状态 |
插槽
| 插槽名 | 参数 | 描述 |
|---|---|---|
| default | () | 自定义默认内容 |