zsmj
2 years ago
8 changed files with 148 additions and 1 deletions
After Width: | Height: | Size: 124 KiB |
After Width: | Height: | Size: 215 KiB |
After Width: | Height: | Size: 182 KiB |
After Width: | Height: | Size: 194 KiB |
After Width: | Height: | Size: 297 KiB |
@ -0,0 +1,115 @@
|
||||
# 使用ButtonGroup控制可点击组件的控制选中状态 |
||||
|
||||
先看如下示例,被选中的radio,再次点击,会使其取消选中,大多数时候这不符合我们的预期 |
||||
```demo |
||||
{ |
||||
type: "bi.vertical_adapt", |
||||
height: 30, |
||||
scrollable: false, |
||||
items: [ |
||||
{ |
||||
type: "bi.single_select_radio_item", |
||||
text: "选项1", |
||||
}, { |
||||
type: "bi.single_select_radio_item", |
||||
text: "选项2", |
||||
}, |
||||
], |
||||
} |
||||
``` |
||||
|
||||
![示例](../images/13.gif) |
||||
|
||||
为了实现真正的单选效果,我们需要进行状态控制,尽管如此,选中状态还是会跳来跳去,如果选项比较多的话将是个灾难 |
||||
|
||||
```demo |
||||
const radios = []; |
||||
|
||||
const widget = BI.createWidget({ |
||||
type: "bi.vertical_adapt", |
||||
height: 30, |
||||
scrollable: false, |
||||
items: [ |
||||
{ |
||||
type: "bi.single_select_radio_item", |
||||
ref: function (_ref) { |
||||
radios[0] = _ref; |
||||
}, |
||||
text: "选项1", |
||||
handler: () => { |
||||
radios[1].setSelected(!radios[0].isSelected()); |
||||
}, |
||||
}, { |
||||
type: "bi.single_select_radio_item", |
||||
ref: function (_ref) { |
||||
radios[1] = _ref; |
||||
}, |
||||
text: "选项2", |
||||
handler: () => { |
||||
radios[0].setSelected(!radios[1].isSelected()); |
||||
}, |
||||
}, |
||||
], |
||||
}); |
||||
``` |
||||
|
||||
![示例](../images/14.gif) |
||||
|
||||
FineUI中提供了ButtonGroup控件,名字叫逻辑列表.他内部封装了选中逻辑控制,简单几行代码,就可以实现一个选项切换 |
||||
|
||||
```demo |
||||
const widget = BI.createWidget({ |
||||
type: "bi.button_group", |
||||
height: 30, |
||||
layouts: { |
||||
type: "bi.vertical_adapt", |
||||
}, |
||||
items: [ |
||||
{ |
||||
type: "bi.single_select_radio_item", |
||||
text: "选项1", |
||||
value: 1, |
||||
}, { |
||||
type: "bi.single_select_radio_item", |
||||
text: "选项2", |
||||
value: 2, |
||||
}, |
||||
], |
||||
}); |
||||
``` |
||||
|
||||
![示例](../images/15.gif) |
||||
|
||||
ButtonGroup组件的默认chooseType属性为单选,也可以实现多选 |
||||
|
||||
```demo |
||||
const widget = BI.createWidget({ |
||||
type: "bi.button_group", |
||||
height: 30, |
||||
layouts: { |
||||
type: "bi.vertical_adapt", |
||||
}, |
||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, |
||||
items: [ |
||||
{ |
||||
type: "bi.multi_select_item", |
||||
text: "选项1", |
||||
value: 1, |
||||
}, { |
||||
type: "bi.multi_select_item", |
||||
text: "选项2", |
||||
value: 2, |
||||
}, { |
||||
type: "bi.multi_select_item", |
||||
text: "选项3", |
||||
value: 3, |
||||
}, { |
||||
type: "bi.multi_select_item", |
||||
text: "选项4", |
||||
value: 4, |
||||
}, |
||||
], |
||||
}); |
||||
``` |
||||
|
||||
![示例](../images/16.gif) |
Loading…
Reference in new issue