Stack : React

Stack serves as a container that serves to create consistent spacing between elements or layouts.

OverviewReactSwiftKotlin

Installation

Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.

With that done, you’re now ready to implement the component in your application.

import { Stack, StackItem } from '@mediahuis/chameleon-react';

export default function Example() {
  return (
    <Stack>
      <StackItem>Item 1</StackItem>
      <StackItem>Item 2</StackItem>
    </Stack>
  );
}

Properties

Property	Type	Default	Required	Description
alignContent	String | ResponsiveStrings	-	No	Aligns the content within the container. Accepts CSS-defined values or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
alignItems	String | ResponsiveStrings	-	No	Aligns the items within the container. Accepts CSS-defined values or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)
alignSelf	String | ResponsiveStrings	-	No	Determines the alignment of the current item in its container. Accepts CSS-defined values or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)
bordered	Boolean	-	No	A Boolean to determine if the Stack should have a divider between each item.
children	ReactNode	-	Yes	The children to be rendered within the Stack.
flex	String | ResponsiveStrings	-	No	Dictates the layout of the children. Accepts CSS-defined values or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
flexBasis	String | ResponsiveStrings	-	No	Specifies the initial size of a flex item. Accepts CSS-defined values, string values, or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis)
flexDirection	String | ResponsiveStrings	'column'	No	Specifies the direction of the flex items. Accepts CSS-defined values or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)
flexFlow	String | ResponsiveStrings	-	No	Shorthand for setting `flexDirection` and `flexWrap`. Accepts CSS-defined values, string values, or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow)
flexGrow	String | ResponsiveStrings	'1'	No	Dictates the flex item's ability to grow if necessary. Accepts CSS-defined values, string values, or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow)
flexShrink	String | ResponsiveStrings	-	No	Defines the flex item's ability to shrink if necessary. Accepts CSS-defined values, string values, or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)
flexWrap	String | ResponsiveStrings	-	No	Specifies whether flex items are forced onto a single line or can wrap onto multiple lines. Accepts CSS-defined values or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)
gap	Number	-	No	Sets the gap (gutter) between each item in the stack. Accepts scaling tokens as integers.
justifyContent	String | ResponsiveStrings	-	No	Dictates the alignment of items along the main axis. Accepts CSS-defined values or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
justifySelf	String | ResponsiveStrings	-	No	Determines the alignment of the current item in its container along the main axis. Accepts CSS-defined values or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self)

StackItem Properties

Property	Type	Default	Required	Description
alignContent	String | ResponsiveStrings	-	No	Align content: Specifies the alignment of the content within the container. Accepts CSS-defined values or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
alignItems	String | ResponsiveStrings	-	No	Align items: Specifies the alignment of the items within the container. Accepts CSS-defined values or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)
alignSelf	String | ResponsiveStrings	-	No	Align self: Determines the alignment of the current item in its container. Accepts CSS-defined values or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)
bordered	Boolean	-	No	Whether the StackItem should have a divider, this can override the parent Stack component.
gap	String | ResponsiveStrings	-	No	Sets the gap (gutter) between each item in the stack. Accepts scaling tokens as integers.
flex	String | ResponsiveStrings	-	No	Dictates the layout of the children. Accepts CSS-defined values or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
flexBasis	String | ResponsiveStrings	-	No	Flex basis: Specifies the initial size of a flex item. Accepts CSS-defined values, string values, or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis)
as	ElementType	-	No	Render with a different HTML tag or a different custom component.
children	ReactNode	-	Yes	Children displayed within the Stack, it being HTML or being the StackItem.
className	String	-	No	Extend classNames.
flexDirection	String | ResponsiveStrings	-	No	Flex direction: Specifies the direction of the flex items. Accepts CSS-defined values or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)
flexFlow	String | ResponsiveStrings	-	No	Flex flow: Shorthand for setting `flexDirection` and `flexWrap`. Accepts CSS-defined values, string values, or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow)
flexGrow	String | ResponsiveStrings	-	No	Flex grow: Dictates the flex item's ability to grow if necessary. Accepts CSS-defined values, string values, or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow)
flexShrink	String | ResponsiveStrings	-	No	Flex shrink: Defines the flex item's ability to shrink if necessary. Accepts CSS-defined values, string values, or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)
flexWrap	String | ResponsiveStrings	-	No	Flex wrap: Specifies whether flex items are forced onto a single line or can wrap onto multiple lines. Accepts CSS-defined values or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)
justifyContent	String | ResponsiveStrings	-	No	Dictates the alignment of items along the main axis. Accepts CSS-defined values or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
justifySelf	String | ResponsiveStrings	-	No	Determines the alignment of the current item in its container along the main axis. Accepts CSS-defined values or a responsive object (xs, sm, md, lg, xl). More info: [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self)

• Installation
• Properties
• StackItem Properties