Decorator (a--decorator)
a--decoratorは、コンテンツを装飾するための空要素として使うクラスです。
Lismコンポーネント
<Lism atomic="decorator" aria-hidden="true" />のエイリアスとして、<Decorator>を用意しています。
Import
import { Decorator } from 'lism-css/react';出力されるHTML構造
div.a--decorator[aria-hidden="true"]専用Props
| Prop | 説明 |
|---|---|
size | デコレーターのサイズ（横幅・高さ）を一括指定します。 この指定がある場合、指定したサイズは w(width)に渡され、ar='1/1'(aspect-ratio:1/1)が自動で付与されます。 |
Usage
<Decorator>を使った装飾例を紹介します。
装飾に使用する例
↓
例
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.
<Box p="30" pos="relative"> <p> 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. </p> <Decorator size="1.25em" pos="absolute" t="0" l="0" bd-x-s bd-y-s bdc="current" /> <Decorator size="1.25em" pos="absolute" r="0" b="0" bd-x-e bd-y-e bdc="current" /></Box>