web-dev-qa-db-fra.com

Rails and bootstrap - Ajouter des balises HTML au texte du bouton d'envoi

J'ai un formulaire pour un bouton similaire/différent avec ajax:

= form_for like, :html => { :method => :delete}, :remote => true do |f|
= f.submit pluralize(@video.likes.count, 'like'), :class => "btn btn-warning btn-mini", "data-disable-with"=> "Just a moment..."

La forme fonctionne parfaitement.

J'aimerais ajouter une icône devant le texte dans le bouton Soumettre. Le code haml permettant d'ajouter l'icône est le suivant (Twitter bootstrap):

%i.icon-heart.icon-white

Est-il possible d'ajouter ce code HTML au bouton? J'ai essayé de l'ajouter en tant que HTML simple, mais Rails l'a rendu sous forme de texte.

METTRE À JOUR

J'ai réussi à encapsuler le bouton d'envoi dans une classe span contenant l'icône et le style approprié. Je dois maintenant supprimer chaque style sur le bouton ...

%span.btn.btn-danger.btn-mini
  %i.icon-heart.icon-white
  = f.submit pluralize(@video.likes.count, 'like')
ruby-on-railstwitter-bootstrap
28
Justin D.

Grâce à ismaelga, j'ai trouvé cette SO question .

Voici la solution:

<%= button_tag(type: 'submit', class: "btn btn-primary") do %>
 <i class="icon-ok icon-white"></i> Save
<% end %>
96
Justin D.

Une autre option pourrait être button à la place de submit

voir la documentation Rails bouton FormBuilder #

= f.button :class => "btn btn-warning btn-mini" do
  %i.icon-heart.icon-white
    = pluralize(@video.likes.count, 'like')
3
kangkyu

Essaye ça. Je n'ai pas testé mais je pense qu'il est possible de faire quelque chose comme ça.

= f.submit :class => "btn btn-warning btn-mini", "data-disable-with"=> "Just a moment..." do
  %i.icon-heart.icon-white
  = pluralize(@video.likes.count, 'like')
end

Cela était donc possible si vous utilisiez simple_form. Je suis désolé.

Donc, un autre essai serait

= f.submit "#{pluralize(@video.likes.count, 'like')} <i class='icon-heart icon-white'/>".html_safe, :class => "btn btn-warning btn-mini", "data-disable-with"=> "Just a moment..."
3
Ismael Abreu

La réponse de Justin D m'a également aidé. Si vous venez de Google et cherchez une implémentation Slim, procédez comme suit:

= button_tag(type: 'submit', class: 'btn btn-default') do
    span.glyphicon.glyphicon-floppy-disk>
    | Save
end

Les utilisateurs Slim reconnaîtront la nécessité du >.

Cela fonctionnait pour moi avec Rails 4.1.5, Ruby 2.1.2 et bootstrap-sass 3.2 à compter du 24 septembre 2014.

2
flanger001

Soluction

= button_to('Add', line_item_path, method: :post , class: "btn btn-warning btn-lg" , params: { param1: 'value1',  param2: 'value2' })

http://qiita.com/tomomomo1217/items/a5f790c31670587e2d87

Comment placer une image à l'intérieur d'un lien?

0
gilcierweb

La réponse acceptée pour la question elle-même fonctionnera, mais s'apparente davantage à un correctif qu'à la solution idéale, en maintenant le style du code clair et cohérent. Il revient en utilisant la méthode d'affichage standard et manuelle: #button_tag. J'ai tendance à éviter les méthodes manuelles telles que #submit_tag, #form_tag, #input_tag ... etc., car elles ne sont pas liées au modèle sauvegardé ni au modèle de formulaire lui-même et vous devez tout faire manuellement. Même si la soumission n’a aucun lien avec le f., chaque entrée d’un form_for a le même effet que, par exemple. f.input ..., il est question de style, de lisibilité du code et de bonnes pratiques de programmation. Ce code fonctionne parfaitement (form_for et simple_form):

= f.button :button, type: :submit, class: 'class1 class2 ... classN' do
    = 'button call to action text'
    %i.fa.fa-download.ml5 // => haml icon as requested

J'espère que cela aidera les autres à atteindre ce poste comme moi en essayant d'éviter les méthodes _tag. 

0
tommyalvarez