css 如何强制Office UI Fabric ChoiceGroup水平对齐

pcww981p 于 9个月前发布在其他

关注(0)|答案(5)|浏览(113)

我正在尝试构建一个包含 ChoiceGroup 的 SPFx webpart。当我将css样式设置为ms-sm12时，选项是垂直对齐的：

Show assigned to:
o anyone
* me
o nobody

字符串
我喜欢它们水平排列在一行：

Show assigned to: o anyone * me o nobody

型
当我将样式设置为ms-sm6时，它将它们“混合”对齐：Slider 和 Toggle 设置为ms-sm3

Show assigned to: o anyone
* me
o nobody

型
x1c 0d1x的数据
ms-sm4看起来像：

的
使用ms-sm3，ms-sm2，ms-sm1，它看起来像（标题越来越被压扁，所有选项都在一列中：

的
如何强制/鼓励选项呈现水平状态？

css

来源：https://stackoverflow.com/questions/45447412/how-to-force-office-ui-fabric-choicegroup-to-align-horizontal

5条答案

按热度按时间

8wigbo561#

请按照以下步骤操作：
1)新建.scss文件
例如：fabric.scss并将该类粘贴到其中。

.inlineflex .ms-ChoiceField{
      display: inline-block;
   }

字符串
2)在您的组件中，给予以下内容：

import  './fabric.scss';

型
3)添加组件并应用类。

<ChoiceGroup 
                className="inlineflex"
                label='Pick one icon'
                options={ [
                {
                    key: 'day',                        
                    text: 'Day'
                },
                {
                    key: 'week',                        
                    text: 'Week'
                },
                {
                    key: 'month',                        
                    text: 'Month'                       
                }
                ] }
             />

型

赞(0）回复(0）举报 9个月前

pbwdgjma2#

另一个不需要添加CSS的选项是将样式直接应用于控件：
1.将flexContainer样式设置为display：flex。
1.您会注意到选项的末尾可能需要一个空格，我添加了一个不间断的空格作为\u00A0

<ChoiceGroup selectedKey={valueType}
styles={{ flexContainer: { display: "flex" } }} options={[
{ key: 'specific', text: 'selected\u00A0\u00A0' },
{ key: 'relative', text: 'relative' }]} />

字符串
搞定！

赞(0）回复(0）举报 9个月前

gpnt7bae3#

1.将样式属性添加到ChoiceGroup styles={{ flexContainer：{ display：“flex”}
1.将样式属性添加到选项样式：{ choiceFieldWrapper：{ display：'inline-block'，margin：'0 0 0 10 px' }}
搞定！

赞(0）回复(0）举报 9个月前

dxxyhpgq4#

const options: IChoiceGroupOption[] = [
      { key: 'conforme', text: 'Conforme'},
      { key: 'noConforme', text: 'No conforme', styles:{field: { marginLeft: "15px"}}}
    ];
<ChoiceGroup styles={{ flexContainer: { display: "flex" } }}  options={options}  />

字符串

赞(0）回复(0）举报 9个月前

tjrkku2a5#

添加flex显示器与10px的差距对我来说工作完美。

<ChoiceGroup 
    defaultSelectedKey="A" 
    options={[
        {key: "A", text: "A"},
        {key: "B", text: "B"},
        {key: "C", text: ""}
    ]} 
    styles={{ flexContainer: { display: "flex", gap: 10}}}
/>

字符串

赞(0）回复(0）举报 9个月前

我来回答

css 如何强制Office UI Fabric ChoiceGroup水平对齐

5条答案

相关问题

热门标签

最新问答