Rails：带有button_to的按钮组

Question

我在 Rails 应用程序中使用 Bootstrap，我想创建一个按钮组，其中包含使用

<%=button_to%>

生成的按钮。

这就是我所拥有的：

  <div class="btn-group icons">
      <%= button_to(raw("<i class='icon-undo'></i>"), project_steps_path(@project), :method=>:post, :class=> "btn undoIcon disabled", :title=>"undo" )%>
      <button class="btn reorderIcon" title="reorder steps"><%=image_tag("icons/reorder_icon.png")%></button>
      <button class="btn expandIcon" title="expand"><i class="icon-fullscreen"></i></button>
  </div>

我期望

<%= button_to%>

在 html 中生成类似

<button class=...>

的内容，但我得到了以下内容：

<div class="btn-group icons">
      <form action="/projects/18/steps" class="button_to" method="post"><div><input class="btn undoIcon disabled" title="undo" type="submit" value="&lt;i class='icon-undo'&gt;&lt;/i&gt;"><input name="authenticity_token" type="hidden" value="waRzPnaIUfWBt+sAAQR5STOnilLXhirOx/GaE1i1kFI="></div></form>
      <button class="btn reorderIcon" title="reorder steps"><img alt="Reorder_icon" src="/assets/icons/reorder_icon.png"></button>
      <button class="btn expandIcon" title="expand"><i class="icon-fullscreen"></i></button>
</div>

这会在我的页面上产生以下内容：

如何正确使用

<%=button_to raw()%>

创建按钮？

Answer 1

我通过将

button_to

替换为

link_to

解决了这个问题

Answer 2

你需要一点CSS。这就是我所做的：

<div class='btn-group form-btn-group'>
  <%= button_to 'btn1', '#', class: 'btn', form_class: 'btn btn-default' %>
  <%= button_to 'btn2', '#', class: 'btn', form_class: 'btn btn-default' %>
</div>

还有 CSS：

• <form>

  元素需要

  .btn

  类，但应为实际的

  <button>

留出空间
• 取消

  <button>

  元素的样式

.form-btn-group > .btn {
  padding: 0;
}
.form-btn-group > .btn > .btn {
  border: none;
  background: none;
}

Answer 3

在Rails 7和bootstrap 5.3上遇到问题，我尝试了@jibai31的解决方案。我尝试尽可能简洁：

.btn-group.btn-form-group{ role: 'group', 'aria-label': 'Actions on my resource' }
  = link_to anc, class: 'btn btn-primary' do
    = bi_icon('eyeglasses')
  = link_to edit_anc_path(anc), class: 'btn btn-primary' do
    = bi_icon('pencil-square')
  = button_to anc, action: :delete, method: :delete, data: { turbo_method: :delete, turbo_confirm: t('confirm', scope: 'common') }, form_class: 'btn btn-primary', class: 'btn btn-primary' do
    = bi_icon('trash3')

请注意，使用

data: turbo_*

来替换 Rails-ujs

data: confirm

并不开箱即用，因为您需要在最新的 Rails 版本中自行安装它。有关确认的更准确信息，请参阅此处。