「TailwindCSSで階層型のホバーメニューを実現する」の２回目です。今回は実際にPhoenixプロジェクトを作成して、その中から使ってみます。メニューについては、HTMLで直接構築するのではなく、階層型のデータをメニューに変換する形で実現します。
はじめに 「TailwindCSSで階層型のホバーメニューを実現する」の２回目です。 今回は実際にPhoenixプロジェクトを作成して、その中から使ってみます。 メニューについては、HTMLで直接構築するのではなく、階層型のデータをメニューに変換する形で実現します。 今から…
TailwondCSSのみで階層型のホバーメニューを作成します。最小構成での動作確認から始まって、プラグインを作成し、TailwindCSSを高度にカスタマイズするところまでを紹介します。
はじめに TailwindCSSのみを使用したホバータイプのドロップダウンメニューを作成します。 以前の記事では、クリックによって表示非表示が切り替わるドロップダウンメニューを紹介しました。 今回は、CSSのみで実現するホバーメニューに対して以下の点に焦点をあてて記述してい…
Phoenixプロジェクトに、TailwindCSSを適用した例を紹介します。公式ページのスクリーンキャストでのコードを使用し、Vueで記述されている部分をPhoenix.LiveViewで記述し直しています。
はじめに Phoenixプロジェクトに、TailwindCSSを適用した例を紹介します。 この記事では以下ついて記載しています。 Phoenix プロジェクトへの TailwindCSS の追加方法 Vue で作られた実装例を Phoenix.LiveView を用いて Pho…