Container (is--container)

container-typeをセットできるis--container クラスをコンポーネントから利用する例を紹介していきます。

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

プロパティ	出力
`isContainer`	`.is--container`

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

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

Props

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

プロパティ	説明
`layout`	展開したい Layoutモジュールを指定できます。

↓

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

// ①
<Flow isContainer>...</Lism>

// ②
<Container layout='flow'>...</Container>

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

isContainerをLismコンポーネントにセットするか、または<Container>コンポーネントを使用してis--containerが付与され要素の内部では、コンテナクエリが有効になります。

↓

例

このBOXは、paddingが切り替わります。

リサイズ可能

<Container isWrapper='s' p='20'>
  <Box bd p={['10','30']}>このBOXは、paddingが切り替わります。</Box>
</Container>