@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

or

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