如何将Office UI Fabric ChoiceGroup分为2行和5列？

Question

我是UI的新手，目前正在努力使用Fluent UI ChoiceGroup创建选项。我有10个条目，假设0,1,2,3,4,5,6,7,8,9。我试图强迫UI总是显示出

0 1 2 3 4

5 6 7 8 9，

但它会根据宽度而变化。

我也没有可以在ChoiceGroup中附加的属性。看起来像一些CSS的东西。

请指导我。谢谢。

Answer 1

我看不到更好的方法来实现该方案，然后将固定的width choces> choceygroup root元素：

<ChoiceGroup styles={{ root: { width: 500 } }} label="Pick one icon" defaultSelectedKey="day" options={options} />

choce> choceygroup内部的项目用flexcontainer 包括：

display: flex;
flex-wrap: wrap;

如果需要：

<ChoiceGroup styles={{ flexContainer: { flexWrap: 'nowrap' } }} defaultSelectedKey="day" options={options} />

工作示例。