Decorator
コンテンツを装飾するための空要素を出力するためのコンポーネントです。
デフォルトでaria-hidden="true"で出力されます。
div.l--decorator[aria-hidden="true"]| Prop | 説明 |
|---|---|
size | デコレーターのサイズ（横幅・高さ）を一括指定します。 この指定がある場合、指定したサイズは w(width)に渡され、ar='1/1'(aspect-ratio:1/1)が自動で付与されます。 |
transform, transformOrigin, translate, rotate, scale, clipPath | これらをcssへ渡します |
blur,contrast,brightness,grayscale,hueRotate,invert,saturate,sepia | これらをまとめて css.filter に受け渡します。 |
また、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.
リサイズ可能
<Grid> <Decorator size='1.25em' bd='l' rotate='45deg' transformOrigin='left bottom' /> <Box p='20'> <Dummy /> </Box> <Decorator size='1.25em' bd='l' rotate='-45deg' transformOrigin='left top' /></Grid>この他にも、以下のページで<Decorator>を活用したコンテンツの装飾例を複数紹介しています。