Sort
Se utiliza para ordenar elementos en una vista que no están dentro de una tabla, como por ejemplo List.El botón con el ícono “Arrow Upward” y “Arrow Downward” permiten ordenar de forma ascendente y descendente respectivamente. El botón debe ir acompañado de un tooltip que indique que se puede revertir el orden.
Demostración interactiva
#11 Hola, veces esto es un titulo de un proceso importante
En progreso
Solicitado por holasoygerman
#5 Este es un titulo de un proceso importante
Rechazado
Solicitado por ImNotARobot
#22 Totalmente estoes un titulo de un proceso importante
Aprobado
Solicitado por userRandom
- Ruby
archivo.erb
# En el front:
<%= sort_widget order: :asc do |sort|
sort.selected("list-title")
sort.item(name: "Título de procesos ", klass: "list-title")
end %>
# Ordenar elementos del backend:
<div data-sort-list="<%= {serverSort: "filter-workflow-form"}.to_json %>">
<%= sort_widget order: :asc do |sort|
sort.selected("id")
sort.item(name: "ID del proceso", klass: "id")
sort.item(name: "Título", klass: "title")
sort.item(name: "Estado", klass: "status")
end %>
</div>
# La opcion serverSort es para que el componente diferencie que sera un ordenamiento en el back(servidor) y que el valor de este es el Id del formulario que se enviara al back.
Lista de parámetros
| Parámetro | Tipo | Detalle |
| order | Type | Puede ser 'asc' o 'desc' dependiendo de como se quiere ordenar al principio |
| sort.selected | String | Clase del elemento por la que se hara el sort como predefinido al cargar la pág |
| sort.item | item (tiene propiedades) | Se menciona el item que estara en el select del sort |
| (sort.item) => name | String | Define el nombre que tendra el item en el select |
| (sort.item) => klass | String | Define la clase del elemento por el que se hara el sort |
Anatomía
1. Select
Indica el tipo de ordenamiento seleccionado.
2. Ícono
Indica si es ordenamiento es ascendente o descendente
Tipos
