Divider
区切り線を描画するコンポーネントです。--bdcがvar(--divider)に初期セットされます。
構造
div.a--dividerCSS
Props
| プロパティ | 説明 |
|---|---|
bdw,bds,bdc | 区切り線のボーダープロパティ |
Import
import { Divider } from 'lism-css/react';Usage
↓
例
…Contents…
…Contents…
リサイズ可能
<Box bgc='base-2' py='40' ta='center'>...Contents...</Box><Divider /><Box bgc='base-2' py='40' ta='center'>...Contents...</Box> ↓
スタイルの変更例
…Contents…
…Contents…
リサイズ可能
<Box bgc='base-2' py='40' ta='center'>...Contents...</Box><Divider bds='dotted' bdw='4px' bdc='blue'/><Box bgc='base-2' py='40' ta='center'>...Contents...</Box> ↓
縦方向の区切り線
…Contents…
…Contents…
リサイズ可能
<Flex ai='center' g='20'> <Box fx='1' bgc='base-2' py='40' ta='center'>...Contents...</Box> <Divider writing='vertical' bds='dashed' bdw='2px' aslf='stretch' /> <Box fx='1' bgc='base-2' py='40' ta='center'>...Contents...</Box></Flex>