Tambahkan kelas CSS ke <% = f.submit%>


Jawaban:


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

Ini harus dilakukan. Jika Anda mendapatkan kesalahan, kemungkinan besar Anda tidak memberikan nama.

Atau, Anda dapat menata tombol tanpa kelas:

form#form_id_here input[type=submit]

Coba itu juga.


Luar biasa! Terima kasih Srdjan. Satu rasa ingin tahu kecil - Saya sudah mencoba menggunakan disable_withpada tombol kirim ini tetapi mereka sepertinya tidak pernah berhasil. Apakah ada alasan mengapa Anda tahu itu? +1
sscirrus

3
Coba dengan hash untuk opsi: {: class => 'class_name',: disable_with => 'Editing ...'}. Ini akan mengikuti nama tombol. Itu harus bekerja, atau setidaknya didokumentasikan seperti itu.
Srdjan Pejic

3
Perhatikan bahwa Anda perlu secara eksplisit melewatkan string ('nama tombol di sini') sebagai argumen pertama submituntuk menggunakan: hash kelas seperti pada jawaban di atas. Jika Anda tidak memiliki string itu, Anda akan mendapatkan pesan kesalahan.
thewillcole

7
tambahkan kelas tanpa menghapus jawaban nilai default di sini stackoverflow.com/questions/8811254/...
Naoise Golden

<%= form.submit :class => 'class_name' %>berfungsi, jika Anda tidak ingin menggunakan nama.

141

Anda bisa menambahkan deklarasi kelas ke tombol kirim formulir dengan melakukan hal berikut:

<%= f.submit class: 'btn btn-default' %> <- Catatan: tidak ada koma!

Jika Anda mengubah parsial _ form.html.erb dari perancah dan Anda ingin menyimpan perubahan dinamis dari nama tombol di antara tindakan pengontrol, JANGAN tentukan nama 'name'.

Tanpa menentukan nama dan tergantung pada tindakan, formulir yang diberikan tombol akan mendapatkan .class = "btn btn-default"(kelas Bootstrap) (atau apa pun yang .classAnda tentukan) dengan nama-nama berikut:

  • Perbarui model_name

  • Buat model_name
    (di mana model_name nama model scaffold)


13
Meskipun memiliki lebih sedikit suara daripada jawaban yang dipilih, ini adalah solusi yang kebanyakan orang ingin gunakan.
IAmNaN

3
Inilah yang saya coba temukan
Sandeep Garg

1
Berguna, dan memungkinkan menambahkan atribut HTML ("id" atau "class," seperti dalam contoh) tanpa mengubah teks tombol bawaan yang dihasilkan Rails.
TK-421

1
IMO ini adalah jawaban terbaik karena mempertahankan perilaku menugaskan teks secara dinamis ke tombol ("Buat" atau "Pembaruan") berdasarkan pada tindakan pengontrol
sixty4bit

Jelas seperti yang dikatakan @ sixty4bit. Seharusnya mengatur tombol teks dalam file terjemahan, sehingga formulir dapat digunakan kembali di berbagai tindakan pengontrol, yaitu 'buat komentar' vs 'perbarui komentar'. Lihat jawaban ini - stackoverflow.com/a/18255633/5355691
Jarvis Johnson

26

Tombol Rails 4 dan Bootstrap 3 "primer"

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

Menghasilkan sesuatu seperti:

screen-2014-01-22_02.24.26.png


2
Ini sebenarnya yang terbaik karena menentukan niluntuk nama mempertahankan perilaku default helper di mana, jika ia menemukan variabel instan untuk objek yang sedang dibuat / ditampilkan, seperti @person, itu akan memberi nama tombol yang sesuai (Perbarui Foo atau Buat Foo) dan jugaform_for FormBuilder memilih tindakan yang benar. Jadi dengan cara ini Anda bisa mengekstrak kode formulir menjadi parsial dan menggunakannya untuk menampilkan objek model (jika Anda ingin menggunakan formulir untuk menampilkannya), perbarui dan buat instance baru juga.
Paul-Sebastian Manole

13

Seperti yang dikatakan Srdjan Pejic, Anda dapat menggunakan

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

atau sintaks baru yang akan menjadi:

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

9

Solusi Saat Menggunakan helper form_with

Bagi yang menggunakan Rails 5.2 the with form_withhelper: jangan tambahkan koma !

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

Tangkapan layar tanpa koma

HTH!


2

Secara default, Rails 4 menggunakan atribut 'nilai' untuk mengontrol teks tombol yang terlihat, jadi untuk menjaga markup tetap bersih saya akan menggunakan

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

0

keduanya bekerja <%= f.submit class: "btn btn-primary" %>dan <%= f.submit "Name of Button", class: "btn btn-primary "%>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.