分段选择与工具切换

Segmented Control / Toggle Group

把少量互斥值或可切换工具并排展示。

对比

交互预览实时预览

选择文本样式

粗体斜体下划线

可同时选中多个选项

可同时切换多个样式

使用代码安装指南 ↗

app.mjs

import { mount } from '@sofish/ui/browser';

const view = mount(
  document.querySelector('#example'),
  'toggle-group'
);

view.element.addEventListener('ui:change', event => {
  console.log(event.detail.value);
});

// view.update({ ...nextProps });
// view.destroy();

什么时候用

视图模式、对齐方式或紧密相关的工具选项。

什么时候不用

切换内容面板使用 Tabs；执行无状态动作使用 Button。

COMPONENT API

属性与事件

传入业务数据，通过事件连接你的应用。

属性	默认值
`label`	`"选择文本样式"`
`name`	`"sample-format"`
`options`	`[{"value":"bold","label":"粗体"},{"value":"italic","label":"斜体"},{"value":"underline","label":"下划线"}]`
`value`	`[]`
`multiple`	`true`
`disabled`	`false`
`help`	`"可同时选中多个选项"`