13
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ElixirAdvent Calendar 2022

Day 16

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

Last updated at Posted at 2022-06-11

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

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

結論: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を1つ指定する場合。

<%= 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) %>
13
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?