Data Box

Playground

work

Título del data-box

Lorem ipsum :3

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.

Navegación

Dropdown

Footer

Ruby

<%= data_box_widget 'Título del data-box', 'pie_chart', paginator: true do |data_box| %>
  <% data_box.primary_action do %>
      <%= btn_dropdown_icon_secondary :more_vert, icon_source: :md, ghost: true, data: {toggle: 'dropdown'} do |w|
        w.item link_to('Lorem ipsum :3', "")
      end %>
  <% end %>
  <% data_box.item do %>
    <h2> contenido de ejemplo 1 </h2>
  <% end %>

  <% data_box.item do %>
    <h2> contenido de ejemplo 2 </h2>
  <% end %>

  <% data_box.item do %>
    <h2> contenido de ejemplo 3 </h2>
  <% end %>
  <% data_box.footer do %>
    <%= btn_icon_secondary :download, icon_source: :md, ghost: true %>
    <%= footer_actions_widget do |a| %>
        <% a.primary_action('Accion') %>
    <% end %>
  <% end %>
<% end %>

Html

<div class="data-box " id="pagination_nav">
  <div class="data-box__header">
    <div class="d-flex align-items-center text-truncate">
      <div class="data-box__header-icon">
        <span class="material-icons notranslate" aria-hidden="true">work</span>
      </div>
      <div class="overflow-auto">
        <h3 class="text-truncate" data-overflow-tooltip="Carta De Oferta">
          Carta De Oferta
        </h3>
      </div>
    </div>
    <div class="d-flex align-items-center">
      <div class="data-box__header-paginator d-flex">
        <button
          name="button"
          type="button"
          class="btn btn-icon btn-ghost btn-sm md-component text-capitalize ghost"
          id="prevBtn"
          disabled=""
        >
          <span class="material-icons notranslate icon" aria-hidden="true">arrow_back</span>
        </button>
        <button
          name="button"
          type="button"
          class="btn btn-icon btn-ghost btn-sm md-component text-capitalize ghost"
          id="nextBtn"
        >
          <span class="material-icons notranslate icon" aria-hidden="true">arrow_forward</span>
        </button>
      </div>
    </div>
  </div>
  <!-- Dropdown -->
  <div class="dropdown">
    <button type="button" class="btn-icon btn-icon-dropdown btn-secondary btn-icon-md  ghost" data-toggle="dropdown" aria-expanded="false">
      <span class=" material-icons  notranslate icon" aria-hidden="true">more_vert</span>
    </button>
    <div class="dropdown-menu dropdown-menu-left" data-boundary="viewport" role="menu">
      <a href="">Lorem ipsum :3</a>
    </div>
  </div>
<!-- Body -->
  <div class="data-box__body">
    <div class="pagination_step active">
        <h2>contenido de ejemplo 1</h2>
    </div>

    <div class="pagination_step active hidden">
      <h2>contenido de ejemplo 2</h2>
    </div>

    <div class="pagination_step active hidden">
      <h2>contenido de ejemplo 3</h2>
    </div>
  </div>
  <!-- Footer -->
  <div class="data-box__footer">
    <button
      name="button"
      type="button"
      class="btn btn-icon btn-ghost btn-md md-component ghost text-capitalize"
      >
      <span class="material-icons notranslate icon" aria-hidden="true">download</span>
    </button>
  </div>
</div>

Javascript

import onmount from 'onmount';

onmount('#pagination_nav', () => {
  const previousButton = document.querySelector('#prevBtn');
  const nextButton = document.querySelector('#nextBtn');
  const steps = document.querySelectorAll('.pagination_step');
  let currentStep = 0;
  previousButton.disabled = true;
  steps[currentStep].classList.remove('hidden');

  nextButton.addEventListener('click', (event) => {
    event.preventDefault();
    steps[currentStep].classList.add('hidden');
    steps[currentStep + 1].classList.remove('hidden');
    steps[currentStep + 1].classList.add('active');
    currentStep += 1;

    updateStatusDisplay();
  });

  previousButton.addEventListener('click', (event) => {
    event.preventDefault();
    steps[currentStep].classList.add('hidden');
    steps[currentStep - 1].classList.remove('hidden');
    steps[currentStep - 1].classList.add('active');
    currentStep -= 1;

    updateStatusDisplay();
  });

  function updateStatusDisplay() {
    if (currentStep === steps.length - 1) {
      nextButton.disabled = true;
      previousButton.disabled = false;
    }
    else if (currentStep === 0) {
      nextButton.disabled = false;
      previousButton.disabled = true;
    }
    else {
      nextButton.disabled = false;
      previousButton.disabled = false;
    }
  }
});

Lista de parámetros

Data Box

Parámetro

Tipo

Detalle

title	String	Define el título
icon	String	Define el icono que llevara el data-box en el titulo
items	Block	Define el contenido que tendrá el body, este puede ser más de uno
paginator	Boolean	(Opcional) Se utiliza cuando se desea mostrar información dinamica
primary_action	Block	(Opcional) Bloque donde se agrega un dropdown ghost para las acciones principales
body	Block	Bloque donde se pueden definir el body
footer	Block	Bloque donde se pueden definir el footer, en el data-box los botones debe ser ghost

Anatomía

1. Header

Contienen icono, título, navegación y acciones secundarias.

2. Body

El contenido del widget puede ser variado, algunos elementos que podría contener son textos, numeros positivos y negativos, gráficos, ilustraciones y en caso de que no tenga contenido un placeholder.Los componentes que puede llevar son, form summary, card progress.

3. Footer

El footer contiene dos acciones la principal y una secundaria, la secundaría es un icono relacionado con el texto que esta arriba en el contenido, la acción primaria es para ir al detalle del modulo.

4. Ícono

El icono sirve para dar más contexto al tipo de módulo que se esta desplegando.

5. Título de módulo

Contiene el título del módulo.

6. Navegación

La navegación permite moverse para atrás y adelante en una escala lineal, por ejemplo en meses hacia el mes que sigue o el que le antecede.

7. Acciones del módulo

Por definir

8. Botón ghost acción principal

El bóton de acción principal permite navegar hacia el módulo y sus detalles, podría contener acciones adicionales desplegadas en un dropdown.

Casos de uso

El componente databox se usa para entregar indicadores y reportería, esta pensado para uso en layouts con grillas complejas.

Los casos de uso permitidos son:

• Avanzar o retroceder con la navegación dentro del mismo contenedor del componente
• Descargar un archivo
• Ir al detalle del módulo en su tabs
• Abrir un modal
• Incluir otros omponentes
• Ver datos numéricos y de texto
• Dar detalle con un popover

Ejemplo Aplicado