Box

El Outer_box es el contenedor principal y deben estar presentes en todas las vistas. No es posible agregar contenido fuera de este. Los Outer_Box pueden tener contenido de todo tipo, ya que en ellos se almacena la información principal de cada una de las vistas. Los Inner_box son contenedores de información. Su contenido es flexible, desde solo texto a elementos vectoriales u otros componentes.

Playground

Tipo de Box

Outer BoxInner Box

El outer_box es un componente que es útil para reducir el espacio vertical con grandes cantidades de información. La funcionalidad predeterminada del componente es mostrar solo un cuerpo a la vez, muy util para englobar una sección.

Titulo outer box

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste.

header

Footer

Ruby

  <%= outer_box title: 'Titulo outer box' do |box| %>
    <% box.body do %>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste.
      </p>
    <% end %>
    
  <% end %>
              

Html

<div class="box box-outer">
              <div class="box-header ">
                  <div class="box-info">
                    <h2 class="box-title text-truncate" data-toggle="true">
                       Titulo outer box
                    </h2>
                  </div>
                  
              </div>
              <div class="box-body py-4" >
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit
                voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
                beatae vitae dicta sunt explicabo.</p>
              </div>
            </div> 

Outer Box

El outer_box es un componente que es útil para reducir el espacio vertical con grandes cantidades de información. La funcionalidad predeterminada del componente es mostrar solo un cuerpo a la vez, muy util para englobar una sección.

Lista de parámetros

Parámetro

Tipo

Detalle

collapse	Boolean	Indica si se encuentra expandido por defecto
skip_header	Boolean	Indica si será solo contenido
title	block o String	Texto del box
primary_action	block	Acciones primarias del box
header	block	Block donde se pueden definir adicionales en header
footer	block	Block donde se pueden definir el footer
body	block	Block donde se pueden definir el body
type	String	Primary, default
solid	Boolean	Define si es un innerbox
box_options	Hash	Para poder pasar parámetros al box_widget
subtitle	String	Subtítulo del box (opcional)
description	String	Descripción del box (opcional)
id	String o Integer	Identificador único del box (opcional)
icon	String	Icono del box (opcional)
icon_source	Symbol	Fuente del icono (:fa para FontAwesome, etc.)
avatar_url	String	URL de la imagen de avatar (opcional)
avatar_corporate_background	Boolean	Define si el avatar tiene fondo corporativo
height_screen	Boolean	Define si el box ocupa toda la altura de la pantalla
banner_url	String	URL de la imagen del banner (opcional)
height_reponsive_none	Boolean	Define si el box no responde a la altura en pantallas pequeñas
footer_class	String	Clase CSS personalizada para el footer
pinned	Boolean	Define si el box está fijado

Anatomía

1. Header

Encabezado del Outer-box. Se conforma por un título H2

2. Contenedor

Es donde se ubica el contenido del Outer-box

3. Footer Actions

Uso de componente footer actions.

---

Inner box

El inner_box es un componente que es útil para seccionar la información de un box que no sea relevante y opcional de ver para el usuario.

Lista de parámetros

Parámetro

Tipo

Detalle

title	String	El título del box
collapsed	Boolean	collapse Si el box debe ser colapsable
box_options	Hash	Define los parámetros que puede tener el box

Anatomía

1. Header

Encabezado del Inner-box. Se conforma por un título H2

2. Chevron / Collapse

Acción colapsable de tipo acordeón por medio del icono de chevron

3. Contenedor

Es donde se ubica el contenido del Inner-box