CSSUI

Nuxt.js で CSSUI を使ってみる

CSS だけでモーダルやアコーディオンを実装する CSSUI を試してみる

CSSUI とは

JavaScript なしでインタラクティブなコンポーネントを実装できる CSS フレームワークです。今現在ドキュメントに書かれているコンポーネントは以下になります。(2022/02/15 時点)

  • アコーディオン

  • ドロップダウン

  • モーダル

  • スライドアウト

  • タブ

  • ツールチップ

image1
image2

Nuxt.js で CSSUI を使う方法

  1. ドキュメントにある通りインストールする

  2. nuxt.config.js を以下のように修正する

css: [
'css-ui-lib/cssui.css', <- マストで必要
'css-ui-lib/accordion/accordion.css', <- 使いたい機能の CSS だけ設定する
],

たったこれだけで CSSUI が Nuxt.js で使えるようになります。

あとは、data-accordin-item のように決められたプロパティ名を使うことで JavaScript の実装なしでインタラクティブなコンポーネントを使えます。

<div data-accordion-item>
<input type="checkbox" id="panel-1">
<label for="panel-1" data-accordion-label>
Item Title
</label>
<div data-accordion-panel> </div>
</div>

まだ出たばかりでコンポーネントも少ないので本番で使うには早いと思いますが、個人サイトなどで使ってみるには良いかもです。

Nuxt.js
CSS