1

J'utilise simple_form et j'essaie de faire fonctionner un wrapper personnalisé. Pas de chance jusqu'à présent.Plusieurs boutons radio avec simple_form (Star Rating)

Je cherche à créer une note simple qui a 5 boutons radio pour chaque valeur. La sortie souhaitée:

<fieldset class="rating-new"> 
    <input type="radio" id="star5" name="rating" value="5" /> 
    <label class = "full" for="star5" title="Awesome - 5 stars"></label> 

    <input type="radio" id="star4" name="rating" value="4" /> 
    <label class = "full" for="star4" title="Pretty good - 4 stars"></label> 

    <input type="radio" id="star3" name="rating" value="3" /> 
    <label class = "full" for="star3" title="Meh - 3 stars"></label> 

    <input type="radio" id="star2" name="rating" value="2" /> 
    <label class = "full" for="star2" title="Kinda bad - 2 stars"></label> 

    <input type="radio" id="star1" name="rating" value="1" /> 
    <label class = "full" for="star1" title="Sucks big time - 1 star"></label> 
</fieldset> 

J'utilise simple_form-bootstrap et comprendre que je dois créer un emballage personnalisé pour le faire, mais je chassé beaucoup et ne peut pas sembler comprendre.

Réflexions sur comment je peux y parvenir?

+0

Essayez cet extrait sur [LINK] codepen (https://codepen.io/lsirivong/pen/ekBxI) –

+0

Hey @JyotiPathania, la question est plus sur l'obtention de la sortie HTML désirée avec simple_form:/ –

Répondre

2

Merci @HarlemSquirrel de me rappeler collection_radio_buttons. Je voulais créer une enveloppe personnalisée pour elle, mais je me suis installé avec peaufinage les étiquettes et le style pour arriver là où je veux:

Voilà comment je l'ai eu de travail:

<%= f.collection_radio_buttons :rating, [[5], [4], [3], [2], [1]], :first, :last, item_wrapper_tag: false, boolean_style: :inline do |b| %> 
    <%= b.radio_button + b.label {''} %> 
<% end %> 
0

Vous pouvez utiliser les boutons radio de collection de https://github.com/plataformatec/simple_form#collection-radio-buttons

form_for @something_rated do |f| 
    f.collection_radio_buttons :rating, [[1, '1'] ,[2, '2'],[3, '3'],[4, '4'],[5, '5']], :first, :last 
end 
+0

Hey @HarlemSquirrel, je suis conscient de la 'collection_radio_buttons' mais il génère une mise en page différente de celle dont j'ai besoin:/Savez-vous comment je pourrais ajuster l'emballage pour obtenir la sortie dont j'ai besoin? –

+0

Je crois que vous pouvez ajouter 'item_label_class: 'full'' pour aider à styliser les étiquettes – HarlemSquirrel