Wrapper

This page demonstrates how to use the is--wrapper class through components.

is--wrapper can be applied via the isWrapper property on any component.

Property	Output
`isWrapper`	`.is--wrapper`
`isWrapper='s'`	`.is--wrapper`, `.-contentSize:s`
`isWrapper='l'`	`.is--wrapper`, `.-contentSize:l`
`isWrapper={value}`	`.is--wrapper`, `--contentSize:{value}`

A dedicated <Wrapper> component is also available as an alias for <Lism isWrapper>.

This section introduces that dedicated component.

Props

The following props are available on <Wrapper>.

Property	Description
`contentSize`	Specifies the content size.
`layout`	Specifies the Layout module to expand into.
`isContainer`	Sets the container type.

↓

The examples ① and ② below produce the same result.

// ①
<Flow isWrapper='s' isContainer>...</Flow>

// ②
<Wrapper contentSize='s' layout='flow' isContainer>...</Wrapper>

import { Wrapper } from 'lism-css/react';

↓

Example

Content

…

リサイズ可能

<Wrapper layout='flow' p='20'>
  <p>Content</p>
  <p>Content</p>
  <p>...</p>
</Wrapper>

↓

With contentSize='s'

Content

…

リサイズ可能

<Wrapper contentSize='s' layout='flow' p='20'>
  <p>Content</p>
  <p>Content</p>
  <p>...</p>
</Wrapper>

To use a value other than s or l, pass any value to isWrapper and it will be output as the --contentSize CSS variable.

↓

Setting a custom value on is—wrapper

Contents…

リサイズ可能

<Lism isWrapper='20rem' p='20'>
  <div>Contents...</div>
  <div>Contents...</div>
</Lism>

A demo page is available where you can explore the behavior of is--wrapper. We recommend viewing it on a wide screen.