💨
Tailwind CSSだけで作る<dialog>
Headless UIやReactを入れるのが面倒だったので、
Tailwind CSSとVanilla JSだけでダイアログを作った
素の<dialog>っぽさを消して、シャドウを当てたりもできる
タッチデバイス向けに、backdrop（ダイアログの外側）をクリックしたら閉じるようにしてある
const dialogContentElement = document.createElement("div");
dialogContentElement.classList.add("p-4");
dialogContentElement.addEventListener("click", (event) => {
event.stopPropagation();
});
dialogContentElement.append(/* ダイアログ内のコンテンツ */);
const dialogElement = document.createElement("dialog");
dialogElement.classList.add("rounded-lg", "shadow-xl");
// backdropをクリックしたら閉じる
dialogElement.addEventListener("click", () => {
dialogElement.close();
});
dialogElement.append(dialogContentElement);
const buttonElement = document.createElement("button");
buttonElement.textContent = "Open";
buttonElement.addEventListener("click", () => {
dialogElement.showModal();
});
document.body.append(buttonElement, dialogElement);
素のJavaScriptやHTML/CSSでもけっこう個人開発できる
GitHubの草をOrganizationごとに色分けして見る
Discussion