Componente

Introducción

Este componente renderiza un breadcrumb para navegabilidad del sitio.

Uso

Es importante recalcar el nombre del componente IrBreadcrumb a nivel de código, ya que este deberá usarse para llamar al componente para renderizarlo.

Ejemplo

Propiedades

Propiedad	Tipo	Default	Descripción
sites	Array	[]	Array de sitios que se mostrarán en orden
sites_fcn	String	undefined	Si está definido, se consultará a BD, una función para obtener los sitios
args_sites_fcn	Array	[]	Array de argumentos que se pasarán a la función definida en sites_fcn
disabled	Boolean	false	Mostrará el breadcrumb deshabilitado, haciendoló también no clickeable

Código fuente

<template>
  <ir-breadcrumb-bone
    v-bind="$attrs"
    v-on="$listeners"
  >
    <div
      slot-scope="{ sites, disabled }"
      class="d-flex align-center"
      v-on="$listeners"
    >
      <template v-for="(site, k) in sites">
        <span
          :key="'site' + k"
          class="breadcrumb"
          :class="breadcrumbSpanClasses(k, sites, disabled)"
          @click="navigateTo(site.value, k, sites, disabled)"
        >
          {{ site.text }}
        </span>
        <v-icon
          v-if="k < sites.length - 1"
          :key="'chevron' + k"
          :color="disabled ? '#C6C6C6' : 'textSecondary'"
        >
          mdi-chevron-right
        </v-icon>
      </template>
    </div>
  </ir-breadcrumb-bone>
</template>
<script>
import { IrBreadcrumbName } from '../../constants'
import IrBreadcrumbBone from './IrBreadcrumbBone.vue'
export default {
  name: IrBreadcrumbName,
  components: {
    IrBreadcrumbBone
  }
}
</script>
<script setup>
import Vue from 'vue'
const iclRouter = Vue.prototype.$iclRouter
const navigateTo = (to, index, sites, disabled) => {
  if (index < sites.length - 1 && !disabled) iclRouter.push({ path: to })
}
const breadcrumbSpanClasses = (index, sites, disabled) => {
  let classes =
    index < sites.length - 1 && !disabled
      ? 'breadcrumb__link textSecondary--text'
      : ''
  classes += disabled ? 'disabledText' : ''
  return classes
}
</script>

<style scoped>
.breadcrumb {
  text-underline-offset: 2px;
  font-weight: 400;
  font-size: 12px;
  line-height: 12px;
  cursor: default;
}
.breadcrumb__link {
  text-decoration: underline;
  cursor: pointer;
}
.disabledText {
  color: #c6c6c6;
}
</style>