Dodaj klasę CSS do <% = f.submit%>

Odpowiedzi:

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

To powinno wystarczyć. Jeśli pojawia się błąd, prawdopodobnie nie podajesz nazwy.

Alternatywnie możesz stylizować przycisk bez klasy:

form#form_id_here input[type=submit]

Spróbuj również.

Srdjan Pejic
źródło
Doskonały! Dziękuję Srdjan. Jedna mała ciekawostka - próbowałem użyć disable_withtych przycisków przesyłania, ale nigdy nie działają. Czy istnieje powód, dla którego o tym wiesz? +1
sscirrus
3
Spróbuj użyć skrótu dla opcji: {: class => 'class_name',: disable_with => 'Editing ...'}. To będzie po nazwie przycisku. Powinien działać, a przynajmniej tak jest udokumentowane.
Srdjan Pejic
3
Zauważ, że musisz jawnie przekazać ciąg („nazwa przycisku tutaj”) jako pierwszy argument submit, aby użyć skrótu: class jak w powyższej odpowiedzi. Jeśli nie masz tego ciągu, pojawi się komunikat o błędzie.
thewillcole
7
dodaj klasę bez usuwania wartości domyślnej odpowiedz tutaj stackoverflow.com/questions/8811254/…
Naoise Golden
<%= form.submit :class => 'class_name' %>działa, jeśli nie chcesz używać nazwy.
141

Możesz dodać deklarację klasy do przycisku przesyłania formularza, wykonując następujące czynności:

<%= f.submit class: 'btn btn-default' %> <- Uwaga: nie ma przecinka!

Jeśli zmieniasz część _ form.html.erb części rusztowania i chcesz zachować dynamiczną zmianę nazwy przycisku między czynnościami kontrolera, NIE określaj nazwy 'name'.

Bez podania nazwy i w zależności od akcji formularz zostanie wyświetlony, przycisk otrzyma .class = "btn btn-default"(klasę Bootstrap) (lub cokolwiek .classpodasz) o następujących nazwach:

  • Zaktualizuj nazwę modelu

  • Utwórz nazwa_modelu
    (gdzie nazwa_modelu nazwa modelu rusztowania)

aloucas
źródło
13
Pomimo mniejszej liczby głosów niż wybrana odpowiedź, jest to rozwiązanie, z którego większość osób będzie chciała skorzystać.
IAmNaN
3
Właśnie to próbowałem znaleźć
Sandeep Garg
1
Przydatne i pozwala na dodanie atrybutu HTML („id” lub „class” jak w przykładzie) bez zmiany domyślnego tekstu przycisku generowanego przez Railsy.
TK-421,
1
IMO to najlepsza odpowiedź, ponieważ zachowuje zachowanie dynamicznego przypisywania tekstu do przycisku („Utwórz” lub „Aktualizuj”) na podstawie akcji kontrolera
sześćdziesiąt4bit
Zdecydowanie jak powiedział @ sixty4bit. Należy ustawić tekst przycisku w plikach tłumaczeń, aby formularz mógł być ponownie użyty w różnych działaniach kontrolera, tj. „Stwórz komentarz” a „aktualizuj komentarz”. Zobacz tę odpowiedź - stackoverflow.com/a/18255633/5355691
Jarvis Johnson
26

Przycisk „podstawowy” w Rails 4 i Bootstrap 3

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

Daje coś takiego:

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

cwd
źródło
2
Jest to w rzeczywistości najlepsze, ponieważ określenie nilnazwy zachowuje domyślne zachowanie pomocnika, w przypadku którego, jeśli znajdzie zmienną instancji dla tworzonego / wyświetlanego obiektu, na przykład odpowiednio @personzmieni nazwę przycisku (Aktualizuj Foo lub Utwórz Foo), a także form_forFormBuilder wybiera właściwą akcję. W ten sposób możesz wyodrębnić kod formularza do częściowego i użyć go do wyświetlenia obiektu modelu (jeśli chcesz użyć formularza do wyświetlenia), zaktualizuj go i utwórz także nową instancję.
Paul-Sebastian Manole,
13

Jak mówi Srdjan Pejic, możesz używać 

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

lub nowa składnia, która byłaby:

<%= f.submit 'name', class: 'button' %>
RailsZilla.com
źródło
9

Rozwiązanie przy korzystaniu z form_with helper

Dla tych, którzy używają Rails 5.2 z form_withpomocnikiem: nie dodawaj przecinka !

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

Zrzut ekranu bez przecinka

HTH!

BKSpurgeon
źródło
2

Domyślnie Railsy 4 używają atrybutu „wartość” do kontrolowania widocznego tekstu przycisku, więc aby utrzymać znaczniki w czystości, użyłbym

<%= f.submit :value => "Visible Button Text", :class => 'class_name' %>
benjamin.patch
źródło
0

oba działają <%= f.submit class: "btn btn-primary" %>i <%= f.submit "Name of Button", class: "btn btn-primary "%>

gsumk
źródło