🎉
[rails]erbテンプレートにおいて、class属性を動的に変更する方法 (条件により変更する方法)
PFの作品のリファクタリングを行いながら、partialを作成していくが、
そこで当たった問題!!!!!
partialしているコード、一部class与えて、css加えたいけど、他の部分では反映されたくない…
そんな時は条件文を加えて、当てはまる時のみclassを与える方法があった!!!
class属性を動的に変更する方法 (条件により変更する方法)
具体例(今回の状況)
[ 今回の私の出会った例を具体的に話すと... ]
index(一覧)ページでも、show(詳細)ページでも,
部分テンプレとして同じく使っていましたが、問題は…
本文をこのように変える必要があった。
- index: 2行のみ表示
- show: 全文表示
条件によってclassを変更
【もとのコード: _event_card.html.erb 】
<div class="event-card__introduction">
<%= event.event_introduction %>
</div>
ではここを修正します。
ここに
"詳細ページではない場合は、listというクラスをあげる"と条件を与えてあげましょう
変更後のコードは以下のようになります。
<div class="event-card__introduction <%= "list" if isDetail == false %>">
<%= event.event_introduction %>
</div>
class="<%= "クラス名" 条件"%>"
この形で記入を行う。
この場合に当てはまる時のみ、listというクラスが割り当てられるので、
ではそのクラスにcssを当てて,表示を2行のみにしましょう。
当てられたクラスを使用し表示を2行に。cssの記述
css
:
:
&.list {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
line-clamp: 2;
-webkit-box-orient: vertical;
}
:
:
Discussion