Thêm một lớp CSS vào <% = f.submit%>


Câu trả lời:


352
<%= f.submit 'name of button here', :class => 'submit_class_name_here' %>

Điều này nên làm. Nếu bạn gặp lỗi, rất có thể bạn không cung cấp tên.

Ngoài ra, bạn có thể tạo kiểu cho nút mà không cần lớp:

form#form_id_here input[type=submit]

Hãy thử điều đó, là tốt.


Thông minh! Cảm ơn bạn Srdjan. Một chút tò mò - Tôi đã thử sử dụng disable_withcác nút gửi này nhưng chúng dường như không bao giờ hoạt động. Có một lý do tại sao mà bạn biết? +1
sscirrus

3
Thử với hàm băm cho các tùy chọn: {: class => 'class_name' ,: vô hiệu hóa => 'Chỉnh sửa ...'}. Điều này sẽ đi sau tên nút. Nó nên hoạt động, hoặc ít nhất là nó được ghi nhận như vậy.
Srdjan Pejic

3
Lưu ý rằng bạn cần truyền một chuỗi rõ ràng ('tên của nút ở đây') làm đối số đầu tiên submitđể sử dụng hàm băm: class như trong câu trả lời ở trên. Nếu bạn không có chuỗi đó, bạn sẽ nhận được thông báo lỗi.
thewillcole

7
thêm lớp mà không xóa câu trả lời giá trị mặc định tại đây stackoverflow.com/questions/8811254/
Naoise Golden

<%= form.submit :class => 'class_name' %>hoạt động, nếu bạn không muốn sử dụng tên.

141

Bạn có thể thêm một khai báo lớp vào nút gửi biểu mẫu bằng cách làm như sau:

<%= f.submit class: 'btn btn-default' %> <- Lưu ý: không có dấu phẩy!

Nếu bạn đang thay đổi một phần _ form.html.erb của một giàn giáo và bạn muốn giữ thay đổi động của tên nút giữa các hành động của bộ điều khiển, KHÔNG chỉ định tên 'name'.

Nếu không chỉ định tên và tùy thuộc vào hành động, biểu mẫu được hiển thị, nút sẽ nhận được .class = "btn btn-default"(lớp Bootstrap) (hoặc bất cứ điều gì .classbạn chỉ định) với các tên sau:

  • Cập nhật model_name

  • Tạo model_name
    (trong đó model_name tên của mô hình của giàn giáo)


13
Mặc dù có ít phiếu hơn câu trả lời được chọn, đây là giải pháp mà hầu hết mọi người sẽ muốn sử dụng.
IAmNaN

3
Đây là những gì tôi đã cố gắng tìm kiếm
Sandeep Garg

1
Hữu ích và cho phép thêm thuộc tính HTML ("id" hoặc "class", như trong ví dụ) mà không thay đổi văn bản nút mặc định do Rails tạo.
TK-421

1
IMO đây là câu trả lời tốt nhất vì nó bảo toàn hành vi gán văn bản động cho nút ("Tạo" hoặc "Cập nhật") dựa trên hành động của bộ điều khiển
Sixty4bit

Chắc chắn như @ sixty4bit đã nói. Nên đặt văn bản nút trong các tệp dịch, để biểu mẫu có thể được sử dụng lại qua các hành động của bộ điều khiển khác nhau, tức là 'tạo bình luận' so với 'cập nhật bình luận'. Xem câu trả lời này - stackoverflow.com/a/18255633/5355691
Jarvis Johnson

26

Nút "chính" của Rails 4 và Bootstrap 3

<%= f.submit nil, :class => 'btn btn-primary' %>

Mang lại một cái gì đó như:

màn hình-2014-01-22_02.24.26.png


2
Điều này thực sự tốt nhất vì chỉ định niltên vẫn giữ hành vi mặc định của người trợ giúp trong đó, nếu nó tìm thấy một biến đối tượng cho đối tượng được tạo / hiển thị, chẳng hạn như @person, nó sẽ đặt tên cho nút tương ứng (Cập nhật Foo hoặc Tạo Foo) và cả form_forFormBuilder chọn hành động đúng. Vì vậy, theo cách này, bạn có thể trích xuất mã biểu mẫu thành một phần và sử dụng nó để hiển thị đối tượng mô hình (nếu bạn muốn sử dụng một biểu mẫu để hiển thị nó), cập nhật nó và tạo một thể hiện mới.
Paul-Sebastian Manole

13

Như Srdjan Pejic nói, bạn có thể sử dụng

<%= f.submit 'name', :class => 'button' %>

hoặc cú pháp mới sẽ là:

<%= f.submit 'name', class: 'button' %>

9

Giải pháp khi sử dụng form_with helper

Đối với những người sử dụng Rails 5.2 , với trình form_withtrợ giúp: không thêm dấu phẩy !

<%= f.submit class: 'btn btn-primary' %>

Ảnh chụp màn hình không có dấu phẩy

HTH!


2

Theo mặc định, Rails 4 sử dụng thuộc tính 'value' để điều khiển văn bản nút hiển thị, vì vậy để giữ cho đánh dấu sạch sẽ tôi sẽ sử dụng

<%= f.submit :value => "Visible Button Text", :class => 'class_name' %>

0

cả hai đều hoạt động <%= f.submit class: "btn btn-primary" %><%= f.submit "Name of Button", class: "btn btn-primary "%>

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.