Card inputs

Playground

Agrega ícono de Drag&Drop

Columnas en col-md-6

Múltiples inputs

Múltiples botones

Ruby

<%= simple_form_for User.new, url:'' do |f| %>
  <%= card_inputs_widget do |card| %>
    <% card.block_input do %>
      <%= f.input :name, label: false, placeholder: 'Nombre' %>
    <% end %>
    <% card.button do %>
      
      <%= link_to_remove_association(
        btn_icon_destroy(class: 'destroy-category float-right',
                        data: { toggle: 'tooltip'},
                        title: 'Eliminar'),
        f,
        wrapper_class: 'card-inputs',
        data: { target: '.card-inputs' }
      ) %>
      
    <% end %>
  <% end %>
<% end %>

Html

<form class="simple_form new_user" id="new_user" action="" accept-charset="UTF-8" method="post">
    <div class="card-inputs border-sm mb-3">
    <div class="card-inputs__content pr-4">
      
      <div class="col-9">
        <div class="form-group">
            <div class="input-group">
              <input class="form-control string required" placeholder="Input de prueba" />
            </div>
          </div>
        
      </div>
      <div class="col-3">
        <button name="button" type="button" method="delete" class="btn btn-icon btn-destructive btn-md destroy-category float-right" title="Eliminar" data-toggle="tooltip" data-original-title="Eliminar">
             <span class=" material-icons  notranslate icon" aria-hidden="true">delete</span>
        </button>
        
      </div>
  </div>
</form>

Lista de parámetros

Parámetro

Tipo

Detalle

ellipsis	Boolean	Para agregar los tres puntos al lado izquierdo, y la mano, cuando se agregue un drag&drop
col_md	Boolean	Muestra las columnas en col-md-6
block_input	Block	Bloque para agregar contenido input
button	Block	Bloque para agregar el boton de eliminar

---

Anatomía

1. Contenedor

Contiene todos los atomos.

2. Input

El card input siempre debe llevar el componente input dentro. Este puede usarse con o sin label-text.

3. Ghost Icon - Emoji [opcional]

Puede contener un ghost icon con emoji

4. Acción destructiva

Debe llevar una acción destructiva como Ghost-icon