如何在 SPFx 中使用 MS Fabric UI 制作响应块？

Question

我们正在使用 MS Fabric UI 以块的形式显示内容。 MS Fabric UI 使用 12 列布局，我们遵循的完全相同。但问题是当父 div 宽度发生变化时，块的位置没有被调整。下面是布局。要解决这个问题，我是否需要编写任何自定义 JS、CSS 或 Fabric UI 是否有任何实用程序类来实现这一点？

下面是一行有两列时的一个界面

下面是一列一列时的界面

Answer 1

有一次我遇到了类似的问题，我使用了一篇我发现的一篇文章中的提示。 SharePoint 现代页面中的部分基于 CanvasSection 类：CanvasSection-xl12、CanvasSection-xl6、CanvasSection-xl4、CanvasSection-xl8。

所以我们可以使用这种样式添加一个自定义的 .scss 文件（重要的是它不会是一个 .module.scss，因此类名不会被唯一的散列改变）：

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

.CanvasSection.CanvasSection-col {
    &.CanvasSection-xl12 {
        .OneColumnSection-1 {
            @include ms-Grid-col;
            @include ms-xl1;
        }

        .OneColumnSection-2 {
            @include ms-Grid-col;
            @include ms-xl2;
        }

        .OneColumnSection-3 {
            @include ms-Grid-col;
            @include ms-xl3;
        }

        .OneColumnSection-4 {
            @include ms-Grid-col;
            @include ms-xl4;
        }

        .OneColumnSection-5 {
            @include ms-Grid-col;
            @include ms-xl5;
        }

        .OneColumnSection-6 {
            @include ms-Grid-col;
            @include ms-xl6;
        }

        .OneColumnSection-7 {
            @include ms-Grid-col;
            @include ms-xl7;
        }

        .OneColumnSection-8 {
            @include ms-Grid-col;
            @include ms-xl8;
        }

        .OneColumnSection-9 {
            @include ms-Grid-col;
            @include ms-xl9;
        }

        .OneColumnSection-10 {
            @include ms-Grid-col;
            @include ms-xl10;
        }

        .OneColumnSection-11 {
            @include ms-Grid-col;
            @include ms-xl11;
        }

        .OneColumnSection-12 {
            @include ms-Grid-col;
            @include ms-xl12;
        }
    }

    &.CanvasSection-xl6 {
        .TwoColumnsSection-1 {
            @include ms-Grid-col;
            @include ms-xl1;
        }

        .TwoColumnsSection-2 {
            @include ms-Grid-col;
            @include ms-xl2;
        }

        .TwoColumnsSection-3 {
            @include ms-Grid-col;
            @include ms-xl3;
        }

        .TwoColumnsSection-4 {
            @include ms-Grid-col;
            @include ms-xl4;
        }

        .TwoColumnsSection-5 {
            @include ms-Grid-col;
            @include ms-xl5;
        }

        .TwoColumnsSection-6 {
            @include ms-Grid-col;
            @include ms-xl6;
        }

        .TwoColumnsSection-7 {
            @include ms-Grid-col;
            @include ms-xl7;
        }

        .TwoColumnsSection-8 {
            @include ms-Grid-col;
            @include ms-xl8;
        }

        .TwoColumnsSection-9 {
            @include ms-Grid-col;
            @include ms-xl9;
        }

        .TwoColumnsSection-10 {
            @include ms-Grid-col;
            @include ms-xl10;
        }

        .TwoColumnsSection-11 {
            @include ms-Grid-col;
            @include ms-xl11;
        }

        .TwoColumnsSection-12 {
            @include ms-Grid-col;
            @include ms-xl12;
        }
    }

    &.CanvasSection-xl4 {
        .OneThird-1, .ThreeColumnsSection-1 {
            @include ms-Grid-col;
            @include ms-xl1;
        }

        .OneThird-2, .ThreeColumnsSection-2 {
            @include ms-Grid-col;
            @include ms-xl2;
        }

        .OneThird-3, .ThreeColumnsSection-3 {
            @include ms-Grid-col;
            @include ms-xl3;
        }

        .OneThird-4, .ThreeColumnsSection-4 {
            @include ms-Grid-col;
            @include ms-xl4;
        }

        .OneThird-5, .ThreeColumnsSection-5 {
            @include ms-Grid-col;
            @include ms-xl5;
        }

        .OneThird-6, .ThreeColumnsSection-6 {
            @include ms-Grid-col;
            @include ms-xl6;
        }

        .OneThird-7, .ThreeColumnsSection-7 {
            @include ms-Grid-col;
            @include ms-xl7;
        }

        .OneThird-8, .ThreeColumnsSection-8 {
            @include ms-Grid-col;
            @include ms-xl8;
        }

        .OneThird-9, .ThreeColumnsSection-9 {
            @include ms-Grid-col;
            @include ms-xl9;
        }

        .OneThird-10, .ThreeColumnsSection-10 {
            @include ms-Grid-col;
            @include ms-xl10;
        }

        .OneThird-11, .ThreeColumnsSection-11 {
            @include ms-Grid-col;
            @include ms-xl11;
        }

        .OneThird-12, .ThreeColumnsSection-12 {
            @include ms-Grid-col;
            @include ms-xl12;
        }
    }

    &.CanvasSection-xl8 {
        .TwoThirds-1 {
            @include ms-Grid-col;
            @include ms-xl1;
        }

        .TwoThirds-2 {
            @include ms-Grid-col;
            @include ms-xl2;
        }

        .TwoThirds-3 {
            @include ms-Grid-col;
            @include ms-xl3;
        }

        .TwoThirds-4 {
            @include ms-Grid-col;
            @include ms-xl4;
        }

        .TwoThirds-5 {
            @include ms-Grid-col;
            @include ms-xl5;
        }

        .TwoThirds-6 {
            @include ms-Grid-col;
            @include ms-xl6;
        }

        .TwoThirds-7 {
            @include ms-Grid-col;
            @include ms-xl7;
        }

        .TwoThirds-8 {
            @include ms-Grid-col;
            @include ms-xl8;
        }

        .TwoThirds-9 {
            @include ms-Grid-col;
            @include ms-xl9;
        }

        .TwoThirds-10 {
            @include ms-Grid-col;
            @include ms-xl10;
        }

        .TwoThirds-11 {
            @include ms-Grid-col;
            @include ms-xl11;
        }

        .TwoThirds-12 {
            @include ms-Grid-col;
            @include ms-xl12;
        }
    }
}

之后，您可以使用休闲类来指定当 web 部件在不同部分呈现时您希望拥有的 UI：OneColumnSection-x、TwoColumnsSection-x、ThreeColumnsSection-x、OneThird-x、TwoThirds-x

这里是我在我的解决方案中使用的文章的链接（仍然有效:)...但请注意，现代页面 UI（类名、标签..等）将来可能会发生变化，因此此解决方案/如果 MS 决定更改某些命名，解决方法可能会失败） https://ypcode.wordpress.com/2019/01/10/spfx-webparts-responsive-to-modern-page-sections/

Answer 2

spfx 应该支持来自 Fabric UI 的网格系统。

如果您只对块使用ms-sm3，则将列布局从一列更改为两列可能无法触发调整。

您可以为块添加一些额外的条件，例如ms-sm2 ms-md4 ms-lg3，这样小屏就可以连续6块；中屏连续3块，大屏连续4块。

Answer 3

我建议你在块上设置一个“min-width”以防止过度收缩。

或者你可以使用flex box布局：

• codepen.io/team/css-tricks/pen/EKEYob?editors=1100

BR