Border
borderの指定については少し特殊になっています。
bdの指定が必須です。bdc,bdw,bdsは 変数としてのみ出力されます。
実際に見てもらったほうが早いと思います。
DEMO
bdだけ指定Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<Box bd>
...
</Box>bdに何も指定しない場合、-bd: クラスが出力されます。
そして、.-bd: に関するCSSは以下のようになっています。
[class*='-bd:'] {
// 初期値
--bds: solid;
--bdw: 1px;
--bdc: currentColor;
}
.-bd\: {
--bd: var(--bdw) var(--bds) var(--bdc);
border: var(--bd);
}このように、Lismコンポーネントで扱うボーダーは、基本的に--bdw, --bds, --bdcの3変数によって管理される仕組みになっています。
例を見てみましょう。
bdc="base"を指定Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<Box bd bdc="base">
...
</Box>まずbdでボーダーを出力指定した上で、--bdcでカラーを上書きするような仕組みになっています。
bdc,bdw,bdsをそれぞれ指定Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<Box bd bdc="accent" bdw="3px" bds="dotted">
...
</Box>上の例は、以下のようにbdに全て記述することも可能です。
bdc,bdw,bdsをそれぞれ指定Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<Box bd={{ color:"accent", width:"3px", style:"dotted" }}>
...
</Box>
or
<Box bd={{ c:"accent", w:"3px", s:"dotted" }}>
...
</Box>プリセット値を指定してユーティリティクラスを出力
border用のプリセット値を指定することで、ユーティリティクラスとして出力することも可能です。
デフォルトで用意しているのは次の通りです。（要検討）
- guide
- emphasis
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<Box bd="guide">...</Box>
<Box bd="emphasis">...</Box>ユーティリティクラス側で--bdc,--bdw,--bdsを使ってスタイルを定義していれば、 プリセットをベースにしつつそれらを上書きすることも可能です。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<Box bd="emphasis" bdc="accent">...</Box>方向指定
特定の方向のみborderを指定したい場合も、基本的にはbdを使用します。
使えるキーワードは次の通りです。
- left
- ...
<Box bd="left" p="20">left</Box>
<Box bd="right" p="20">right</Box>
<Box bd="top" p="20">top</Box>
<Box bd="bottom" p="20">bottom</Box>
<Box bd="inline" p="20">inline</Box>
<Box bd="in-s" p="20">inline start</Box>
<Box bd="block" p="20">block</Box>
<Box bd="bl-s" p="20">block start</Box>bdl,bdr,bdt,bdbの使用
--bdw, --bds, --bdcと無関係に好きな値を各方向に対して指定できます。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<Box bdl="solid 4px" bdb="solid 1px">
...
</Box>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<Box bd bdt="none">
...
</Box>