Wrapper (is--wrapper)

is--wrapper は、その直下のコンテンツ幅を一括制御できるクラスです。

CSS

.is--wrapper {
  // 子要素の制御
  --contentSize: var(--sz--m, 100%);
  > * {
    inline-size: 100%; // l--stack 等の縦並び配下で自然幅要素のガタつきを防ぐ
    max-inline-size: min(100%, var(--contentSize)); // min ないとimg要素等がはみ出す
    margin-inline: auto;
  }
}

// Memo: それぞれの直下要素( > * ) に対してスタイルをセットした方がネスト時の影響をなくせるが、wrapper のネストが多様されることは少ないので親側の変数管理のみで実装。
.-contentSize\:s {
  --contentSize: var(--sz--s);
}

.-contentSize\:l {
  --contentSize: var(--sz--l);
}

直下の子要素には inline-size: 100% が当たるため、自然幅が --contentSize 未満の要素（短い段落や <table> など）も常に親幅まで広がります。これにより l--stack などの縦並び配下でも横幅が揃い、ガタつきが起きません。

<table> を is--wrapper の直下に置くと内容依存の自然幅にはならず、常に wrapper 幅まで広がります。テーブルの自然幅を保ちたい場合は、is--wrapper を直接の親にしないように間に別の要素を挟んでください。

Lismコンポーネントでの使い方

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

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

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

Import

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

専用Props

プロパティ	説明
`contentSize`	コンテンツサイズを指定します。
`layout`	展開したいレイアウトプリミティブを指定できます。
`isContainer`	コンテナタイプをセットできます。

↓

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

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

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

Usage

使用例

↓

例

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>

DEMOページ

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

別タブで表示 ↗