Lism Props

<Lism>系コンポーネントで受け取れる、Lism CSS 専用プロパティをLism Propsと呼んでいます。

as

出力するHTMLタグや外部コンポーネントを指定できます。デフォルトはdivです。

<Lism as="p">Lorem ipsum texts...</Lism>

↓

<p>Lorem ipsum texts...</p>

外部コンポーネントを指定すると、<Lism>を最終的に別の外部コンポーネントとして展開することができます。

import Image from 'next/image';

<Media as={Image} src="..." p="20" bd />

先に Lism Props（上記の例だとp,bd） を解析して className, style を生成してから、asで指定したコンポーネントに渡します。 Lismコンポーネント以外に対しても Lism Props を使いたい時に活用してください。

className

コンポーネントに任意のクラス名を付与するための標準の prop です。c--基底クラス（Component Class）や外部スタイルのクラスなどは、この prop から指定します。

<Lism p="10" className="c--myComponent">Lorem ipsum texts...</Lism>

↓

<div class="c--myComponent -p:10">Lorem ipsum texts...</div>

set / util

set は Set Class（set--{value}）、
util は Utility Class（u--{value}）を指定するための prop です。

<Lism set="bxsh" util="cbox">...</Lism>

↓

<div class="set--bxsh u--cbox">...</div>

複数指定

どちらもスペース区切りで複数指定できます。

<Lism set="hov" hasTransition util="cbox trim">...</Lism>

- prefix で除外

値の先頭に - を付けると、その識別子を除外できます。コンポーネント内部で適用済みのクラスを除外したい場合などに利用できます。

{/* Buttonに初期セットされている set="plain"(set--plain) を除外 */}
<MyButton set="-plain">...</MyButton>

{/* u--trim を除外して u--cbox を追加 */}
<MyCallout util="-trim cbox">...</MyCallout>

layout / atomic

layout と atomic はそれぞれ Layout Primitive クラス（l--*）と Atomic Primitive クラス（a--*）を指定するための prop です。

レイアウトプリミティブを指定できます。例えばlayout='flow'とすると、l--flowクラスが出力されます。

<Lism layout="flow">Lorem ipsum texts...</Lism>
<Lism atomic="divider" />

↓

<div class="l--flow">Lorem ipsum texts...</div>
<div class="a--divider"></div>

Trait Props

Trait Class (is--* / has--*) に対応する Props です。

| Prop | 出力クラス | 用途 | |---|---|---| | isWrapper(='{s\|m\|l\|xl}') | is--wrapper + -contentSize:{s\|m\|l\|xl} | コンテンツ幅制限 | | isLayer | is--layer | 絶対配置レイヤー（inset:0） | | isBoxLink | is--boxLink | ボックス全体リンク化 | | isCoverLink | is--coverLink | 親要素全体に広がるクリック範囲を持つリンク | | isContainer | is--container | コンテナクエリ対象 | | isSide | is--side | サイド要素 | | isSkipFlow | is--skipFlow | Flow 余白をスキップ | | hasTransition | has--transition | transition プロパティを CSS 変数でセット | | hasGutter | has--gutter | 左右に統一ガター（--gutter / --gutter--base）を確保 | | hasSnap | has--snap | scroll-snap-* プロパティを CSS 変数でセット | | hasMask | has--mask | mask プロパティを CSS 変数でセット |

Trait Class についての解説は以下を参照してください。

CSS Props

Property Class (-{prop}:{value}) に対応する Props です。

{prop}部分と同じ短縮されたCSSプロパティ名を使って指定できます。
(例: font-size は fz、padding は p で指定できます。)

prop={value} で指定した値に応じて、出力形式が以下のように決まります。

