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

Divider

区切り線を描画するコンポーネントです。--bdcがvar(--divider)に初期セットされます。

構造

Section titled “構造”
div.a--divider

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='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>