Footer action
El footer action se usa para dar acciones a los aside, outerbox, modal y sweet alert, en general tienen dos acciones que dependen del componente donde se encuentren, en algunos casos el footer action se encuentra fixed en el bottom, esto ocurre cuando el contenido del componente supera la altura del viewport. Tiene 16 px de padding y ocupa el 100% del width contenedor.
Playground
- Ruby
- Html
<%= footer_actions_widget do |a| %>
<% a.cancel('href)%>
<% a.primary_action('Guardar') %>
<% end %>
<div class="footer-actions py-3">
<div>
<button name="button" type="submit" class="btn btn-secondary btn-md mr-1">
<span class="btn-label">Cancelar</span>
</button>
</div>
<div>
<button name="button" type="submit" class="btn btn-primary btn-md mr-1">
<span class="btn-label">Primaria</span>
</button>
</div>
</div>
Lista de parámetros
| Parámetro | Tipo | Detalle |
| go_back | array | path: (Genera un boton de volver) |
| delete | array | label:, path:, **opts (Genera un botón destroy sec, con un label asignable) |
| primary_action | array | label:, path:, **opts (Genera un botón primary, con un label asignable) |
| action | array | label:, title:, path:, **opts (Genera un botón secondary, con un label asignable) |
El componente permite al usuario realizar ciertas acciones dependiendo del componente en la que se encuentra.
Anatomía
1. Contenedor
Es la superficie que contiene las acciones primarias y secundarias.
2. Botón Primario [Opcional]
Ejecuta la acción principal. El footer actions dependiendo del caso de uso, puede precindir de la acción primaria (Puede sólo llevar una acción secundaria).
3. Botón Secundario [Opcional]
Ejecuta una acción secundaria. Esta es opcional, dependiendo del caso de uso de l componente (Puede sólo llevar una acción primaria).
Al momento de usar el componente, es importante respetar el padding de 16px en todos sus lados.
Casos de uso
Los componentes que pueden utilizar el footer_actions son:
La estructura general del Footer_Actions se compone de una acción principal representada con un botón primario a la derecha y un botón secundario ubicado a la izquierda. Ese orden es importante mantenerlo en todo momento.
A su vez, el helper de botones tiene distintas acciones dependiendo del componente en el que se utiliza. Podemos ir desglosandolas paso a paso:
En outer box
El Outer_Box puede llevar distintos tipos de acciones, para ello se utiliza el componente “footer_Actions” como helper.
Ver la documentación completa del Outerbox haciendo clic aquí
Acciones primarias permitidas
- Aceptar (Para concretar una acción)
- Guardar (Para datos que deben quedar guardados, ej: formularios o configuraciones)
- Siguiente (En casos de que sea requerido un siguiente paso)
- Crear (en caso de estar gatillando la creación de otra vista / componente)
- Enviar
- Publicar (publicaciones del portal)
- Ir al portal ( podría ser Ver Más o ..)
- Nuevo (de nuevo empleado)
Acciones Secundarias permitidas
- Cancelar (Para cancelar un proceso en curso)
- Volver (Para volver atras en los pasos de un proceso en una vista anterior o simplemente para volver atrás)
Acciones Destructivas permitidas
- Rechazar
Existen casos donde es necesario agregar una tercera acción al footer, uno de estos casos sería una acción destructiva la cual poseé el mismo nivel de importancia que la acción primaria. Por lo tanto debiese interpretarse con un un boton danger-filled.
Por norma, no pueden existir dos botones primarios uno al lado de otro. Si se necesita agregar una tercera acción, esta se representará como un botón secundario al lado del botón principal, ya que por lo general se trata de acciones relacionadas y decisiones que el usuario debe tomar con respecto a un mismo asunto.
En modales
El Outer_Box puede llevar distintos tipos de acciones, para ello se utiliza el componente “footer_Actions” como helper.
Ver la documentación completa de modales haciendo clic aquí
Acciones primarias permitidas
- Aceptar
- Guardar
- Crear
- Enviar
- Siguiente
- Agregar
- descargar (Ej: En exportadores e importadores)
- Exportar (Caso puntual en el modal de exportadores)
- Descargar template / Seleccionar archivo
- Añadir
Acciones Secundarias permitidas
- Cancelar
- Volver
- Cerrar
En aside
Ver la documentación completa de Aside haciendo clic aquí
Acciones primarias permitidas
- Guardar
- Aceptar
Acciones Secundarias permitidas
- Cancelar
- Volver
- Cerrar
Fixed
El footer actions debe ir fijo dentro de los componentes que lo utilizan de manera que sus acciones sean siempre visibles.
Un ejemplo sencillo sería en un outerbox con mucha informacón o modal con scroll donde el header y footer van fijos y de esa forma facilitar la toma de decisiones a los usuarios.
