Lism

Lism Props( CSS Props 及び State Props )を受け取るための特殊なコンポーネントです。
何も指定がなければ、ただの<div>タグを返します。

Lismで配布しているコンポーネントのほぼ全ては、この<Lism>がベースなっています。

Props

Import

import { Lism } from '@lism-ui/core';

import { Lism } from '@lism-ui/astro';

Usage

<Lism p='30' bgc='base-2'>
  <p>Content...</p>
</Lism>

派生コンポーネント

<Lism>は汎用的すぎるので、用途に合わせた派生コンポーネントもいくつか用意されています。

<Text>

テキスト用にデフォルトで<p>タグが出力されるようになった<Lism>コンポーネントです。
（<Lism tag='p'>のエイリアス）

<Text ta='c' fz='xl' lts='l'>Lorem ipsum text.</Text>

<p class="-ta:c -fz:xl -lts:l">Lorem ipsum text.</p>

<Link>

リンク用に少し特殊な処理が加えられているコンポーネントです。

• デフォルトで<a>タグが出力されます。
• isOverlayLinkでis--overlayLinkクラス、
  isHiddenLinkでis--hiddenLinkクラスが出力されます。

<p>Lorem ipsum <Link href='###'>link text</Link></p>

<p>Lorem ipsum <a href="###" class="-hov:fade"> link text </a></p>

<Media>

メディア用に少し特殊な処理が加えられているコンポーネントで、<Lism>と同様のPropsを受け取れるほか、以下のような特徴があります。

• デフォルトで<img>タグが出力されます。
• blur,contrast,brightness,grayscale,hueRotate,invert,saturate,sepia, dropShadow を統合し、css.filterに受け渡します。 <Media>には filter を指定しやすくなっていますので、それを活用する例も。
• css.objectFit,css.objectPosition をcssプロパティを介さずにそのまま受け取れます。

↓

例

リサイズ可能

JSX

<Media src='/img/img-2.jpg' alt='' width='960' height='640' />

↓

filter系のプロパティ, objectPositionの指定

リサイズ可能

JSX この書き方と同じ

<Frame tag='figure' ar='16/9' pos='r'>
  <Media contrast={1.1} saturate={0.2} objectPosition='50% 70%' src='/img/img-2.jpg' alt='' width='960' height='640' />
  <Text tag='figcaption' pos='a' z='1' b='0' p='5' w='100%' c='white' ta='c' lts='l'>Lorem ipsum text.</Text>
</Frame>

<Frame tag='figure' ar='16/9' pos='r'>
  <Media css={{filter:'contrast(1.1) saturate(0.2)', objectPosition:'50% 70%'}} src='/img/img-2.jpg' alt='' width='960' height='640' />
  <Text tag='figcaption' pos='a' z='1' b='0' p='5' w='100%' c='white' ta='c' lts='l'>Lorem ipsum text.</Text>
</Frame>

Next.js の<Image>を使う方法

Next.jsのImageは、asに渡すことができます。

import { Media } from '@lism-ui/core';
import Image from 'next/image';

<Media as={Image} src="/img.jpg" alt="" width='960' height='640' />

Astro の<Image>を使う方法

Astroの<Image>は、asに渡すことができません。（Astro の <Image> をasで渡そうとすると、Astro(TypeScript?)のチェックに引っかかり、「Image missing required “alt” property.」エラーが出てしまいます。）

そのため、以下のようにasに'AstroImage'という文字列を指定することで内部で<Image>が呼び出されるようにしています。

import { Media } from '@lism-ui/astro';
import Image from 'next/image';

<Media as='AstroImage' src="/img.jpg" alt="" width='960' height='640' />

<Dummy>

テキスト用にデフォルトで<p>タグが出力されるようになった<Lism>コンポーネントです。
（<Lism tag='p'>のエイリアス）

<Dummy lang='ja' length='xs'>Lorem ipsum text.</Dummy>
<Dummy lang='ja' length='s'>Lorem ipsum text.</Dummy>
<Dummy lang='ja'>Lorem ipsum text.</Dummy>
<Dummy lang='ja' length='l'>Lorem ipsum text.</Dummy>
<Dummy lang='ja' length='xl'>Lorem ipsum text.</Dummy>