@bedrock-layout/switcher v2.1.0

DEPRECATION WARNING

This package is deprecated and will no longer be maintained. All the functionality has been added to the Split and Columns components, respectively. It is recommended that you use those components going forward.

@bedrock-layout/switcher

The switchers are layout primitive that start as either a Split or Columns primitive but will switch to a Stack when the container size is below the switchAt value.

Full docs at: bedrock-layout.dev

When to Use

It is used to create a split or a column layout that will stack at a certain container width.

How to install

npm install @bedrock-layout/switcher

Usage

import { SplitSwitcher, ColumnsSwitcher } from '@bedrock-layout/switcher';

<SplitSwitcher gutter='lg' fraction='2/3'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</SplitSwitcher>

<ColumnsSwitcher gutter='lg' columns={4}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</ColumnsSwitcher>

data-attribute

For purposes of styling, you can select data-bedrock-layout-columns-switcher and data-bedrock-layout-split-switcher.

API

SplitSwitcher

* required

ColumnsSwitcher

* required

** By default, spacings are one of the spacing-constants, but can be overridden using the ThemeProvider from styled-components