Decorator
コンテンツを装飾するための空要素を出力するためのコンポーネントです。
デフォルトでaria-hidden="true"で出力されます。
構造
div.a--decorator[aria-hidden="true"]Props
| Prop | 説明 |
|---|---|
size | デコレーターのサイズ（横幅・高さ）を一括指定します。 この指定がある場合、指定したサイズは w(width)に渡され、ar='1/1'(aspect-ratio:1/1)が自動で付与されます。 |
blur,contrast,brightness,grayscale,hueRotate,invert,saturate,sepia | これらをまとめて連結し style.filter に受け渡します。 |
clipPath,boxSizing | style.clipPath,style.boxSizingへ渡します |
Import
import { Decorator } from 'lism-css/react';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='rel'> <Dummy /> <Decorator size='1.25em' pos='abs' t='0' l='0' bd-x-s bd-y-s /> <Decorator size='1.25em' pos='abs' r='0' b='0' bd-x-e bd-y-e /></Box>