Lism CSS
検索

DividerLabel

このページは現在調整中です
Lism UI (@lism-css/ui) はまだ準備中です。

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

Examples

↓
例
…Contents…
Label Text
…Contents… 
<Box bgc='base-2' c='text-2' py='40' ta='center'>...Contents...</Box>
<Flex ai='center' g='20' lh='s'>
  <Divider fx='1' />
  <HTML.span fz='s'>Label Text</HTML.span>
  <Divider fx='1' />
</Flex>
<Box bgc='base-2' c='text-2' py='40' ta='center'>...Contents...</Box>
↓
例
…Contents…
Label Text
…Contents…
Label Text
…Contents… 
<Box bgc='base-2' c='text-2' py='40' ta='center'>...Contents...</Box>
<Flex ai='center' g='15' lh='s'>
  <span class='-fz:s -px:5'>Label Text</span>
  <Divider fx='1' bdc='currentColor' o='-20' />
</Flex>
<Box bgc='base-2' c='text-2' py='40' ta='center'>...Contents...</Box>
<Flex ai='center' g='15' lh='s' c='blue'>
  <Divider fx='1' bdc='currentColor' bds='dotted' bdw='4px' o='-30' />
  <span class='-fz:s -px:5'>Label Text</span>
</Flex>
<Box bgc='base-2' c='text-2' py='40' ta='center'>...Contents...</Box>

縦方向

↓
flex-directionを変更する
Box
Label
Box 
<Flex ai='center' g='15'>
  <Box fx='1' bgc='base-2' py='40' ta='center'>Box</Box>
  <Stack ai='center' g='10' lh='s' fz='s' aslf='stretch'>
    <Divider fx='1' isVertical />
    <span>Label</span>
    <Divider fx='1' isVertical />
  </Stack>
  <Box fx='1' bgc='base-2' py='40' ta='center'>Box</Box>
</Flex>
↓
labelも縦書き
Box
Label
Box
Label
Box
リサイズ可能 
<Flex ai='stretch' g='15'>
  <Box fx='1' bgc='base-2' py='40' ta='center'>Box</Box>
  <Flex isVertical ai='center' g='15' lh='s' fz='xs' aslf='stretch'>
    <span class="-px:5">Label</span>
    <Divider fx='1' />
  </Flex>
  <Box fx='1' bgc='base-2' py='40' ta='center'>Box</Box>
  <Flex isVertical ai='center' g='15' lh='s' fz='xs' aslf='stretch'>
  <Divider fx='1' />
    <span class="-px:5">Label</span>
  </Flex>
  <Box fx='1' bgc='base-2' py='40' ta='center'>Box</Box>
</Flex>

© Lism CSS. All rights reserved.

目次