无法在Rails 4.2中使用Semantic-UI的"link_to"或"button_to"。

Question

我正在使用Semantic-UI来设计我的Rails应用程序。我创建了一个带有附加在底部的按钮的卡片布局。但是，当我尝试在底部附加的按钮中添加link_to或button_to到我的文本时，一切都变得糟糕。

HTML + Rails 4.2代码：

<div class="ui four cards">
        <a class="red card">
            <div class="image">
                <%= image_tag("white-image.png") %>
            </div>
            <div class="ui bottom attached button">
                <i class="fa fa-cloud-upload"></i><span class="little-space"></span><%= link_to 'Deploy', controller: 'apps', action: 'show'%>

            </div>
        </a>
    </div>

输出：

必须看起来像这样：

---

正常的HTML和CSS可以工作，但当我尝试使用Rails4.2助手程序（如“link_to”或“button_to”）时，一切都变得错误。是否有任何方法可以使用Rails助手程序使整个卡片布局可点击。

---

生成的HTML代码：

<div class="ui four cards">
        <a class="red card">
            <div class="image">
                <img src="/assets/white-image-d3f1bf0d70bdd663809bc001a778b550fc7246e81a614f3ff10e7cfb0a1514cf.png" alt="White image d3f1bf0d70bdd663809bc001a778b550fc7246e81a614f3ff10e7cfb0a1514cf">
            </div>
            </a><div class="ui bottom attached button"><a class="red card">
                <i class="fa fa-cloud-upload"></i><span class="little-space"></span></a><a href="/apps/show">Delpoy</a>

            </div>

    </div>

---

Simple output using HTML and Semantic-UI

<link href="http://semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="http://semantic-ui.com/dist/semantic.min.js"></script>
<div class="ui four cards">
     <a class="red card">
       <div class="image">
        <img class="ui wireframe image" src="http://semantic-ui.com/images/wireframe/white-image.png">
       </div>
       <div class="ui bottom attached button">
          <i class="fa fa-cloud-upload"></i><span class="little-space"></span>Deploy
          
       </div>
      </a>
  </div>

- Shubham Abrol

---

生成的HTML长什么样？请创建一个问题演示。 - m4n0

你尝试过使用link_to的class选项吗？像这样<%= link_to 'Deploy', controller: 'apps', action: 'show', {class: '<css-class>'}%>，就像你说的普通的HTML和CSS一样。 - Vamsi Krishna

我所说的普通HTML和CSS是指我没有使用link_to标签。 - Shubham Abrol

我也尝试过{此处为HTML代码}.html_safe，但输出结果相同。让我尝试您的建议，然后我会通知您。 - Shubham Abrol

我尝试了你的建议，但没有任何反应。相同的输出结果被渲染。 - Shubham Abrol

Answer 1

link_to和button_to都接受一个块，可以用来插入链接/按钮内的任意内容。

<div class="ui four cards">
  <%= link_to({ controller: 'apps', action: 'show' }, { class: "red card" }) do %>
    <div class="image">
      <%= image_tag "white-image.png", class: "ui wireframe image" %>
    </div>
    <div class="ui bottom attached button">
      <i class="fa fa-cloud-upload"></i><span class="little-space"></span>Deploy
    </div>
  <% end %>
</div>

- max

---

太好了！你能告诉我“ui wireframe image”类是干什么的吗？我在Semantic-UI网站上没找到它。 - Shubham Abrol

Answer 2

link_to 可以接受一个块，尝试使用这个方法：

<div class="ui four cards">
    <%= link_to {controller: 'apps', action: 'show'}, {class: "red card"} do %>
        <div class="image">
            <%= image_tag("white-image.png") %>
        </div>
        <div class="ui bottom attached button">
            <i class="fa fa-cloud-upload"></i>
        <span class="little-space"></span>
            Deploy
        </div>
    <% end %>
</div>

- Vamsi Krishna