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

DividerLabel

区切り線をラベルテキスト付きで描画するコンポーネントの作成例です。

Examples

Section titled “Examples”
↓
例
…Contents…
Label Text
…Contents… 
<Box bgc='base-2' c='text-2' py='50' ta='center'>...Contents...</Box>
<Flex ai='center' g='30' lh='1'>
  <Divider fx='1' />
  <span>Label Text</span>
  <Divider fx='1' />
</Flex>
<Box bgc='base-2' c='text-2' py='50' ta='center'>...Contents...</Box>
↓
例
…Contents…
Label Text
…Contents…
Label Text
…Contents… 
<Box bgc='base-2' c='text-2' py='50' ta='center'>...Contents...</Box>
<Flex ai='center' g='30' lh='1'>
  <span class='-fs:italic'>Label Text</span>
  <Divider fx='1' bdc='currentColor' o='-20' />
</Flex>
<Box bgc='base-2' c='text-2' py='50' ta='center'>...Contents...</Box>
<Flex ai='center' g='30' lh='1' c='blue'>
  <Divider fx='1' bdc='currentColor' bds='dotted' bdw='4px' o='-30' />
  <span class='-fs:italic'>Label Text</span>
</Flex>
<Box bgc='base-2' c='text-2' py='50' ta='center'>...Contents...</Box>

縦方向

Section titled “縦方向”
↓
flex-directionを変更する
Box
Label
Box 
<Flex ai='center' g='20'>
  <Box fx='1' bgc='base-2' py='50' ta='center'>Box</Box>
  <Stack ai='center' g='20' lh='1' fz='s' aslf='stretch'>
    <Divider fx='1' writing='vertical' />
    <span>Label</span>
    <Divider fx='1' writing='vertical' />
  </Stack>
  <Box fx='1' bgc='base-2' py='50' ta='center'>Box</Box>
</Flex>
↓
labelも縦書き
Box
Label
Box
Label
Box
リサイズ可能 
<Flex ai='stretch' g='20'>
  <Box fx='1' bgc='base-2' py='50' ta='center'>Box</Box>
  <Flex writing='vertical' ai='center' g='20' lh='1' fz='xs' aslf='stretch'>
    <span>Label</span>
    <Divider fx='1' />
  </Flex>
  <Box fx='1' bgc='base-2' py='50' ta='center'>Box</Box>
  <Flex writing='vertical' ai='center' g='20' lh='1' fz='xs' aslf='stretch'>
  <Divider fx='1' />
    <span>Label</span>
  </Flex>
  <Box fx='1' bgc='base-2' py='50' ta='center'>Box</Box>
</Flex>