No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Inline

The Inline component is designed to create consistent spacing between elements of variable width in the inline direction. Unlike the InlineCluster component, the items in the Inline component will not wrap.

The Inline component also allows you to specify one of the children to stretch to fill the excess space. This is done using the stretch prop. The stretch prop can be set to all for all children to stretch, or a number to stretch a specific child. The stretch prop can also be set to start or end to stretch the first or last child respectively.

Installation and Import

First, you must install @bedrock-layout/css.

yarn add @bedrock-layout/css

Then, you can import the entire CSS or just the component's CSS in your project:

import "@bedrock-layout/css/lib/bedrock-layout.min.css";
// or
import "@bedrock-layout/css/lib/components/inline.min.css";

Optionally, you can install the package for your framework of choice (React.js, Solid.js) using your favorite package manager CLI:

## For React.js
yarn add @bedrock-layout/inline
  ## or
yarn add @bedrock-layout/primitives

## For Solid.js
yarn add @bedrock-layout/solid

Then import the component in your project:

// For React.js
import { Inline } from '@bedrock-layout/inline'
  // or
import { Inline } from '@bedrock-layout/primitives'

// For Solid.js
import { Inline } from '@bedrock-layout/solid'

API

NameDescriptionDefaultControl
gap
string
-
as
unknown
"div"
style
unknown
{}
gutter
-
-
justify
-
-
align
-
-
stretch
-
-
switchAt
Sets the width threshold that the split will switch to a Stack layout
-
-
minItemWidth
-
-

Gap

The gap prop defines the gap size between elements. Ultimately, the space is controlled by setting the --gap CSS variable.

Default values

Bedrock has implemented a default spacing scheme, but it can be overridden using the ThemeProvider provided by @bedrock-layout/spacing-constants. You can also use any valid CSSLength or positive integer.

Usage examples

// CSS
// Using the predefined spacing constants
<div data-br-inline='gap:size3'>
 <Component />
 <Component />
</div>

// Or you can use a custom value directly
<div data-br-inline style={{ "--gap": "3ch" }}>
 <Component />
 <Component />
</div>

// React.js and Solid.js
<Inline gap="size3">
 <Component />
 <Component />
</Inline>

// Or you can use a css value directly
<Inline gap="3ch">
 <Component />
 <Component />
</Inline>

// or you can use a custom property
<Inline gap="--custom-size-4">
 <Component />
 <Component />
</Inline>

Here are the possible values for gap by default:

Custom gap as number (20)
Custom gap as string ("3ch")
size000
size00
size1
size2
size3
size4
size5
size6
size7
size8
size9
size10
size11
size12
size13
size14
size15

Justify

The justify prop defines the inline justification of the elements within the cluster. It accepts the following values: start, end, center, space-around, space-between.

Usage examples

// CSS
<div data-br-inline='justify:end'>
 <Component />
 <Component />
</div>

// React.js and Solid.js
<Inline justify="end">
 <Component />
 <Component />
</Inline>
start
end
center
space-around
space-between

Align

The align prop defines the vertical alignment of the elements within the cluster. It accepts the following values: start, end, center, stretch.

Usage examples

// CSS
<div data-br-inline='align:end'>
 <Component />
 <Component />
</div>

// React.js and Solid.js
<Inline align="end">
 <Component />
 <Component />
</Inline>
start
end
center
stretch

Stretch

The stretch prop can be used to specify a child component that will stretch to fill the excess space.

Usage examples

// CSS
<div data-br-inline='stretch:end'>
 <Component />
 <Component />
</div>

// React.js and Solid.js
<Inline stretch="end">
 <Component />
 <Component />
</Inline>
start
end
all
2 index

Min Item Width

The minItemWidth prop defines the width basis of each of the children.

Some times you want all the items to have a minimum width. By setting the minItemWidth prop, you will set the minimum width of each of the children.

This is especially useful with the switchAt prop (see below).

Usage examples

// CSS
// Using the predefined size constants
<div data-br-inline="minItemWidth:sizeXs">
 <Component />
 <Component />
</div>

// Use the `--min-item-width` custom property
<div data-br-inline style="--min-item-width: 30ch">
  <Component />
  <Component />
</div>

// React.js and Solid.js
<Inline minItemWidth="30ch">
  <Component />
  <Component />
</Inline>

In the below example, each of the Components has an intrinsic width of 50px. The minItemWidth will make them 150px each.

(Resize window to observe the changes)

Switch At

The switchAt prop defines the width at which the layout will switch to stack.

Usage examples

// CSS
// Using the predefined size constants
<div data-br-inline="switchAt:sizeContent2">
  <Component />
  <Component />
</div>

// use the `--switch-at` custom property
<div data-br-inline style="--switch-at: 30ch">
  <Component />
  <Component />
</div>

// React.js and Solid.js
<Inline switchAt="30ch">
  <Component />
  <Component />
</Inline>

In the below example, the layout will switch to stack when its width becomes less than 45rem. (Resize your window to see this in action.)

(Resize window to observe the changes)