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: .-contentSize:s / m / l / xl は contentSize Prop の auto-generated 出力（src/scss/_prop-config.gen.scss 経由）から自動的に props 層に出力される。

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

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

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

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

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

Import

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

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

専用Props

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

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

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

Usage

使用例

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

<div class="l--flow is--wrapper -p:20">
  <p>Content</p>
  <p>Content</p>
  <p>...</p>
</div>

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

<div class="l--flow is--wrapper -contentSize:s -p:20">
  <p>Content</p>
  <p>Content</p>
  <p>...</p>
</div>

任意のコンテナサイズをセットする

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

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

<div class="is--wrapper -p:20" style="--contentSize: 20rem">
  <div>Contents...</div>
  <div>Contents...</div>
</div>

DEMOページ