Divider

区切り線を描画するコンポーネントです。

構造

div.a--divider.-bd:[bs|is]

Props

プロパティ	説明
`variant`	`a--divider--{variant}` クラスを出力します。
`bdw`,`bds`,`bdc`	区切り線のボーダープロパティ

Import

import { Divider } from '@lism-ui/core';

Usage

↓

例

…Contents…

リサイズ可能

<Box bgc='base-2' py='50' ta='c'>...Contents...</Box>
<Divider />
<Box bgc='base-2' py='50' ta='c'>...Contents...</Box>

↓

スタイルの変更例

…Contents…

リサイズ可能

<Box bgc='base-2' py='50' ta='c'>...Contents...</Box>
<Divider bds='dotted' bdw='4px' bdc='blue'/>
<Box bgc='base-2' py='50' ta='c'>...Contents...</Box>

<div class="l--box -bgc:base-2 -py:50 -ta:c">...Contents...</div>
<div class="a--divider -bd:bs" aria-hidden="true" style="--bds:dotted;--bdw:4px;--bdc:var(--blue)"></div>
<div class="l--box -bgc:base-2 -py:50 -ta:c">...Contents...</div>

↓

縦方向の区切り線

…Contents…

リサイズ可能

<Flex ai='c' g='30'>
  <FlexItem fx='1' bgc='base-2' py='50' ta='c'>...Contents...</FlexItem>
  <Divider bd='is' aslf='stretch' />
  <FlexItem fx='1' bgc='base-2' py='50' ta='c'>...Contents...</FlexItem>
</Flex>

<div class="l--flex -g:30 -ai:c">
  <div class="-fx:1 -bgc:base-2 -py:50 -ta:c">...Contents...</div>
  <div class="a--divider -bd:is -aslf:str" aria-hidden="true"></div>
  <div class="-fx:1 -bgc:base-2 -py:50 -ta:c">...Contents...</div>
</div>