コンテンツにスキップ
Lism CSS

Divider

区切り線を描画するコンポーネントです。--bdcがvar(--c-divider)に初期セットされます。ボーダーの方向は-bdクラスで指定してください。

構造

Section titled “構造”
div.l--divider.-bd:[bs|is]

CSS

Section titled “CSS”

Props

Section titled “Props”
プロパティ説明
bdw,bds,bdc区切り線のボーダープロパティ

Import

Section titled “Import”
import { Divider } from 'lism-css/react';

Usage

Section titled “Usage”
↓
例
…Contents…
…Contents…
リサイズ可能 
<Box bgc='base-2' py='50' ta='c'>...Contents...</Box>
<Divider />
<Box bgc='base-2' py='50' ta='c'>...Contents...</Box>
↓
スタイルの変更例
…Contents…
…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>
↓
縦方向の区切り線
…Contents…
…Contents…
リサイズ可能 
<Flex ai='c' g='30'>
  <Box fx='1' bgc='base-2' py='50' ta='c'>...Contents...</Box>
  <Divider bd='is' aslf='stretch' />
  <Box fx='1' bgc='base-2' py='50' ta='c'>...Contents...</Box>
</Flex>