【ActiveAdmin】フォームのタイトル(パネル)部分を色付けする

こんにちは、現役沖縄フリーランスエンジニアのmah（MaLanka）です。

このブログでは、

僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、

ノウハウなどを書いていきます。

今回は、

• 【ActiveAdmin】フォームのタイトル(パネル)部分を色付けする

について書いていきます。

【ActiveAdmin】フォームのタイトル(パネル)部分を色付けする

下記のように、

フォームに項目名だけ載っていても味気ないので、

色付きのタイトルというかパネルっぽいものを付けたい。

結論

panel do〜endブロックを使います。

panel do〜endブロックの中に、

f.inputを入れてあげればOKです。

form do |f|
  panel '次月プラン' do
    f.input :name
    f.input :id
  end
end

するとこんな感じになります。

nameのラベルは、

I18nで翻訳が当たっているので、

「プラン名称」になっています。

（I18nのキーが見つからないと、attributeがそのままラベルとして表示されます。nameの場合はNameのような感じ）

もし、

ラベルをカスタマイズしたいときは、

labelオプションを使います。

f.input :name, label: 'ラベルのカスタマイズ'

また、

panel do〜endブロックはネストできます。

例えば、

下記のようにしてみます。

form do |f|
  panel '【次月分】' do
    panel '次月プラン' do
      f.input :name
      f.input :id
    end
  end
end

するとこうなります。

フォームにまとまりが出来ていい感じになりました。

以上です。

• Forms | ActiveAdmin

activeadmin.info

RailsやRubyを学びたい人へ

RailsやRubyを学びたい人は、

RailsHack(レイルズハック)という、

最近できた新しいプログラミングスクール（今なら通常価格69,800円が、早期割で29,800円！）か、

Udemy で下記のコースを受講すると良いです★

✅1. フルスタックエンジニアが教える 即戦力Railsエンジニア養成講座

✅2. 【はむ式】ハンズオンで学ぶRuby on Rails 6【Dockerにも触れられる】 <- おすすめ。ハムさんはReactやTypeScriptの教材も非常に丁寧。

✅3. はじめてのRuby on Rails入門-RubyとRailsを基礎から学びWebアプリケーションをネットに公開しよう

また、

Udemy は定期的にセールをやっていますし（90%OFFとかもザラ）、

「30日間なら返金できる」ので、

満足できなかった時でも安心です。

【公式】RailsHack(レイルズハック)

【公式】Udemyで学んでみる