#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 ​

属性 ​

方法 ​

src/examples/ipywui/component/toggle-button