@bedrock-layout/inline NPM

`@bedrock-layout/inline`

Inline is a layout helper that creates consistent spacing around inline items. It can also have a child element that can stretch to fill any excess spaces

Full docs at: bedrock-layout.dev

When to Use

Inline can be used to create inline layouts where there is a consistent space around its child elements. Unlike the InlineCluster component, the child elements inside Inline components will not wrap. With Inline component, you can also specify a child element that can stretch to fill excess spaces.

How to install

npm install @bedrock-layout/inline

yarn add @bedrock-layout/inline

Usage

import { Inline } from '@bedrock-layout/inline';

<Inline stretch={1} gutter='size3' justify='start' align='start'>
  <span>Lorem ipsum dolor</span>
  <span>sit amet consectetur</span>
  <span>adipisicing elit.</span>
</Inline>;

data-attribute

For styliing purposes, you can select data-bedrock-inline.

API

* required

Property	Description	Type	Default
gutter*	Space inbetween each child element	One of `Spacing`**	-
stretch	Child or children that will stretch to fill available space	One of: `all, start, end, index of the child`	-
justify	Inline justification of the children	One of: `start, end, center`	`start`
align	Block alignment of the children	One of: `start, end, center`	`start`
switchAt	The width threshold at which the container will switch to stack layout	One of: `CSS length, number`	-

** By default, Spacing is one of the spacing-constants values, but this can be overwritten using the ThemeProvider from @bedrock-layout/spacing-constants