Ruby on Rails: forma sencilla, agregar la imagen al lado de cada campo de entrada

Question

Cuando uso rieles, creo una forma sencilla utilizando el formulario sencillo joya

creo un formulario como el siguiente

<%= simple_form_for @user do |f| %> 
    <%= f.input :username %> 
    <%= f.input :password %> 
    <%= f.button :submit %> 
<% end %> 

pero me gustaría agregar un elemento de imagen predeterminado justo al lado de cada campo. ¿Cómo puedo lograr eso?

de que este intento

<%= simple_form_for @user do |f| %> 
     <%= f.input :username % > 
     <img xxxx> 
     <%= f.input :password %> 
     <img xxxx> 
     <%= f.button :submit %> 
     <img xxxx> 
    <% end %> 

pero no voy a trabajar, ya que se envolvía en una nueva línea para cada campo elemento.

Answer 1

Sugeriría mirar utilizando f.label y f.input_field en lugar de f.input, ya que le permitirá colocar los componentes como desee y agregar sus imágenes donde desee.

Consulte la documentación de Simple_Form para obtener más información y ejemplos.

Ejemplo:

<%= simple_form_for @user do |f| %> 
    <%= f.label :username %> 
    <%= f.input_field :username %> 
    <img xxxx> 
    <%= f.button :submit %> 
<% end %> 

Answer 2

Bueno, la respuesta para eso es como esto es crear una carpeta llamada de entrada en la aplicación/

y crear un archivo con [any_name] _input.rb dejar que decir que el nombre que image_tag_input.rb

continuación, el código dentro del image_tag_input.rb este aspecto

class ImageTagInput < SimpleForm::Inputs::Base 
    ## Because image tage doesnot work if not included the below 
    include ActionView::Helpers::AssetTagHelper 
    def input 
    ("#{@builder.text_field(attribute_name, input_html_options)}" + "#{image_tag()}).html_safe 
    end 
end 

y luego en el lado html

hacer esto

<%= f.input :username,:as => "image_tag %> 

Aquí y otro ejemplo mencionar en wiki del simple_form_for

Esperanza esta ayuda

Answer 3

siempre uso envoltorios que la Forma simple Bootstrap usa.

Un ejemplo de su envoltorio defecto:

SimpleForm.setup do |config| 
    config.error_notification_class = 'alert alert-danger' 
    config.button_class = 'btn btn-default' 
    config.boolean_label_class = nil 

    # :vertica_from wrapper 
    config.wrappers :vertical_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' 

    b.use :input, class: 'form-control' 
    b.use :error, wrap_with: { tag: 'span', class: 'help-block' } 
    b.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
    end 


    # Rest omitted 

    # Change default simple form wrapper settings 
    config.default_wrapper = :vertical_form 
    config.wrapper_mappings = { 
    check_boxes: :vertical_radio_and_checkboxes, 
    radio_buttons: :vertical_radio_and_checkboxes, 
    file: :vertical_file_input, 
    boolean: :vertical_boolean, 
    datetime: :multi_select, 
    date: :multi_select, 
    time: :multi_select 
    } 
end 

Al crear una forma sencilla

<%= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %> 

Será por defecto (debido a la configuración) para usar :vertical_form

Ahora bien, si desea configurar un contenedor personalizado, siga el ejemplo anterior, cree su clase personalizada y colóquela bajo config/initializers.Se trata de un envoltorio personalizado de ejemplo he añadido la configuración que Bootstrap arriba:

config.wrappers :horizontal_file_input, tag: 'div', class: 'form-group row', error_class: 'has-error' do |b| 
    b.use :html5 
    b.use :placeholder 
    b.optional :maxlength 
    b.optional :readonly 
    b.wrapper tag: 'div', class: 'col-md-6' do |bb| 
     bb.use :label, class: 'col-sm-5 control-label' 

     bb.wrapper tag: 'div', class: 'col-sm-7' do |bbb| 
     bbb.use :input 
     bbb.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
     end 
    end 

    b.wrapper tag: 'div', class: 'col-md-3 side-validation' do |bc| 
     bc.use :error, wrap_with: { tag: 'span', class: 'help-block' } 
    end 
    end 

Luego de usar este contenedor, encontrar la entrada en la que desea aplicar la envoltura personalizada, y hacer esto:

<%= f.input :resume, as: :attachment_preview, wrapper: :horizontal_file_input %> 

Boom ! ¡Se representará con tu configuración personalizada! Además, puede establecer envoltorio en el formulario para alterar los envoltorios predeterminados para todas sus entradas. Así que si lo hace:

<%= simple_form_for(@staff, as: :staff, 
          url: staffs_path, 
          method: "post", 
          wrapper: :horizontal_form) do |f| %> 

Entonces, de sus campos de entrada será por defecto a utilizar :horizontal_form envoltura (que también es otro simple envoltorio Formulario Bootstrap)

Espero que esto ayude.