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

Posted 2023-03-27

【中文标题】如何强制 Office UI Fabric ChoiceGroup 水平对齐

【英文标题】：How to force Office UI Fabric ChoiceGroup to align horizontal

【发布时间】：2018-01-08 21:16:49

【问题描述】：

我正在尝试构建一个包含 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

ms-sm4 看起来像：

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

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

【参考方案1】：

按照下面给出的步骤：

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'                       
                
                ] 
             /> 

【讨论】：

感谢成功，我只需要在 .ms-ChoiceField 前加上 :global。我的 CSS 现在看起来像 .inlineflex :global .ms-ChoiceField display: inline-block;

我面临同样的问题，但这个解决方案对我不起作用。

@DennisKuhn 在他的评论中提供了我需要的答案。

【参考方案2】：

另一个不需要添加 CSS 的选项是将样式直接应用于控件：

将 flexContainer 样式设置为 display:flex。

您会注意到选项末尾可能需要一个空格，我添加了一个不间断空格作为 \u00A0

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

完成！

【讨论】：

我用这个，只有选择是内联的。标签位于顶部的一行上。如何强制标签在同一行。

重复上面的评论以强调。标签仍在另一行。

【参考方案3】：

向 ChoiceGroup 添加样式属性 styles= flexContainer: display: "flex" 将样式属性添加到选项样式中：choiceFieldWrapper: display: 'inline-block', margin: '0 0 0 10px'

完成！

【参考方案4】：

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

【讨论】：

请考虑写一些关于您的代码的句子，以便其他人可以从中学习。只有代码答案被视为低质量。

虽然此代码 sn-p 可能是解决方案，但 including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。