#header-mark#
ToggleButton 按钮
表示两种相互对立的状态间的切换，多用于触发「开/关」。
基础用法
绑定 v-model 到一个 Boolean 类型的变量。 点击后变量值取反，当变量为 True 或 False 时背景色不同。
禁用状态
你可以使用 disabled 属性来定义按钮是否被禁用。
使用 disabled 属性来控制按钮是否为禁用状态。该属性接受一个 bool 类型的值。
提示信息
通过 tooltip 属性在鼠标 hover 时展示提示信息。
图标按钮
使用图标为按钮添加更多的含义。你也可以单独使用图标不添加文字来节省显示区域占用。
使用 icon 属性来为按钮添加图标。请参阅 fontawesome 页面获取可用图标。
调整尺寸
除了默认的大小，按钮组件还提供了自定义尺寸能力，以便适配不同的场景。
使用 style 属性额外配置尺寸:
width和height指定大小，可使用px、%、auto等形式。
自定义颜色
您可以自定义按钮的颜色。
使用 style 属性额外配置颜色:
color设置文字颜色，可使用#ffffff、blue等和css兼容的形式。
API
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model/value | 开关状态绑定值 | bool | false |
| label | 按钮文字 | str | — |
| icon | 按钮图标 | str | — |
| type | 类型 | enum | — |
| tooltip | 提示信息 | str | — |
| disabled | 按钮是否为禁用状态 | bool | false |
| style | 自定义css样式 | str | - |
TIP
style 支持的其它css属性
Sizes相关
- height
- width
- max_height
- max_width
- min_height
- min_width
Display相关
- visibility
- display
- overflow
Box model相关
- border
- margin
- padding
Positioning相关
- top
- left
- bottom
- right
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 当绑定值变化时触发的事件 | Callable |
方法
| 属性名 | 说明 | 类型 |
|---|
src/examples/ipywui/component/toggle-button