#header-mark#
ToggleIcon 图标切换
图标切换组件允许在True/False状态之间切换一个条件,类似于Checkbox和Toggle组件,但使用图标来表示状态。
底层实现为panel.widgets.ToggleIcon,参数基本一致,参考文档:https://panel.holoviz.org/reference/widgets/ToggleIcon.html
基本用法
基本的图标切换组件使用:
自定义图标
可以自定义默认图标和激活状态图标:
使用SVG图标
可以使用SVG字符串作为图标:
API
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| active_icon | 切换开启时显示的图标 | str tabler-icons.io图标名称或SVG字符串 | — |
| icon | 切换关闭时显示的图标 | str tabler-icons.io图标名称或SVG字符串 | — |
| value | 切换的状态 | bool | False |
| description | 鼠标悬停时显示的描述 | str | — |
| disabled | 是否禁用组件 | bool | False |
| name | 组件标题 | str | "" |
| size | 图标大小 | str CSS字体大小值,如'1em'或'20px' | — |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 当切换状态变化时触发的事件 | Callable |
Controls
src/examples/panel_vuepy/widgets/ToggleIcon