🎉

[rails]erbテンプレートにおいて、class属性を動的に変更する方法 (条件により変更する方法)

2023/03/24に公開

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