Decorator
コンテンツを装飾するための空要素を出力するためのコンポーネントです。
デフォルトでaria-hidden="true"で出力されます。
div.l--decorator[aria-hidden="true"]| Prop | 説明 |
|---|---|
size | デコレーターのサイズ（横幅・高さ）を一括指定します。 この指定がある場合、指定したサイズは w(width)に渡され、ar='1/1'(aspect-ratio:1/1)が自動で付与されます。 |
iis,iie,ibs,ibe | これらを i_ へ渡します。 |
trf, trfo, translate, rotate, scale, clipPath | これらをcssへ渡します |
blur,contrast,brightness,grayscale,hueRotate,invert,saturate,sepia | これらをまとめて連結し css.fltr に受け渡します。 |
また、gridItem系プロパティも直接利用できます。
Import
Section titled “Import”import { Decorator } from 'lism-css';<Decorator>を使った装飾例を紹介します。
↓
例
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
<Box p='40' pos='r'> <Dummy /> <Decorator size='1.25em' pos='a' t='0' l='0' bd='l,t' /> <Decorator size='1.25em' pos='a' r='0' b='0' bd='r,b' /></Box>この他にも、以下のページで<Decorator>を活用したコンテンツの装飾例を複数紹介しています。