スリ飯屋MaLankaのフリーエンジニアな日々

IT実務未経験から約1年、東京でフリーランスのRuby on Railsエンジニアに転職。約2年半、大阪中崎町でスリランカカレーの間借りしてました。フリーランスエンジニアになるためのノウハウ、スリランカの事を発信していきます。

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


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




今すぐ登録したい方へ


このブログから登録の多いエージェントは下記の3つです★

(リンクをクリックすると公式サイトに飛びます)

【ダントツの1番人気】フォスターフリーランス【案件保有数5000件以上。業界25年の超老舗】

【僅差で2位】エミリーエンジニア【4人に1人が初めてのフリーランス】

【惜しくも3位】レバテックフリーランス【業界最大手。素早く手厚いフォローで案件参画】




こんにちは、mahです。


このブログでは、

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

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


今回は、


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


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




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



下記のように、

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

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


f:id:mah666hhh:20201107111002p:plain




結論


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


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

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


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


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

f:id:mah666hhh:20201107111535p:plain


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


するとこうなります。


f:id:mah666hhh:20201107111223p:plain




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




以上です。


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日間なら返金できる」ので、

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


f:id:mah666hhh:20201129193352p:plain


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

【公式】Udemyで学んでみる




最後に


下記の表に、

フリーランスエンジニア向けの人気エージェントをまとめてみました。


エージェント選びで悩んでいる方は是非参考にしてみてくださいね★





あわせて読みたい


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech




最後までお読み頂きありがとうございました★

もしよかったらTwiiterのフォローもお願いします★