コンテンツにスキップ
Lism CSS

Decorator

コンテンツを装飾するための空要素を出力するためのコンポーネントです。
デフォルトでaria-hidden="true"で出力されます。

構造

Section titled “構造”
div.a--decorator[aria-hidden="true"]

Props

Section titled “Props”
Prop説明
sizeデコレーターのサイズ（横幅・高さ）を一括指定します。
この指定がある場合、指定したサイズはw(width)に渡され、ar='1/1'(aspect-ratio:1/1)が自動で付与されます。
blur,contrast,brightness,grayscale,hueRotate,invert,saturate,sepiaこれらをまとめて連結し style.filter に受け渡します。
clipPath,boxSizingstyle.clipPath,style.boxSizingへ渡します

Import

Section titled “Import”
import { Decorator } from 'lism-css/react';

Usage

Section titled “Usage”

<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='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>