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.

Split

The Split component is designed to create a split layout based on a fractional ratio. The Split component will enforce a standard spacing scheme through the gutter prop and will optionally switch to a stack layout when the provided threshold is reached.

Examples

Some examples of where you might use a component:

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/split.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/split
## 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 { Split } from '@bedrock-layout/split'
  // or
import { Split } from '@bedrock-layout/primitives'

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

API

NameDescriptionDefaultControl
gap
string
-
as
unknown
"div"
-
style
unknown
{}
gutter
-
-

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-split='gap:size3'>
 <Component />
 <Component />
</div>

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

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

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

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

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

Fraction

The fraction prop defines the fractional ratio of host the children will be split in the container.

Usage examples

// CSS
<div data-br-split="fraction:1/4">
 <Component />
 <Component />
</div>

// React.js and Solid.js
<Split fraction="1/4">
 <Component />
 <Component />
</Split>

You can use the following values:

1/4
1/3
1/2
2/3
3/4
auto-start
auto-end

Min Item Width

The minItemWidth prop defines the minimum inline size of each child.

If the minimum inline size can not be maintained, it will move to a stacking layout.

Usage examples

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

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

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

(Resize window to observe the changes)

With fraction of 2/3 and minItemWidth of 40ch
With auto-start and minItemWidth of 30ch

Switch At

If you set the switchAt property, the inline will switch to a stacking layout if the width of the element is below the threshold set by the switchAt property.

This can be used with minItemWidth and it will switch to a stacking layout at which ever size is largest.

The below example will switch to a stack when it is less than 45rem.

Usage examples

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

// use the `--switch-at` custom property
// It is recommended that you do this either with inline styles or selecting the bedrock data attribute.
<div data-br-split style="--switch-at: 45rem">
 <Component />
 <Component />
</div>

// React.js and Solid.js
<Split switchAt="45rem">
 <Component />
 <Component />
</Split>

(Resize your window to see this in action.)

With fraction: 2/3
With auto-start with 20rem minItemWidth

More Than Two Children

The Split is designed to be used with a two children, but it can be used with more. If you use more than two children, the Split will stack all the children underneath the first two children.