#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