Flowbiteとは
Flowbite - Build websites even faster with components on top of Tailwind CSS
Tailwind CSSを駆使して作られたコンポーネント集を公開しているところです。
Tailwind CSS Laravel - Flowbite
LaravelでもTailwind CSSが採用されているので、Flowbiteのコンポーネントを組み込むことができます。
Flowbiteのdropdownコンポーネントとは
Tailwind CSS Dropdown - Flowbite
Javascriptコードの支援を得て、ドロップダウンとしての挙動を実現しています。
「Dropdown example」にある基本的なコードを真似して組み込んでみたら、確かにドロップダウンとして動作します。
困ったこと
1. クリックしたアイテムが何か取得したい
exampleのままだとただ表示するだけなので、リスト中のアイテムをクリックしたらその情報を取得したいです。
まず改変したのは、ここ：
<a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Dashboard</a>
↓
<a href="#" class="dropdown-item inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded" data-id="1" data-name="name">Dashboard</a>
data属性で情報をちりばめておきます。
そして、ページ末尾でJavascriptコードを書きます：
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", (event) => {
const ellist_a = document.querySelectorAll('.dropdown-item');
for (const a of ellist_a) {
a.addEventListener('click', () => {
const hidden_id = document.getElementById('hidden_id');
if (hidden_id) {
hidden_id.value = a.dataset.id;
}
const hidden_name = document.getElementById('hidden_name');
if (hidden_name) {
hidden_name.value = a.dataset.name;
}
})
}
});
</script>
これで隠し要素に値を格納することはできました。
2. クリックしたらリストを閉じたい
さらにJavascriptコードを修正します：
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", (event) => {
const ellist_a = document.querySelectorAll('.dropdown-item');
for (const a of ellist_a) {
a.addEventListener('click', () => {
const triggerEl = document.getElementById("dropdownDefaultButton");
const hidden_id = document.getElementById('hidden_id');
if (hidden_id) {
hidden_id.value = a.dataset.id;
}
const hidden_name = document.getElementById('hidden_name');
if (hidden_name) {
hidden_name.value = a.dataset.name;
}
triggerEl.dispatchEvent(new PointerEvent("click"));
})
}
});
</script>
ドロップダウンを表示するトリガーになってるボタンをクリックしたことにすれば、自動的にドロップダウンリストは隠れて閉じます。