DividerLabel

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

Examples

↓

例

…Contents…

Label Text

…Contents…

<Box bgc='base-2' c='text-2' py='50' ta='c'>...Contents...</Box>
<Flex ai='c' 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='c'>...Contents...</Box>

↓

例

…Contents…

Label Text

…Contents…

Label Text

…Contents…

<Box bgc='base-2' c='text-2' py='50' ta='c'>...Contents...</Box>
<Flex ai='c' g='30' lh='1'>
  <span class='-fs:i'>Label Text</span>
  <Divider fx='1' bdc='currentColor' op='mid' />
</Flex>
<Box bgc='base-2' c='text-2' py='50' ta='c'>...Contents...</Box>
<Flex ai='c' g='30' lh='1' c='blue'>
  <Divider fx='1' bdc='currentColor' bds='dotted' bdw='4px' op='low' />
  <span class='-fs:i'>Label Text</span>
</Flex>
<Box bgc='base-2' c='text-2' py='50' ta='c'>...Contents...</Box>

縦方向

↓

flex-directionを変更する

Contents

Label

Contents

<Flex ai='c' g='20'>
  <Box fx='1' bgc='base-2' py='50' ta='c'>Contents</Box>
  <Stack ai='c' g='20' lh='1' fz='s' aslf='stretch'>
    <Divider fx='1' bd='is' />
    <span>Label</span>
    <Divider fx='1' bd='is' />
  </Stack>
  <Box fx='1' bgc='base-2' py='50' ta='c'>Contents</Box>
</Flex>

↓

writing-modeを変更する

Box

Label

Box

Label

Box

リサイズ可能

<Flex ai='stretch' g='20'>
  <Box fx='1' bgc='base-2' py='50' ta='c'>Box</Box>
  <Stack ai='c' g='20' lh='1' fz='xs' aslf='stretch'>
    <span class='-wm:v-rl'>Label</span>
    <Divider fx='1' bd='is' />
  </Stack>
  <Box fx='1' bgc='base-2' py='50' ta='c'>Box</Box>
  <Stack ai='c' g='20' lh='1' fz='xs' aslf='stretch'>
  <Divider fx='1' bd='is' />
    <span class='-wm:v-rl'>Label</span>
  </Stack>
  <Box fx='1' bgc='base-2' py='50' ta='c'>Box</Box>
</Flex>