[英]How do I divide the Office UI Fabric ChoiceGroup into 2 rows and 5 columns?
I am new to UI, and currently working on making on creating options using Fluent UI ChoiceGroup.我是 UI 新手,目前致力于使用 Fluent UI ChoiceGroup 创建选项。 I have 10 entries, let's say 0,1,2,3,4,5,6,7,8,9.
我有 10 个条目,比方说 0、1、2、3、4、5、6、7、8、9。 I am trying to force UI to always show like
我试图强制 UI 始终显示为
0 1 2 3 4 0 1 2 3 4
5 6 7 8 9 5 6 7 8 9
but it changes according to width.但它根据宽度而变化。
There is no property that I can attach in the choiceGroup as well. choiceGroup 中也没有我可以附加的属性。 It looks like some CSS stuff.
它看起来像一些 CSS 的东西。
Please guide me with this.请指导我。 Thank you.
谢谢你。
I don't see better way to achieve that scenario then to put fixed width
of ChoiceGroup
root element:我没有看到比放置固定
width
的ChoiceGroup
根元素更好的方法来实现该场景:
<ChoiceGroup styles={{ root: { width: 500 } }} label="Pick one icon" defaultSelectedKey="day" options={options} />
Items inside ChoiceGroup
are wrapped with flexContainer
which includes: ChoiceGroup
中的项目用flexContainer
包装,其中包括:
display: flex;
flex-wrap: wrap;
You can modify it if you need:如果需要,您可以修改它:
<ChoiceGroup styles={{ flexContainer: { flexWrap: 'nowrap' } }} defaultSelectedKey="day" options={options} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.