BalloonBox
ふきだし風装飾ボックスの作成例を紹介します。
Import
Section titled “Import” ソースコードを手動でコピー&ペーストしてご利用ください。
import BalloonBox from '@/components/lism/BalloonBox/index.jsx'; | プロパティ | 説明 |
|---|---|
variant | ふきだしの方向を指定できます。c--balloonBox--{variant} クラスが出力されます。 |
keycol | ふきだしの色を指定できます。u--colboxも出力されます。 |
↓
BalloonBox
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
リサイズ可能
<BalloonBox variant='left'> <Dummy /> </BalloonBox> <BalloonBox variant='right' keycol='blue'> <Dummy /> </BalloonBox> <BalloonBox variant='top' bdw='2px' keycol='red'> <Dummy /> </BalloonBox> <BalloonBox variant='bottom' bgc='text' c='base'> <Dummy /> </BalloonBox>