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

DividerLabel

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

↓
Preview
Label Text
<DividerLabel>Label Text</DividerLabel>

Import

ソースコードを手動でコピー&ペーストしてご利用ください。

Props

プロパティ説明
textPositionラベルテキストの位置。start,endを指定するとその方向にテキストが寄ります
bd,bdw,bds,bdc区切り線のボーダープロパティ。

Examples

↓
例
…Contents…
Label Text
…Contents…
Label Text
…Contents…
Label Text
…Contents… 
<Box bgc='base-2' c='text-2' py='50' ta='c'>...Contents...</Box>
<DividerLabel>Label Text</DividerLabel>
<Box bgc='base-2' c='text-2' py='50' ta='c'>...Contents...</Box>
↓
スタイルの変更例
…Contents…
Label Text
…Contents… 
<Box bgc='base-2' c='text-2' py='50' ta='c'>...Contents...</Box>
<DividerLabel bds='dotted' bdw='5px' c='purple' fz='s' ff='mono'>Label Text</DividerLabel>
<Box bgc='base-2' c='text-2' py='50' ta='c'>...Contents...</Box>

縦方向

↓
flex-directionを変更する
Contents
Label
Contents 
<Flex ai='c' g='20'>
  <FlexItem fx='1' bgc='base-2' py='50' ta='c'>Contents</FlexItem>
  <DividerLabel fxd='column' bd='is' fz='s' aslf='stretch'>Label</DividerLabel>
  <FlexItem fx='1' bgc='base-2' py='50' ta='c'>Contents</FlexItem>
</Flex>
↓
writing-modeを変更する
Box
Label
Box
Label
Box
リサイズ可能 
<Flex ai='stretch' g='20'>
  <FlexItem fx='1' bgc='base-2' py='50' ta='c'>Box</FlexItem>
  <DividerLabel className='-wm:v-rl' fz='xs' g='20' textPosition='start'>Label</DividerLabel>
  <FlexItem fx='1' bgc='base-2' py='50' ta='c'>Box</FlexItem>
  <DividerLabel className='-wm:v-rl' fz='xs' g='20' textPosition='end'>Label</DividerLabel>
  <FlexItem fx='1' bgc='base-2' py='50' ta='c'>Box</FlexItem>
</Flex>