UI コンポーネントの使い方

@lism-css/ui は、アコーディオン・タブ・ボタンなど、よく使う部品（UI コンポーネント）をまとめたパッケージです。Lism CSS 本体（lism-css）とは別に配られています。このページでは、どの部品にも共通する読み込み方を説明します。

何が入っているか#

@lism-css/ui には、部品ごとに次の3つが入っています。

部品のクラスは b-- で始まります。b-- は block（ひとまとまりの部品）の意味です。

入れ方#

npm（JavaScript の部品を入れる道具）を使うサイトでは、パッケージ @lism-css/ui を入れます。

npm i @lism-css/ui

pnpm を使うときは次のとおりです。

pnpm add @lism-css/ui

@lism-css/ui は lism-css を土台にしています。Lism CSS 本体の入れ方は 読み込み方（インストール） を見てください。

React・Astro で読み込む#

部品ごとに、決まった場所から読み込みます。React は @lism-css/ui/react/部品名、Astro は @lism-css/ui/astro/部品名 です。

import { Callout } from '@lism-css/ui/react/Callout';

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

HTML だけで使う#

コンポーネントを使わず、HTML にクラスを書いて使うこともできます。そのときは、部品の見た目の CSS を <link> で読み込みます。

<link href="https://cdn.jsdelivr.net/npm/@lism-css/ui@0.40.1/dist/style.css" rel="stylesheet" />

開け閉めなど動きのある部品は、CSS だけでは動きません。部品ごとのスクリプトも読み込みます。たとえば Tabs と Modal は次のとおりです。

<script type="module" src="https://cdn.jsdelivr.net/npm/@lism-css/ui@0.40.1/dist/scripts/tabs.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@lism-css/ui@0.40.1/dist/scripts/modal.js"></script>

スクリプトが要るのは、Accordion（accordion.js）・Modal（modal.js）・Tabs（tabs.js）・Tooltip（tooltip.js）です。

部品の見た目は lism-block のレイヤーにある#

どの部品も、見た目の CSS は @layer lism-block の中に書かれています。@layer（レイヤー）は、CSS の強さの順番をグループで決めるしくみです。

@layer lism-base, lism-block;
@layer lism-block {
  .b--callout {
    /* 部品の見た目 */
  }
}

lism-block は弱い順番のレイヤーです。そのため、あとから足した l--・is-- などのクラスや Property Class（-p:20 など）が、部品の見た目より必ず勝ちます。余白や色を変えたいときは、部品のクラスにそのまま足します。レイヤーの順番は CSS のレイヤーと強さの順番 で説明しています。

部品の一覧#

関連するページ#

• 読み込み方（インストール）：Lism CSS 本体を読み込む
• Lism コンポーネント（React・Astro）：本体のコンポーネント
• CSS のレイヤーと強さの順番：@layer のしくみ