Form summary

El Form summary es un componente que nos permite listar el resumen de un formulario para tener una visión clara de titulos y descripciones que a su vez puede tener un título general para seccionar el tipo de información que contiene.

Playground

Campo 0
Descripción campo 0
Campo 1
Descripción campo 1
Campo 2
Descripción campo 2
Campo 3
Descripción campo 3

Titulo del form summary

Línea Divisoria

Inline items

Sin borde

Ícono título ítem

Dividir en columnas

Ruby

<%= form_summary_widget  do |n| %>
  <%= n.item 'Campo 1', item_inline: false do |f| %>
    <p>Descripcion campo 1</p>
  <% end %>
  <%= n.item 'Campo 2', item_inline: false do |f| %>
    <p>Descripcion campo 2</p>
  <% end %>
  <%= n.item 'Campo 3', item_inline: false do |f| %>
    <p>Descripcion campo 3</p>
  <% end %>
  <%= n.item 'Campo 4', item_inline: false do |f| %>
    <p>Descripcion campo 4</p>
  <% end %>
<% end %>

Html

<div class="card pa-3 form-summary ">
    <ul class="list-group list-group-unbordered">
        
        
        
                <li class="form-summary_item py-1 w-100">
                    <div>
                        <strong>
                            
                            Campo 0
                        </strong>
                    </div>
                    <div class="item_subtitle">
                        Descripción campo 1
                    </div>
                </li>
            
            
                <li class="form-summary_item py-1 w-100">
                    <div>
                        <strong>
                            
                            Campo 1
                        </strong>
                    </div>
                    <div class="item_subtitle">
                        Descripción campo 2
                    </div>
                </li>
            
            
                <li class="form-summary_item py-1 w-100">
                    <div>
                        <strong>
                            
                            Campo 2
                        </strong>
                    </div>
                    <div class="item_subtitle">
                        Descripción campo 3
                    </div>
                </li>
            
            
                <li class="form-summary_item py-1 w-100">
                    <div>
                        <strong>
                            
                            Campo 3
                        </strong>
                    </div>
                    <div class="item_subtitle">
                        Descripción campo 4
                    </div>
                </li>
            
    </ul>
</div>

Lista de parámetros

Parámetro

Tipo

Detalle

title	String	Título para el resumen del formulario
Items	Block	Iteración de items dentro del resumen de formulario
item_title	String	Titulo del item (forma parte del item)
item_icon	String	Agrega un ícono al título del ítem
content	Block	Descripción del item (forma parte del item)
divider	Boolean	Por defecto es false y se asigna para dar un divisor entre items
item_inline	Boolean	Por defecto es true, y se asigna para dar salto de linea entre titulo y descripción de item
flat	Boolean	Elimina los bordes del formulario
columns	String	Asigna el número a la clase “col-md-x” el cúal define el número en las que se desea dividir la información dentro del form, para calcular las columnas se hace en base a 12 dividido en la cantidad de columnas deseadas, por ejemplo, si queremos 3 columnas calculamos 12/3 = 4 ponemos columns:"4"

---

Anatomía

1. Contenedor

Contenedor principal de todos los átomos

2. Título

Título que engloba todos los items

3. Icon-Left [opcional]

Puede llevar un icono a la izquierda

4. Subtítulo [opcional]

Puede llevar un subtítulo

5. Acciones

Puede contener un boton-link y otros componentes tales como: rate, iconos, chips, badge.

*Adicionalmente, funcionan como organismos y pueden ir apilados unos sobre otros.

---

Casos de uso

El Form summary es una lista que muestra información relevante del colaborador se usa principalmente en la ficha del colaborador, puede incluir título principal, subtítulos y descripciones, dependiendo del caso puede usar icono acompañando al subtítulo y links.