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" />
  <Inline fz="s">Label Text</Inline>
  <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="pp" />
</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="ppp" />
  <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" wm="vertical-rl" />
    <span>Label</span>
    <Divider fx="1" wm="vertical-rl" />
  </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 wm="vertical-rl" 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 wm="vertical-rl" 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.

目次