Nuxt.js で CSSUI を使ってみる
CSS だけでモーダルやアコーディオンを実装する CSSUI を試してみる
CSSUI とは
JavaScript なしでインタラクティブなコンポーネントを実装できる CSS フレームワークです。今現在ドキュメントに書かれているコンポーネントは以下になります。(2022/02/15 時点)
アコーディオン
ドロップダウン
モーダル
スライドアウト
タブ
ツールチップ
Nuxt.js で CSSUI を使う方法
ドキュメントにある通りインストールする
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>
まだ出たばかりでコンポーネントも少ないので本番で使うには早いと思いますが、個人サイトなどで使ってみるには良いかもです。