ButtonGroup 按钮组

基本用法

```schema: scope=”body” { “type”: “button-group”, “buttons”: [ { “type”: “button”, “label”: “Button”, “actionType”: “dialog”, “dialog”: { “confirmMode”: false, “title”: “提示”, “body”: “对,你刚点击了!” } },

  1. {
  2. "type": "button",
  3. "actionType": "url",
  4. "url": "https://www.baidu.com",
  5. "blank": true,
  6. "label": "百度一下"
  7. },
  8. {
  9. "type": "button",
  10. "label": "普通按钮"
  11. }

] }

  1. ## 垂直模式
  2. 配置`"vertical": true`,实现垂直模式
  3. ```schema: scope="body"
  4. [
  5. {
  6. "type": "button-group",
  7. "vertical": true,
  8. "buttons": [
  9. {
  10. "type": "button",
  11. "label": "按钮1"
  12. },
  13. {
  14. "type": "button",
  15. "label": "按钮2"
  16. },
  17. {
  18. "type": "button",
  19. "label": "按钮3"
  20. }
  21. ]
  22. }
  23. ]

平铺模式

配置 "tiled": true 实现平铺模式

```schema: scope=”body” [ { “type”: “button-group”, “tiled”: true, “buttons”: [ { “type”: “button”, “label”: “按钮1” }, { “type”: “button”, “label”: “按钮2” }, { “type”: “button”, “label”: “按钮3” } ] } ]

  1. ## 按钮主题样式
  2. 配置 `btnLevel` 统一设置按钮主题样式,注意 `buttons ` `options` 中的`level`属性优先级高于`btnLevel`。配置 `btnActiveLevel` 为按钮设置激活态时的主题样式。
  3. ```schema: scope="body"
  4. [
  5. {
  6. "type": "button-group",
  7. "btnLevel": "light",
  8. "btnActiveLevel": "warning",
  9. "buttons": [
  10. {
  11. "type": "button",
  12. "label": "按钮1"
  13. },
  14. {
  15. "type": "button",
  16. "label": "按钮2"
  17. },
  18. {
  19. "type": "button",
  20. "label": "按钮3",
  21. "level": "primary"
  22. }
  23. ]
  24. }
  25. ]

属性表

属性名 类型 默认值 说明
type string "button-group" 指定为 button-group 渲染器
vertical boolean false 是否使用垂直模式
tiled boolean false 是否使用平铺模式
btnLevel `’link’ \ ‘primary’ \ ‘secondary’ \ ‘info’\ ‘success’ \ ‘warning’ \ ‘danger’ \ ‘light’\ ‘dark’ \ ‘default’` "default" 按钮样式
btnActiveLevel `’link’ \ ‘primary’ \ ‘secondary’ \ ‘info’\ ‘success’ \ ‘warning’ \ ‘danger’ \ ‘light’\ ‘dark’ \ ‘default’` "default" 选中按钮样式
buttons Array<Action> 按钮
className string 外层 Dom 的类名