Lism Props

Lismが配布しているReactやAstro用のコンポーネントでは、Lism CSSの設計に合わせて、専用のプロパティ(“Lism Props” と呼びます)が受け取れるようになっています。

種別
State Props	Layout State に分類されるクラスを出力するためのプロパティ
CSS Props	Prop Utilities に分類されるクラスを出力するためのプロパティ
Component Props	その他、Lismコンポーネントで使えるプロパティ

State Props

Layout State クラスに対応するプロパティ群です。

たとえば、is--flowクラスに対応する State PropsはisFlowとなります。

Prop	出力クラス
`isFlow`	`is--flow`
`isFlow='s\|l'`	`is--flow,-flow:s\|l`
`isContainer`	`is--container`
`isContainer='s\|m\|l'`	`is--container,-container:s\|m\|l`
`isFrame`	`l--frame`
`isLayer`	`is--layer`
`isLinkBox`	`is--linkBox`
`isWide`	`is--wide`
`isFullwide`	`is--fullwide`
`isOverwide`	`is--overwide`
`hasGutter`	`has--gutter`
`hasDivider`	`has--divider`

Layout State クラスについて

CSS Props

主要なCSSプロパティに対して、それぞれ省略記法でコンポーネントに指定できるようになっています。

例えば、font-size は fz、padding は p で指定できます。

指定可能なCSS Props一覧はこちら

↓

例

<Lism fz='l' p='20' mt='2rem'>contents</Lism>
↓
<div class="-fz:l -p:20">contents</div>

この時、Prop Utilities に分類されるユーティリティクラスに対応する値が指定されれば、上記のようにクラスが出力されるようになっています。

該当するユーティリティクラスがない場合、単純にstyle属性にインラインで出力されるか、または-{prop}:と--{prop}の組み合わせで出力されます。

↓

ユーティリティクラスがない場合の例

<Lism fz='20px' tsh='0 0 8px #555'>contents</Lism>
↓
<div class="-fz:" style="--fz:20px;text-shadow:0 0 8px #555">contents</div>

-{prop}:と--{prop}の組み合わせで出力されるものは、基本的にブレイクポイントでの切り替えに対応しているプロパティです。（そのほか、変数管理できた方が色々と便利なので、主要なプロパティは基本的に変数化されるようになっています。）

↓

ブレイクポイントに対応しているプロパティの例

<Lism fz={['20px','30px']}>contents</Lism>
↓
<div class="-fz: -fz@sm" style="--fz:20px;--sm-fz:30px">contents</div>

Responsive Propsについて

ユーティリティクラスとして強制的に出力する方法

u:で始まる文字列を指定することで、ユーティリティクラスとして強制的に出力することができます。

↓

例

<Lism bg='u:hoge'>contents</Lism>
↓
<div class="-bg:hoge">contents</div>

これにより、Lismが用意しているユーティリティクラスではなく、自身で任意のユーティリティクラスを用意して活用しやすくなっています。

このほか、"-"を指定するか、trueを指定すると、変数なしで-{prop}:クラスのみを出力します。

↓

例

<Lism p='-' bdrs>contents</Lism>
↓
<div class="-p: -bdrs:">contents</div>

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

その他共通のプロパティ

その他、Lismコンポーネントで共通して使用できるプロパティがあります。

tag

最終的に出力するHTMLのタグを指定できます。

↓

例: <Text>をspanで出力する

<Text tag='span' fz='l'>...</Text>

as

Lismコンポーネントを別のコンポーネントとして展開することができます。

他の Lism Props を解析して class, style を生成し、その他のPropsと合わせてasで指定したコンポーネントに渡します。

Lismコンポーネント以外に対しても Lism Props を使いたい時に活用してください。

↓

例、Lismの<Media>コンポーネントをNext.jsの<Image>で展開する

import Image from 'next/image';

<Media as={Image} src='...' bxsh='2' bdrs='3' />

exProps

Lism側での処理をスキップしたいpropsを指定できます。

asで指定した外部コンポーネント用のプロパティを明示的に指定する際にも便利です。外部コンポーネントが受け取れるプロパティと、Lism Props の名前が被っていた場合の対処法としても活用できます。

↓

例

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

上記のようにすることで、LismのIconコンポーネントでp, fz を受け取り、Hogeという外部コンポーネント側でsizeを受け取ることができます。

variant

多くのコンポーネントで、バリエーションクラスを出力することができるようになっています。

<Box variant='hoge'>のようにすることで、l--box--hoge というようなクラスが出力できます。

pass-get

pass-get に関するプロパティとして、以下ものがあります。

passVars: --pass-{prop} を出力します。オブジェクト形式 {prop:value} で指定します。
pass: .-pass:{prop} を出力します。文字列で指定します。複数指定する場合は,で区切ります。
get: .-get:{prop} を出力します。文字列で指定します。複数指定する場合は,で区切ります。