我想將以下代碼片段中的 Bulma 樣式用于檔案上傳按鈕：
<div class="file">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>但是，由于我使用的是 Rails 表單，所以我用于檔案提交按鈕的代碼如下：
<div class="column">
<%= label_tag :sample_file, 'Sample file' %>
<%= file_field_tag :sample_file %>
</div>我正在嘗試將 Bulma 樣式應用于此標簽，它通常適用于按鈕，因為我可以簡單地重用 Bulma 類標簽并將其添加到 Rails 表單片段（即，這適用于提交標簽）。但是，對于某些 UI 元素，它只是不呈現。有誰知道我如何將這些更復雜的樣式應用于 Rails 標簽？
謝謝！
uj5u.com熱心網友回復：
如果將所有 Bulma 標記放在您的視圖中確實讓您感到困擾。你可以做一個助手：
<div class="column">
<%= bulma_file_field_tag :sample_file, "Voters file" %>
</div>
并將所有 Bulma 標記放入助手中
# in app/helpers/application_helper.rb
module ApplicationHelper
def bulma_file_field_tag(name, label)
<<-TAG.html_safe
<div >
<label >
<input type="file" name="#{name}">
<span >
<span >
<i ></i>
</span>
<span >
#{label}
</span>
</span>
</label>
</div>
TAG
end
uj5u.com熱心網友回復：
您可以name為您的輸入和標簽文本指定
并使用沒有任何 rails helper 的純 HTML
<div class="file">
<label class="file-label">
<input class="file-input" type="file" name="sample_file"> <!-- name here -->
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Voters file <!-- text here -->
</span>
</span>
</label>
</div>
而已
uj5u.com熱心網友回復：
大多數帶有內容的標簽的標簽助手都接受一個可選塊：
<%= label_tag :sample_file, 'Voters file', class: "file-label" do %>
<!-- this will be the content of the label element -->
<% end %>
盡管在這種情況下，您甚至使用標簽助手的原因是有問題的——您沒有使用 FormBuilder，因此它不提供任何型別的功能，而簡單的文字 HTML 標簽可以完成完全相同的作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/505027.html