Fügen Sie <% = f.submit%> eine CSS-Klasse hinzu


Antworten:


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

Das sollte reichen. Wenn Sie eine Fehlermeldung erhalten, geben Sie möglicherweise den Namen nicht an.

Alternativ können Sie die Schaltfläche auch ohne Klasse formatieren:

form#form_id_here input[type=submit]

Versuchen Sie das auch.


Ausgezeichnet! Vielen Dank, Srdjan. Eine kleine Kuriosität - Ich habe versucht, disable_withdiese Senden-Schaltflächen zu verwenden, aber sie scheinen nie zu funktionieren. Gibt es einen Grund, warum Sie das wissen? +1
sscirrus

3
Versuchen Sie es mit einem Hash für die Optionen: {: class => 'class_name' ,: disable_with => 'Editing ...'}. Dies wird nach dem Namen der Schaltfläche gehen. Es sollte funktionieren, oder zumindest ist es so dokumentiert.
Srdjan Pejic

3
Beachten Sie, dass Sie als erstes Argument explizit eine Zeichenfolge ('Name der Schaltfläche hier') übergeben submitmüssen, um den Hash der Klasse: wie in der obigen Antwort zu verwenden. Wenn Sie diese Zeichenfolge nicht haben, wird eine Fehlermeldung angezeigt.
Thewillcole

7
Klasse hinzufügen, ohne Standardwert zu entfernen Antwort hier stackoverflow.com/questions/8811254/…
Naoise Golden

<%= form.submit :class => 'class_name' %>funktioniert, wenn Sie keinen Namen verwenden möchten.

141

Sie können der Senden-Schaltfläche eines Formulars eine Klassendeklaration hinzufügen, indem Sie folgende Schritte ausführen:

<%= f.submit class: 'btn btn-default' %> <- Hinweis: Es gibt kein Komma!

Wenn Sie einen _ form.html.erb- Teil eines Gerüsts ändern und die dynamische Änderung des Schaltflächennamens zwischen Controller-Aktionen beibehalten möchten, geben Sie KEINEN Namen an 'name'.

Ohne Angabe eines Namens und abhängig von der Aktion, mit der das Formular gerendert wird, erhält die Schaltfläche die .class = "btn btn-default"(Bootstrap-Klasse) (oder was auch immer .classSie angeben) mit den folgenden Namen:

  • Modellname aktualisieren

  • Modellname erstellen
    (wobei Modellname der Name des Gerüstmodells ist)


13
Trotz weniger Stimmen als die ausgewählte Antwort ist dies die Lösung, die die meisten Menschen verwenden möchten.
IAmNaN

3
Dies ist, was ich versucht habe zu finden
Sandeep Garg

1
Nützlich und ermöglicht das Hinzufügen eines HTML-Attributs ("id" oder "class" wie im Beispiel), ohne den standardmäßigen, von Rails generierten Schaltflächentext zu ändern.
TK-421

1
IMO ist dies die beste Antwort, da das Verhalten der dynamischen Zuweisung von Text zur Schaltfläche ("Erstellen" oder "Aktualisieren") basierend auf der Controller-Aktion
beibehalten wird

Auf jeden Fall wie @ sixty4bit sagte. Sollte den Schaltflächentext in Übersetzungsdateien festlegen, damit das Formular für verschiedene Controller-Aktionen wiederverwendet werden kann, z. B. "Kommentar erstellen" oder "Kommentar aktualisieren". Siehe diese Antwort - stackoverflow.com/a/18255633/5355691
Jarvis Johnson

26

Schienen 4 und Bootstrap 3 "primäre" Taste

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

Ergibt so etwas wie:

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


2
Dies ist eigentlich am besten, da die Angabe nildes Namens das Standardverhalten des Helfers beibehält. Wenn er eine Instanzvariable für das zu @personerstellende / anzuzeigende Objekt findet, z. B. die Schaltfläche entsprechend form_forbenennt (Update Foo oder Create Foo) und auch den FormBuilder wählt die richtige Aktion. Auf diese Weise können Sie den Formularcode in einen Teil extrahieren und damit das Modellobjekt anzeigen (wenn Sie ein Formular zum Anzeigen verwenden möchten), aktualisieren und auch eine neue Instanz erstellen.
Paul-Sebastian Manole

13

Wie Srdjan Pejic sagt, können Sie verwenden

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

oder die neue Syntax, die wäre:

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

9

Lösung Bei Verwendung von form_with helper

Für diejenigen, die verwenden Rails 5.2 mit dem form_withHelfer verwenden: Fügen Sie kein Komma hinzu !

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

Screenshot ohne Komma

HTH!


2

Standardmäßig verwendet Rails 4 das Attribut 'value', um den sichtbaren Schaltflächentext zu steuern, damit das von mir verwendete Markup sauber bleibt

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

0

beide arbeiten <%= f.submit class: "btn btn-primary" %>und <%= f.submit "Name of Button", class: "btn btn-primary "%>

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.