css上で動的に値の変更はできないけどhtmlに書けばできる
cssに設定する値を動的に変更するとかできないのか?なんて思ったことないでしょうか?
例えば、
- ユーザー毎にボタンの色や背景色などを変更したい!
- 条件に応じてbackgroundに画像を入れたり、差し替えたりしたい!
結論から言うとできます!
ただcssでは出来ないのでhtmlにstyle属性を指定してcssを書き込めばokです!
今回はナビゲーションバーにある予約ボタンをユーザー毎に変更する例です。
model
前提としてユーザー = userモデルがあり、そこにカラーコードが設定されているとします。
id | name | color | created_at | updated_at |
---|---|---|---|---|
1 | opiyo | 30a8b5 | ||
2 | kuma | 000 | ||
3 | fuzo | fff |
シンプルな使い方
view
haml
.event__nav = link_to '予約', '#', style: "background-color: ##{user.color}"
html
<div class="event__nav"> <a style="background-color: #30a8b5" href="#">予約</a> </div>
条件がいっぱいあるときの使い方
view
haml
.event__nav = link_to '予約', '#', style: event_nav_btn_style(user)"
link_toは第三引数にstyle属性を使えば、htmlに直接cssの設定ができます。
html
<div class="event__nav"> <a style="background-color: #30a8b5" href="#">予約</a> </div>
helper
条件が多かったりする場合はhtmlからhelperメソッドを呼び出して上げればokです!
def event_nav_btn_style(user) if user.name == 'hogehogehoge' return 'background-color: #FF7A00;' elsif user.name == 'piyopiyopiyo' return "background-color: ##{user.color};" else return 'background-color: black;' end end