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

217

Ma question est simple:

<%= f.submit %>

Où va la déclaration de classe? Je reçois des erreurs lors de plusieurs tentatives.

ruby-on-rails css ruby-on-rails-3

— sscirrus
source

voir également stackoverflow.com/questions/8811254/…

— Naoise Golden

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
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
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:

— cwd
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
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' %>

HTH!

— BKSpurgeon
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
source

0

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

— gsumk
source