List collapse

El list_collapse es un componente que se usa para seccionar información. Puede contener un avatar, contenido, acciones, subtítulos y mucho más. Las listas presentan el contenido de una manera que facilita la identificación de un elemento específico en una colección.

Playground

Tipo de List

ListCollapse

Esta propiedad se usa de forma type: list para hacer uso de este tipo de lista con items activables

Titulo de listas

Titulo de listas

Titulo de listas

Descripción del item

Icono del item

Seleccionar item

Mostrar herramientas

Deshabilitar item

Ruby

ruby helper

    <%= list_collapse type: :list do |w| %>
      <%= w.item  title: 'Titulo de listas' do |item| %>
        <%= item.body do %>
          <div class="p-4">Contenido</div>
        <% end %>
      <% end %>
      <%= w.item  title: 'Titulo de listas' do |item| %>
        <%= item.body do %>
          <div class="p-4">Contenido</div>
        <% end %>
      <% end %>
      <%= w.item  title: 'Titulo de listas' do |item| %>
        <%= item.body do %>
          <div class="p-4">Contenido</div>
        <% end %>
      <% end %>
    <% end %>
    

Html

<div class="bux-list bux-type-list">
  <div class="bux-list-item small-list-item type-list">
    <div class="header-list">
      <div class="info">
        <div>
          <div class="title text-truncate">Titulo de listas</div>
          
        </div>
        
      </div>
      </div>
    
  </div>
  <div class="bux-list-item small-list-item type-list active  ">
    <div class="header-list">
      <div class="info">
        <div>
          <div class="title text-truncate">Titulo de listas</div>
          
        </div>
        
      </div>
      </div>
    
  </div>
  <div class="bux-list-item small-list-item type-list">
    <div class="header-list">
      <div class="info">
        <div>
          <div class="title text-truncate">Titulo de listas</div>
          
        </div>
        
      </div>
      </div>
    
  </div>
</div>

Lista de parámetros

Parámetro

Tipo

Detalle

title	String	Texto
icon	Symbol	Icono asociado al item
description	String	Texto informativo adicional al titulo
disabled	Boolean	Define si estara habilitado o no el item
Collapsed	Boolean	Si estara expandido o no por defecto
data	Hash	Atributos data de html a aplicar al elemento
type	String	Cambia la forma de widget dependiendo si es list o collapse
type_values	Hash	Contiene valores que cambian algunas clases segun el tipo de widget (list o collapse)
selected	Boolean	Contiene valores que cambian algunas clases segun el estado del item en caso de ser type: :list como (activo o no)
state_label	String	Texto que acompaña el title del item y se renderiza dentro de un chip
state_color_class	String	Define la clase de color del chip

---

Anatomía

1. Contenedor

Contiene todos los componentes y elementos que conforman el list.

2. Título

Título del item de la lista

3. Subtítulo [opcional]

El item de la lista que puede llevar un subtítulo.

4. Icon left [opcional]

El item puede llevar un icon left.

5. Chip

Que podría contener el estado del item de la lista

6. Acciones

Puede llevar distintas acciones y otros componentes, tales como: stepper, chips, acciones colapsables.

---

Casos de uso

El list es un componente que se usa para hacer una sección de información. Puede contener un avatar, contenido, acciones, subtítulos y mucho más. Las listas presentan el contenido de una manera que facilita la identificación de un elemento específico en una colección.

El list con descripción tiene la misma funcionalidad que el list, con la diferencia de que se contextualiza al usuario de lo que se encuentra almacenado en el list a través de una descripción.

El list con descripción y avatar, además de contextualizar al usuario, permite diferenciar entre distintos list que se encuentren en la misma vista gracias a los íconos que se muestran en el avatar. Es por esto que cuando los list se encuentren cerrados, el usuario podrá deducir de qué se trata cada uno leyendo la descripción y vinculando al avatar asignado.