はじめに
前回の記事にて、
もちろんこのままだと味気ないので、実際にはclassを設定したり、他のメソッドを使用することになります
と書きました。
本記事では、そのclassを設定する
の部分を実行しようと思います。
実行
前回使用したコードを改良しようと思います。今の所、コードは下記の通りです。
- @products.each do |product|
= product.name
= product.price
= image_tag(product.image)
まずは、name
,price
,image
をひとまとめにするクラスを作ります。
index.html.haml
- @products.each do |product|
.product
= product.name
= product.price
= image_tag(product.image)
これで、テーブルに登録してあるだけの、name,price,image
の3要素を持ったproduct
classのオブジェクトが作られます。
この状態では、name
とprice
でフォントを変えたり、image
の大きさを変更したり、といったことが難しいので、要素毎にclassを設定します。
index.html.haml
- @products.each do |product|
.product
= product.name, class: "product__name"
= product.price, class: "product__price"
= image_tag(product.image, class: "product__image")