BalloonBox

このページは現在調整中です

Lism UI (@lism-css/ui) はまだ準備中です。

ふきだし風装飾ボックスの作成例を紹介します。

Import

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

Props

プロパティ	説明
`variant`	ふきだしの方向を指定できます。`c--balloonBox--{variant}` クラスが出力されます。
`keycolor`	ふきだしの色を指定できます。`u-cbox`も出力されます。

Usage

↓

BalloonBox

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

リサイズ可能

  <BalloonBox variant='left'>
    <Dummy />
  </BalloonBox>
  <BalloonBox variant='right' keycolor='blue'>
    <Dummy />
  </BalloonBox>
  <BalloonBox variant='top' bdw='2px' keycolor='red'>
    <Dummy />
  </BalloonBox>
  <BalloonBox variant='bottom' bgc='text' c='base'>
    <Dummy />
  </BalloonBox>