| 値 | 出力形式 | 例 | |------|------|-----| | トークン値・プリセット値 | -{prop}:{value} クラス | fz='l' → -fz:l | | true | -{prop} クラスのみ（変数なし） | bd → -bd | | : で始まる値 | 強制的にユーティリティクラス化 | p=':hoge' → -p:hoge | | その他の値（BP対応） | -{prop} クラス + --{prop} 変数 | fz='20px' → -fz + --fz:20px | | その他の値（BP非対応） | style 属性に直接出力 | o='0.7' → opacity:0.7 | | その他の値（変数専用） | --{prop} 変数のみ | bdw='2px' → --bdw:2px |

コード例

<Lism fz="l" p="20">...</Lism>
// → <div class="-fz:l -p:20">...</div>

<Lism c="red">...</Lism>
// → <div class="-c" style="--c:var(--red)">...</div>

<Lism p bdrs>contents</Lism>
// → <div class="-p -bdrs">contents</div>

CSS側で変数の中身を記述したい場合や、親と同じ変数を継承したい場合などに活用できます。

<Lism bd bdc="#000" bdw="2px">...</Lism>
// → <div class="-bd" style="--bdc:#000;--bdw:2px">...</div>

<Lism fz="20px">contents</Lism>
// → <div class="-fz" style="--fz:20px">contents</div>

<Lism o="0.75">contents</Lism>
// → <div style="opacity:0.75">contents</div>

: でクラスとして強制的に出力

対応する Property Class がない場合でも、: から始めることでその後ろの文字列がクラス名として出力されます。

<Lism p=":hoge">...</Lism>
// → <div class="-p:hoge">...</div>

任意のクラスをCSSへ追加し、ご利用ください。

.-p\:hoge {
  /* ... your styles ... */
}

: 単体を指定した場合

: の後ろに文字列を続けず、: だけを指定した場合は true を指定したときと同じく -{prop} クラスのみが出力されます。

<Lism bd=":">...</Lism>
// → <div class="-bd">...</div>

bd のようにそのまま値を渡せる（true で有効化できる）プロパティに対して、テキスト入力など boolean を渡せない経路から true 相当を指定したい場合に便利です。

レスポンシブ指定

BP対応プロパティは、配列またはオブジェクトでブレイクポイント（sm, md）ごとの値を指定できます。

<Lism p={['20', '30', '5rem']}>...</Lism>

<div class="-p:20 -p_sm -p_md" style="--p_sm:var(--s30);--p_md:5rem">
  ...
</div>

<Lism p={[null, null, '40']}>...</Lism>

<div class="-p_md" style="--p_md:var(--s40)">
  ...
</div>

デフォルトでレスポンシブ対応されていない（CSSが用意されていない）プロパティに関しては、SCSSによるカスタマイズを行うことで対応できます。

exProps

Lism Props としての処理をスキップしたいプロパティをオブジェクトで指定できます。

asで指定した外部コンポーネントが受け取れるプロパティと Lism Props の名前が被っている場合など、外部コンポーネント用のプロパティであることを明示的にしたい時に便利です。

<Icon as={Hoge} exProps={{ size: '1em' }} p="10" fz="l">
  ...
</Icon>

上記のようにすることで、LismのIconコンポーネントでp, fz を受け取って処理し、Hogeという外部コンポーネント側で確実にsizeを受け取ることができます。
（現状、Lism 側では size は処理されないためこの例ではexPropsは不要ですが、外部コンポーネント用のプロパティを明示的に指定しておくと、将来的にも影響がでる心配がなくなります。）

クラスの出力順

<Lism> が生成する class 属性は、以下のような順序で出力されます。

[className（c-- 含む）] [a--] [l--] [set--] [is-- / has--] [u--] [-]

| # | Prop | 例 | |---|---|---| | 1 | 独自クラス（className / class） | c--box, z--header, hoge | | 2 | atomic | a--icon, a--divider | | 3 | layout | l--flex, l--columns | | 4 | set | set--hov | | 5 | isXxxx / hasXxxx（Trait） | is--wrapper, is--layer, has--transition | | 6 | util | u--cbox, u--trim | | 7 | prop={value} | -p:20, -bgc:base-2, -hov:-c |