About UI Kit 2
UI Kit 2 components
UI kit components
Product bridge APIs
Jira bridge APIs

This section describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.

We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.

Stack

To add the Stack component to your app:

1
2
import { Stack } from '@forge/react';

Description

Stack is a primitive component based on the React Native Flexbox layout model. This component provides the ability to lay out its direct children vertically.

Props

NameTypeRequiredDescription
alignBlockstringNoAligns children vertically. Valid values are:
  • start
  • center
  • end

Defaults to start.
alignInlinestringNoAligns children horizontally. Valid values are:
  • start
  • center
  • end

Defaults to undefined which equates to stretch.
growstringNoSets whether the container should grow to fill the available space. Valid values are:
  • hug to use space only as required by its children
  • fillto take all space provided by the parent element.

Defaults to hug.
spacestringNoRepresents the space between each child. Valid values are Space tokens:
  • space.0
  • space.025
  • space.050
  • space.075
  • space.100
  • space.150
  • space.200
  • space.250
  • space.300
  • space.400
  • space.500
  • space.600
  • space.800
  • space.1000
  • spreadstringNoDistributes its children along the vertical axis. Overrides the alignBlock property. Valid value is:
  • space-between
  • Examples

    Alignment

    To control the alignment of items you can use the alignBlock and alignInline props which control alignment in the vertical and horizontal axis respectively.

    Align block

    Use to align children vertically.

    Rendered tags using the alignBlock property with a stack component. The tags are displayed vertically, with equal spacing between them.

    1
    2
    import { Inline, Stack, Text, Image, Tag } from '@forge/react'
    
    export const StackAlignBlock = () => {
     return (
       <Inline space="space.600">
         <Stack space="space.200">
           <Text>Start (default)</Text>
           <Inline grow="fill" space="space.100">
             <Image src="https://examplecat.png" size="small" />
             <Stack alignBlock="start" alignInline="start" space="space.100">
               <Tag>1,000 views</Tag>
               <Tag color="green-light">5 votes</Tag>
             </Stack>
           </Inline>
         </Stack>
         <Stack space="space.200">
           <Text>Center</Text>
           <Inline grow="fill" space="space.100">
             <Image src="https://examplecat.png" size="small" />
             <Stack alignBlock="center" alignInline="start" space="space.100">
               <Tag>1,000 views</Tag>
               <Tag color="green-light">5 votes</Tag>
             </Stack>
           </Inline>
         </Stack>
         <Stack space="space.200">
           <Text>End</Text>
           <Inline grow="fill" space="space.100">
             <Image src="https://examplecat.png" size="small" />
             <Stack alignBlock="end" alignInline="start" space="space.100">
               <Tag>1,000 views</Tag>
               <Tag color="green-light">5 votes</Tag>
             </Stack>
           </Inline>
         </Stack>
       </Inline>
     );
    };
    

    Align inline

    Use to align children horizontally.

    Rendered tags using the alignInline property with an inline component. The tags are displayed horizontally, with equal spacing between them.

    1
    2
    import { Stack, Text, Inline, Tag, Image } from '@forge/react';
    
    export const StackAlignInline = () => {
      return (
        <Inline space="space.600">
          <Stack space="space.100" alignInline="start">
            <Text>Start (default)</Text>
            <Image src="https://examplecat.png" size="small" />
            <Tag>1,000 views</Tag>
            <Tag color="green-light">5 votes</Tag>
          </Stack>
          <Stack space="space.100" alignInline="center">
            <Text>Center</Text>
            <Image src="https://examplecat.png" size="small" />
            <Tag>1,000 views</Tag>
            <Tag color="green-light">5 votes</Tag>
          </Stack>
          <Stack space="space.100" alignInline="end">
            <Text>End</Text>
            <Image src="https://examplecat.png" size="small" />
            <Tag>1,000 views</Tag>
            <Tag color="green-light">5 votes</Tag>
          </Stack>
        </Inline>
      );
    };
    

    Grow

    Use to set whether the container should grow to fill the available space.

    Rendered tag components with adjustable growth behavior using the grow property

    1
    2
    import { Inline, Stack, Text, Tag }
    
    export const StackGrow = () => {
      return (
        <Inline grow="fill" space="space.500">
          <Stack space="space.200">
            <Text>Hug</Text>
            <Stack grow="hug" space="space.050">
              <Tag color="blue-light">1</Tag>
              <Tag color="purple-light">2</Tag>
              <Tag color="red-light">3</Tag>
            </Stack>
          </Stack>
          <Stack space="space.200">
            <Text>Fill</Text>
            <Stack grow="fill" alignInline="start" space="space.050">
              <Tag color="blue-light">1</Tag>
              <Tag color="purple-light">2</Tag>
              <Tag color="red-light">3</Tag>
            </Stack>
          </Stack>
        </Inline>
      );
    }; 
    


    Space

    Use to add a gap in between each child.

    Rendered tags with adjustable spacing with space tokens set to space.400 and space.200 in this example

    1
    2
    import { Stack, Inline, Tag } from '@forge/react';
    
    export const StackSpace = () => {
      return (
        <Inline space="space.400">
          <Stack space="space.100" alignInline="start">
            <Tag color="blue-light">1</Tag>
            <Tag color="purple-light">2</Tag>
            <Tag color="red-light">3</Tag>
          </Stack>
          <Stack space="space.200" alignInline="start">
            <Tag color="blue-light">1</Tag>
            <Tag color="purple-light">2</Tag>
            <Tag color="red-light">3</Tag>
          </Stack>
        </Inline>
      );
    };
    

    Spread

    Use to distribute its children along the vertical axis.

    Rendered tag components distributed horizontally using the spread property.

    1
    2
    import { Inline, Stack, Text, Tag, Image } from '@forge/react'
    
    export const StackAlignBlock = () => {
      return (
        <Inline space="space.600">
          <Stack space="space.200">
            <Text>With space-between</Text>
            <Inline grow="fill" space="space.100">
              <Image src="https://examplecat.png" size="medium" />
              <Stack
                alignBlock="start"
                alignInline="start"
                space="space.050"
                spread="space-between"
              >
                <Tag color="blue-light">1</Tag>
                <Tag color="purple-light">2</Tag>
                <Tag color="red-light">3</Tag>
              </Stack>
            </Inline>
          </Stack>
          <Stack space="space.200">
            <Text>Without space-between</Text>
            <Inline grow="fill" space="space.100">
              <Image src="https://examplecat.png" size="medium" />
              <Stack alignBlock="center" alignInline="start" space="space.050">
                <Tag color="blue-light">1</Tag>
                <Tag color="purple-light">2</Tag>
                <Tag color="red-light">3</Tag>
              </Stack>
            </Inline>
          </Stack>
        </Inline>
      );
    };
    

    Rate this page: