Detailed technical blog article on using Fluent UI’s Stack component within a SharePoint Framework (SPFx) Web Part. This example uses Fluent UI to create a responsive, full-screen layout with specific regional divisions.

Building Responsive SPFx Web Parts with Fluent UI’s Stack Component

SharePoint Framework (SPFx) development has evolved with support for modern libraries, including Fluent UI. Fluent UI, developed by Microsoft, provides a set of React components optimized for building SharePoint and Office applications, allowing for rapid UI creation while maintaining consistent Office styling. This article will cover the Stack component in Fluent UI, showcasing how to build a SPFx Web Part with complex layout requirements.

Why Fluent UI’s Stack?

The Stack component is highly flexible and is designed to simplify layout management. Instead of handling CSS manually, you can quickly configure Stack to control spacing, alignment, and responsiveness of your components. This is especially useful in SharePoint, where you often need to accommodate various layouts across different screen sizes and configurations.

Example: Building a Full-Screen SPFx Web Part Layout

The following example demonstrates how to use Fluent UI’s Stack component to create a full-screen layout in SPFx with the following structure:

1. First Row (25%): Split into two columns, each containing two sub-regions.
2. Second Row (50%): Split into two columns.
3. Third Row (25%): Divided into a grid layout with two rows and eight columns.

Here’s the complete code for this SPFx Web Part:

import * as React from 'react';
import { Stack, IStackStyles, IStackTokens } from '@fluentui/react';

const CustomLayoutWebPart: React.FC = () => {
  // Full-screen layout styles
  const fullScreenStackStyles: IStackStyles = {
    root: {
      width: '100%',
      height: '100vh', // Occupies the entire viewport height
      boxSizing: 'border-box',
    },
  };

  // Styles for each primary row
  const row25Styles: IStackStyles = {
    root: {
      width: '100%',
      height: '25%',  // First row takes up 25% height
      display: 'flex',
    },
  };

  const row50Styles: IStackStyles = {
    root: {
      width: '100%',
      height: '50%', // Second row takes up 50% height
      display: 'flex',
    },
  };

  const row25GridStyles: IStackStyles = {
    root: {
      width: '100%',
      height: '25%',  // Third row takes up 25% height
      display: 'grid',
      gridTemplateColumns: 'repeat(8, 1fr)', // 8 columns
      gridTemplateRows: '1fr 1fr',           // 2 rows
      gap: '2px',                            // Spacing between items
    },
  };

  // Styles for individual cells
  const cellStyles: IStackStyles = {
    root: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      border: '1px solid #ddd', // Border for visibility
      boxSizing: 'border-box',
      height: '100%',
      width: '100%',
    },
  };

  // Tokens for spacing within each Stack
  const stackTokens: IStackTokens = {
    childrenGap: 2, // Space between Stack items
  };

  return (
    <Stack styles={fullScreenStackStyles}>
      {/* First row: 25% height with 2 main columns, each split into 2 sub-regions */}
      <Stack horizontal styles={row25Styles} tokens={stackTokens}>
        {/* Region 1.1 with 2 sub-regions */}
        <Stack horizontal tokens={stackTokens} styles={cellStyles}>
          <Stack styles={cellStyles}><p>Region 1.1.1</p></Stack>
          <Stack styles={cellStyles}><p>Region 1.1.2</p></Stack>
        </Stack>
        {/* Region 1.2 with 2 sub-regions */}
        <Stack horizontal tokens={stackTokens} styles={cellStyles}>
          <Stack styles={cellStyles}><p>Region 1.2.1</p></Stack>
          <Stack styles={cellStyles}><p>Region 1.2.2</p></Stack>
        </Stack>
      </Stack>

      {/* Second row: 50% height with 2 columns */}
      <Stack horizontal styles={row50Styles} tokens={stackTokens}>
        <Stack styles={cellStyles}><p>Region 2.1</p></Stack>
        <Stack styles={cellStyles}><p>Region 2.2</p></Stack>
      </Stack>

      {/* Third row: 25% height with 2 rows and 8 columns */}
      <Stack styles={row25GridStyles} tokens={stackTokens}>
        {[...Array(16)].map((_, index) => (
          <Stack key={index} styles={cellStyles}>
            <p>Region 3.{index + 1}</p>
          </Stack>
        ))}
      </Stack>
    </Stack>
  );
};

export default CustomLayoutWebPart;

Code Explanation

1. Full-Screen Layout (fullScreenStackStyles): The outermost Stack takes the full viewport height using height: '100vh'.
2. Row Layouts (row25Styles and row50Styles): We define individual rows using percentage heights:

• The first row (row25Styles) is 25% of the height, split into two columns, each subdivided further.
• The second row (row50Styles) is 50% of the height, divided into two equal columns.

1. Grid Layout (row25GridStyles): The third row, taking 25% height, is structured as a grid with two rows and eight columns using gridTemplateColumns and gridTemplateRows.
2. Spacing with IStackTokens: We use IStackTokens to set the childrenGap property for consistent spacing.

Customizing Stack Properties

• Direction: The Stack component can arrange items in a row (horizontal) or a column. In this example, horizontal stacks are used for rows and columns.
• Alignment: Properties like alignItems and justifyContent can be set for alignment within each stack.
• Gap Control: By using IStackTokens, you can adjust the childrenGap between elements to ensure a balanced layout.

Cost and Licensing

Fluent UI is open-source, making it free to use within SPFx development projects. Its seamless integration with SharePoint provides a robust solution for developers without additional licensing requirements.

Conclusion

Using Fluent UI’s Stack component with SPFx provides a powerful, efficient way to create responsive layouts with minimal CSS. By leveraging Fluent UI, SPFx developers can create complex and professional layouts that adhere to Microsoft’s design guidelines. This approach reduces the need for extensive custom styling and promotes code reuse, enhancing development speed and maintainability.

For additional information on Fluent UI and SPFx, refer to the official documentation here.