はじめに
とあるフロントエンドエンジニアのおすすめで、daisyUIを少し触ってみたので導入手順と感想を述べていきます。
導入
公式からコピペで作っていけます
https://daisyui.com/
npm installで準備して進みます
今回はCDNとVue.jsで触ってみました。
CDN
公式のままですが、これだけでいけます。
index.html
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=devide-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/daisyui@2.6.0/dist/full.css"
rel="stylesheet"
type="text/css"
/>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<button class="btn">Hello daisyUI</button>
</body>
</html>
ブラウザ
Vue.js
こちらも公式で公開してるファイルをコピーすればいけます。
Viteで起動していきます。
src/App.vue
<template>
<button class="btn">Hello daisyui</button>
<button class="btn btn-primary">One</button>
<button class="btn btn-secondary">Two</button>
<button class="btn btn-accent btn-outline">Three</button>
<div class="dropdown dropdown-right">
<label tabindex="0" class="btn m-1">Click</label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
</template>
[user@Mac vue]$npm run build
> node-starter@0.0.0 build
> vite build
vite v2.9.6 building for production...
transforming (10) node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js
🌼 daisyUI components 2.14.2 https://github.com/saadeghi/daisyui
✔︎ Including: base, components, themes[29], utilities
✓ 11 modules transformed.
dist/index.html 0.42 KiB
dist/assets/index.71f5a510.css 45.28 KiB / gzip: 7.72 KiB
dist/assets/index.ecd944e3.js 50.84 KiB / gzip: 20.56 KiB
[ziadon@Mac vue]$npm run serve
> node-starter@0.0.0 serve
> vite preview
> Local: http://localhost:4173/
> Network: use `--host` to expose
ブラウザ
各コンポーネントはこちらからコピーするだけで使えます。
おわりに
個人的にはBootstrapに負けないくらい使い勝手の良いものでした。
公式のサンプルコードのわかりやすさも含めると、daisyUIが優ってるかもしれませんね！