DecoBox
コンテンツを装飾するためのボックスモジュール。
対応クラスは.c--decoBox--{variant}。
(基本的にどういう装飾を行うかの指定が必須で.c--decoBoxに何かスタイルがあるわけではないので、modifier付きクラス単体で使う）
Props
- variant
- subvariant
- data
- decoratorCount
- boxProps
- bodyProps
- decoratorProps
- isFlow は body側に渡されます.
variant, subvariant に対しての 各Props をプリセット登録できるようにする予定。プリセット登録せずに装飾内容を指定する場合は data に直接指定する。
Import
import { DecoBox } from '@loos/lism-core';DEMO
call
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
...<DecoBox>に直接指定したら内部で引き継がれるようにしている。Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<DecoBox
variant='call'
subvariant='right'
data={{ decoratorProps: { bdc: 'red' } }}
>
<DammyText />
</DecoBox>balloon
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
...<DecoBox>に直接指定したら内部で引き継がれるようにしている。Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<DecoBox variant='balloon' subvariant='left' bgc='pale'>
<DammyText />
</DecoBox>
<DecoBox
variant='balloon'
subvariant='right'
bdc='blue:40%'
bgc='hsl(215deg 98% 96%)'
>
<DammyText />
</DecoBox>pipipi
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<DecoBox variant='pipipi' subvariant='left'>
<DammyText />
</DecoBox>
<DecoBox variant='pipipi' subvariant='right' bdc='blue'>
<DammyText />
</DecoBox>sticky
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<DecoBox variant='sticky'>
<DammyText />
</DecoBox>カラー指定は bodyProps で
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<DecoBox
variant='sticky'
data={{ bodyProps: { bdc: 'blue:70%', bgc: 'hsl(200 90% 95%)' } }}
>
<DammyText />
</DecoBox>kakko
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
...Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
...