Phoenix.HTML.Form、Phoenix.LiveView.Helpersにclassを指定する

Phoenix.HTML.Form、Phoenix.LiveView.Helpersにclassを任意の引数として指定する例をいくつか。

tailwind css、daisyUIをPhoenixアプリに追加したとき、classの指定のやり方が分からなかったので備忘録

結論：optsにclassを指定するとよい

Phoenix.HTML.Form.htmlやPhoenix.LiveView.Helpers.htmlで各フォームヘルパーの関数が紹介されています。

text_input(form, field, opts \ [])

であれば、optにあたる引数にclassを渡してあげればよいです。

以下、いくつか例を紹介していきます。

Phoenix.HTML.Form

text_input(form, field, opts \ [])

classを１つ指定する場合。

<%= text_input f, :display_name, class: "input") %>

classを複数渡す場合は文字列のリストで渡します。
他のフォームヘルパーも同様です。

<%= text_input f, :display_name, class: ~w(input input-bordered input-accent) %>

textarea(form, field, opts \ [])

<%= textarea f, :message, class: ~w(textarea textarea-accent w-10/12) %>

submit(value, opts \ [])

<%= submit "感想を投稿", class: ~w(btn btn-success) %>

Phoenix.LiveView.Helpers

live_patch(text, opts)

<%= live_patch "感想を投稿する", to: Routes.message_index_path(@socket, :new), class: ~w(btn btn-success) %>