Componente ActionBar

El componente ActionBar proporciona una interfaz para mostrar u ocultar un menú de ajustes o acciones adicionales. Puedes personalizar la apariencia y el comportamiento del componente para satisfacer tus necesidades.

Uso en Componentes

Utilizando en un Componente

Puedes utilizar el componente ActionBar en tus componentes de la siguiente manera:

<template>
  <div
    :class="'d-flex flex-row'"
    :style="{
      padding: handlerIsOpen ? '0px 16rem 0px 0px' : '0px 3rem 0px 0px',
    }"
  >
    <router-view></router-view>
    <ActionBar
      :menu="menu"
      :iconOpen="`${baseApiUrl}/icons/flecha_left_primary.svg`"
      :iconClose="`${baseApiUrl}/icons/flecha_right_primary.svg`"
      @isOpen="handlerIsOpen = !handlerIsOpen"
      @navigate="handleRedirect"
    />
  </div>
</template>

<script setup lang="ts">
import baseApiUrl from '@services/BaseApiUrl';
import { ref, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const menu: any = [
  {
    title: 'Terminales',
    icon: baseApiUrl + '/icons/ajustes.svg',
    name: 'terminales',
  },
  {
    title: 'Domicilios',
    icon: baseApiUrl + '/icons/ajustes.svg',
    name: 'domicilios',
  },
];

const handlerIsOpen = ref<boolean>(false);

const handleRedirect = (e: any) => {
  router.push({ name: e.name });
};
</script>

Propiedades

Propiedad	Tipo	Descripción
menu	Array<MenuItem>	Lista de elementos de menú.
iconOpen	String	Ruta del ícono para la posición abierta.
iconClose	String	Ruta del ícono para la posición cerrada.

Eventos

Evento	Parámetros	Descripción
isOpen	value: boolean	Se emite cuando el estado abierto/cerrado cambia.
navigate	menu: MenuItem	Se emite cuando se selecciona un elemento del menú.