Ajoutez une classe CSS à <% = f.submit%>

Réponses:

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

Cela devrait suffire. Si vous obtenez une erreur, il est probable que vous ne fournissiez pas le nom.

Alternativement, vous pouvez styliser le bouton sans classe:

form#form_id_here input[type=submit]

Essayez cela aussi.

Srdjan Pejic
la source
Excellent! Merci Srdjan. Une petite curiosité - j'ai essayé d'utiliser disable_withces boutons de soumission, mais ils ne semblent jamais fonctionner. Y a-t-il une raison à votre connaissance? +1
sscirrus
3
Essayez avec un hachage pour les options: {: class => 'class_name',: disable_with => 'Editing ...'}. Cela ira après le nom du bouton. Cela devrait fonctionner, ou du moins c'est documenté comme ça.
Srdjan Pejic
3
Notez que vous devez explicitement passer une chaîne ('nom du bouton ici') comme premier argument submitpour utiliser le hachage: class comme dans la réponse ci-dessus. Si vous n'avez pas cette chaîne, vous obtiendrez un message d'erreur.
thewillcole
7
ajouter une classe sans supprimer la valeur par défaut répondez ici stackoverflow.com/questions/8811254/…
Naoise Golden
<%= form.submit :class => 'class_name' %>fonctionne, si vous ne voulez pas utiliser le nom.
141

Vous pouvez ajouter une déclaration de classe au bouton d'envoi d'un formulaire en procédant comme suit:

<%= f.submit class: 'btn btn-default' %> <- Remarque: il n'y a pas de virgule!

Si vous modifiez un _ form.html.erb partiel d'un échafaudage et que vous souhaitez conserver la modification dynamique du nom du bouton entre les actions du contrôleur, NE spécifiez PAS de nom 'name'.

Sans spécifier de nom et selon l'action du rendu du formulaire, le bouton obtiendra la .class = "btn btn-default"(classe Bootstrap) (ou tout .classce que vous spécifiez) avec les noms suivants:

  • Mettre à jour nom_modèle

  • Créer model_name
    (où model_name le nom du modèle de l'échafaudage)

aloucas
la source
13
En dépit d'avoir moins de votes que la réponse sélectionnée, c'est la solution que la plupart des gens voudront utiliser.
IAmNaN
3
C'est ce que j'essayais de trouver
Sandeep Garg
1
Utile et permet d'ajouter un attribut HTML ("id" ou "classe", comme dans l'exemple) sans modifier le texte par défaut du bouton généré par Rails.
TK-421
1
IMO, c'est la meilleure réponse car elle préserve le comportement d'attribution dynamique de texte au bouton ("Créer" ou "Mettre à jour") en fonction de l'action du contrôleur
sixty4bit
Certainement comme l'a dit @ sixty4bit. Doit définir le texte du bouton dans les fichiers de traduction, afin que le formulaire puisse être réutilisé sur différentes actions du contrôleur, c'est-à-dire «créer un commentaire» vs «mettre à jour un commentaire». Voir cette réponse - stackoverflow.com/a/18255633/5355691
Jarvis Johnson
26

Bouton Rails 4 et Bootstrap 3 "principal"

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

Donne quelque chose comme:

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

cwd
la source
2
C'est en fait mieux parce que la spécification nildu nom conserve le comportement par défaut de l'assistant où, s'il trouve une variable d'instance pour l'objet créé / affiché, comme @person, il nommera le bouton en conséquence (Update Foo ou Create Foo) et aussi le form_forFormBuilder choisit l'action correcte. Ainsi, vous pouvez extraire le code du formulaire dans un partiel et l'utiliser pour afficher l'objet modèle (si vous souhaitez utiliser un formulaire pour l'afficher), le mettre à jour et créer également une nouvelle instance.
Paul-Sebastian Manole
13

Comme le dit Srdjan Pejic, vous pouvez utiliser 

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

ou la nouvelle syntaxe qui serait:

<%= f.submit 'name', class: 'button' %>
RailsZilla.com
la source
9

Solution lors de l'utilisation de form_with helper

Pour ceux qui utilisent Rails 5.2 avec l' form_withaide: n'ajoutez pas la virgule !

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

Capture d'écran sans virgule

HTH!

BKSpurgeon
la source
2

Par défaut, Rails 4 utilise l'attribut 'value' pour contrôler le texte du bouton visible, donc pour garder le balisage propre, j'utiliserais

<%= f.submit :value => "Visible Button Text", :class => 'class_name' %>
benjamin.patch
la source
0

les deux fonctionnent <%= f.submit class: "btn btn-primary" %>et <%= f.submit "Name of Button", class: "btn btn-primary "%>

gsumk
la source