Container

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

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

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

// ①
<Flow isContainer='m'>...</Lism>

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

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

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

<Container size='m' layout='flow' p='40'>
  <p>Content</p>
  <p>Content</p>
  <p>...</p>
</Container>

<div class='l--flow is--container -container:m -p:40'>
  <p>Content</p>
  <p>Content</p>
  <p>...</p>
</div>

s, m, l 以外の値をセットしたい場合は、--contentSz変数を指定します。

<Lism isContainer='20rem'>
  <div>Contents...</div>
  <div>Contents...</div>
</Lism>

<div class="is--container" style="--contentSz:20rem">
  <div>Contents...</div>
  <div>Contents...</div>
</div>

Lismには、コンテンツサイズ用のトークンとして--sz--{sz}が用意されています、（{sz}: xs s m, l, xl）

-container:{s|m|l} クラスを呼び出すと、それぞれ--sz--s, --sz--m, --sz--l が利用されますが、-max-szクラスに対しても、それぞれユーティリティクラスが用意されています。

-max-sz:{xs~xl}はそのまま--sz--{xs~xl}がセットされるクラスです。

その他、特徴的なクラスがありますのでそれらを紹介しておきます。

これらの-max-szクラスの挙動についても、別ページで確認できますのでぜひご覧ください。