Skip to content

Latest commit

 

History

History

Layout

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Layout

Helper component that allows for easily accessing a set of helper CSS classes. Useful for adjusting smaller parts of a UI without adding additional CSS.

Basic Usage

JSX

Apply any of the available class names to the className prop. Any additional custom class names will be combined with any matching helper classes. You can modify the root element by passing a string or a component to the "element"-prop.

  import { Layout } from '@folio/stripes/components';

  <Layout className="display-flex flex-align-items-start">
    <Layout element="span" className="padding-start-gutter">
      1st column
    </Layout>
    <Layout element="span" className=`padding-end-gutter ${css.myCustomClass}`>
      2nd column
    </Layout>
  </Layout>

CSS

It's also possible to use helper classes in your CSS files by utilizing PostCSS's composes feature.

  .myCustomClass {
    composes: display-flex flex-align-items-center from "@folio/stripes-components/lib/Layout/Layout.css";
  }

This will automatically apply the additional helper classes into your compiled HTML without adding additional CSS to the bundle.

Note: You can only use the composes feature on a single non-nested CSS selector. Read more about composition here.

Props

Any valid React props can be applied to this component. Below are the props that vary from any default props.

Name Type Description Default
className string Applies any of the available matching helper classes as well as your own custom class names undefined
element string, element Change the default root element of the rendered markup div