0

content_for?Ruby on Rails 3を使用しています。適切なCSSプロパティを持つHTMLコードを「条件付きで」生成するために、メソッドを使用してレイアウトをレンダリングしたいと思います。つまり、次の機能を備えたレイアウトを実装したいと思います。

  • content_for左側の列が存在する場合、レイアウトには2つの列があります（固定幅の左側の列と残りの幅のコンテンツ列）。
  • content_for左側の列が存在しない場合、レイアウトには1つの列（全幅のコンテンツ列）があります。

どうすれば/app/views/layouts/application.html.erbファイル内に実装できますか？アドバイスはありますか？

注：うまくいけば、レイアウトのサンプル実装（Ruby on Railsメソッド、HTMLおよびCSSコードも含む）を探しています。

ボーナス：コンテンツ列ブロック内に、右の列が存在する場合、「条件付きで」右の列を表示したいと思います。content_for

4

2 に答える 2

0

指定された引数に対してコンテンツが生成されたかどうかcontent_for?を返すcheck が必要になる場合があります。true見るcontent_for?

于 2012-09-17T21:07:59.943 に答える
0

隣接する ( +) または後続の ( ~) 兄弟セレクターを使用して、左側の列が表示されるかどうかに基づいてコンテンツ列に条件付きで余白を適用できます。

おまけの質問では、 content 列の内容を内側のラップ div 内に配置し、 を使用し:nth-last-childて右側の列が表示されているかどうかを確認し、条件付きでそこにもマージンを適用する必要があります。

CSS :

.page {
  position: relative;
}

.page .left-column {
  background: lavender;
  left: 0;
  position: absolute;
  top: 0;
  width: 180px;
}

.page .content-column { background: orange; }

.page .content-column > .inner-wrap { background: rgba(255,255,255,0.3); }

.page .left-column + .content-column {
  margin-left: 200px;
}

.page .content-column .right-column {
  background: lime; 
  position: absolute;
  right: 0;
  top: 0;
  width: 90px;
}

.page .content-column > .inner-wrap:nth-last-child(2) {
  margin-right: 100px;
}

HTML :

<div class="page">

  <% if content_for?(:left_column) %>
    <div class="left-column">
      <%= yield(:left_column) %>
    </div>
  <% end %>

  <div class="content-column">
    <div class="inner-wrap">
      <%= yield(:content_column) %>
    </div>

    <% if content_for?(:right_column) %>
      <div class="right-column">
        <%= yield(:right_column) %>
      </div> 
    <% end %>          
  </div>

</div>

レンダリングされたレイアウトのプレビュー: http://jsbin.com/icurey/8/edit

于 2012-09-17T21:55:24.617 に答える