Wrapper

is--wrapper クラスをコンポーネントで利用する例を紹介していきます。

is--wrapper は基本的に isWrapperプロパティでどのコンポーネントからでも呼び出せるようになっています。

プロパティ	出力
`isWrapper`	`.is--wrapper`
`isWrapper='s'`	`.is--wrapper`, `.-content:s`
`isWrapper='l'`	`.is--wrapper`, `.-content:l`
`isWrapper={value}`	`.is--wrapper`, `--contentSize:{value}`

<Lism isWrapper> のエイリアスとして、<Wrapper> も用意しています。

ここでは、この専用コンポーネントを紹介していきます。

Props

<Wrapper> で使用できるプロパティは次のとおりです。

↓

下記の ①, ② はそれぞれ同じ結果になります。

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

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

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

↓

例

Content

…

リサイズ可能

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

↓

contentSize='s'を指定

Content

…

リサイズ可能

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

s, l 以外の値をセットしたい場合は、isWrapper に任意の値をセットすると--contentSize変数としてしゅつ力されます。

↓

is—wrapper に任意の値をセットする

Contents…

リサイズ可能

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

is--wrapper関連の挙動を確認できるデモページを用意しています。
ぜひ広い画面でご確認ください。