paginator

El Paginator genera un páginador que permite ir seleccionando entre items de una lista mediante un select o flechas (elemento anterior o siguiente)

Demostración interactiva

Label

NombrePrimer ApellidoPaísSexoFecha de NacimientoRUT

Cambiar Label

Mostrar Selector

Ruby

<%= paginator_widget paginator_options,
  paginator_application_path,
  '#performance-attempt-form',
  select_label: 'Label',
  select_id: application_id,
  id: 'performance-attempt-form-paginator' %>
              

Html

<div class="paginator-content">
<div class="paginator-selector-content">
    <label class="paginator-selector-label">Label</label
    ><select
        name="question_id"
        id="question_id"
        class="form-control paginator-select paginator-action disabled-request select2-hidden-accessible"
    >
        <option value="0">Nombre</option>
        <option value="1">Primer Apellido</option>
        <option value="2">País</option>
        <option value="3">Sexo</option>
        <option value="4">Fecha de Nacimiento</option>
        <option value="5">RUT</option>
    </select>
</div>
<div class="paginator-arrows-content">
    <span class="paginator-previous-button"
        ><button
            name="button"
            class="btn btn-icon btn-ghost btn-md md-component ghost"
            value="prev"
        >
            <span class="material-icons notranslate icon" aria-hidden="true"
                >arrow_back</span
            >
        </button></span
    ><span class="paginator-next-button"
        ><button
            name="button"
            class="btn btn-icon btn-ghost btn-md md-component ghost"
            value="next"
        >
            <span class="material-icons notranslate icon" aria-hidden="true"
                >arrow_forward</span
            >
        </button></span
    >
</div>
</div>
              

Lista de parámetros

Parámetro

Tipo

Detalle

elements	Array	Lista de elementos tipo [texto, valor] para pasar a un select.
element_detail_path	String	Ruta donde se consulta el contenido HTML con los detalles del elemento elegido.
content_selector	String	Selector CSS del contenedor donde ubicar el contenido HTML obtenido.
select_label	String	Etiqueta a ubicar sobre el select.
select_id	String	Identificador a entregar al select.
selected_element	String,Integer	Identificador de elemento selecciondo por default.

Anatomía

1. Select

Indica el elemento seleccionado.

2. Ícono

Siempre deben llevar íconos Arrow Back y Arrow Forward.

3. Contenedor

Casos de uso

Versión 1: con Select

El Paginator va de la mano con otro componente, como un Select por ejemplo, que permite mostrar el elemento que se está seleccionando, y a su vez, el contenido de este.

En las imágenes las flechas anterior y siguiente van cambiando el elemento del select, y el contenido de este (recuadro naranjo)

Versión 2: simple

Se limita solo a los botones anterior y siguiente, dentro de otro componente, como por ejemplo un Data Box

Uso correcto

En mobile los botones deben ir siempre en la misma fila que el select, nunca debajo del select

Uso incorrecto