2016-03-27 9 views
2

Das folgende Bild zeigt, was ich mit HTML ohne einfaches Formular getan habe.wie zusätzliche Daten zu Simple_form benutzerdefinierten Wrapper hinzufügen: Symbol

Dies ist der alte Code:

<%= f.input :name %> 
<i class="fa fa-question-circle" data-toggle="popover" data-placement="top" data-content="content of the popover" data-trigger="hover"></i> 

der Screenshot:

enter image description here

Es funktioniert perfekt, aber ich möchte diesen Code mit einfachen Form zu verbessern, so dass ich eine benutzerdefinierte erstellt haben Wrapper, aber ich scheiterte, die Daten wie die Toggle und Trigger. ETC an das Symbol im Wrapper senden

Ich habe dies versucht, aber nicht wo richtig rking dies meine Form ist:

<%= simple_form_for(@product ,wrapper: :product_form) do |f| %> 
    <div class="form-inputs"> 
    <%= f.input :name , icon: "fa fa-question-circle" %> 
    <%= f.input :wholesale_price %> 
    <%= f.input :percentage %> 
    <%= f.input :quantity %> 
    <%= f.input :sell_price %> 
    </div>  
<% end %> 

und hier ist meine benutzerdefinierte Wrapper: product_form

config.wrappers :product_form, tag: 'div', class: 'form-group row', error_class: 'has-error' do |b| 
b.use :html5 
b.use :placeholder 
b.optional :maxlength 
b.optional :pattern 
b.optional :min_max 
b.optional :readonly 
b.use :label, class: 'control-label col-sm-3' 
b.wrapper tag: 'div', class: 'input-icon col-sm-6' do |ba| 
    ba.use :input, class: 'form-control' 
    ba.use :error, wrap_with: { tag: 'span', class: 'help-block' } 
    ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
end 
b.use :icon , input_html: { "data-toggle" => "popover", "data-placement" => "top", "data-content" => "adasdasdadsasd", "data-trigger" => "hover" } 
end 

was bekam ich aus dem obigen Code korrekt, nachdem ich die Eingabe überprüfen auf die Klasse des Symbols ist

<i class="fa fa-question-circle"></i> 

jede Hilfe wird und auch erkannt werden, wie die Daten-Inhalte dynamisch zu machen, so dass ich es in vielen Eingängen kann mit verschiedene Daten

Antwort

2

Was Sie suchen, ist eine benutzerdefinierte Komponente zu erstellen. Einfache Formulare haben bereits eine Komponente namens icon, also müssen Sie einen anderen Namen wählen. Es gibt gute Dokumente darüber here. Hier ist eine Basisimplementierung:

module SimpleForm 
    module Components 
    module MyIcon 
     def my_icon(wrapper_options = nil) 
     @my_icon ||= begin 
      content_tag :span, options[:my_icon_html] do 
      options[:my_icon].to_s.html_safe if options[:my_icon].present? 
      end 
     end 
     end 

     def has_my_icon? 
     my_icon.present? 
     end 
    end 
    end 
end 

und es in dem Code:

module SimpleForm 
    module Inputs 
    class Base 
     include SimpleForm::Components::MyIcon 
    end 
    end 
end 

Ich ging options[:my_icon_html] direkt an content_tag, so dass Sie es dynamisch Attribute übergeben zu können.

Verwandte Themen