Sidebar

# Sidebar

# Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

Agrega un menu sidebar con el componente vs-sidebar, hay dos sub componentes vs-sidebar-item y vs-sidebar-group

Code copied

# Group

Puedes agrupar los items y ocultarlos con el sub-componente vs-sidebar-group

El componente tiene un slot:header en el cual agregamos un sub-componente vs-sidebar-item con la propiedad arrow y sin la propiedad id para no cambiar el estado de active al hacer click

Code copied

# Reduce

Puedes hacer que el componente sea de un ancho de 50px y que muestre solo los iconos con la propiedad reduce esta propiedad es dinámica

Para que el sidebar funcione correctamente es necesario agregar a los items el slot de icon ya sea con un icono o con por ejemplo la primera letra de el texto

Code copied

# Hover expand

Puedes agregar la funcionalidad de expandir y contraer el sidebar al pasar el mouse, con la propiedad hoverExpand

Code copied

# Color

Cambia le color de el sidebar, si es necesario también puedes cambiar el color de el texto a blanco con la propiedad textWhite

Code copied

# Open

Puedes definir si el sidebar es visible o esta oculto con la propiedad open, esta propiedad por defecto es false

Code copied

# Position Right

Cambia la posición de el sidebar a la derecha y su animación con la propiedad right

Code copied

# API

props

Property Type Values Description default Example More
open Boolean truefalse Determina si el componente es visible. false Usage Open Close 
:open.sync="activeSidebar"
v-model String id Determina el item que se encuentra en estado activo. Usage Open Close 
v-model="active"
absolute boolean truefalse Determina si el componente es de position absoluta. false Usage Open Close 
<vs-sidebar
  absolute
  v-model="active"
  :open.sync="activeSidebar"
  >
relative Boolean truefalse Determina si el componente es de posición relativa. false Usage Open Close 
<vs-sidebar
  relative
  v-model="active"
  :open.sync="activeSidebar"
  >
reduce Boolean truefalse Determina si el componente esta en estado reducido con un ancho de 50px. false Usage Open Close 
<vs-sidebar
  absolute
  reduce
  v-model="active"
  open
>
hover-expand Boolean truefalse Agrega la funcionalidad de expandir cuando el usuario entra dentro de el sidebar y viceversa. false Usage Open Close 
<vs-sidebar
  absolute
  reduce
  hover-expand
  v-model="active"
  open
>
square Boolean truefalse Determina si el componente no tiene border radius false Open Close 
<vs-sidebar
  square
  absolute
  v-model="active"
  open
>
notShadow Boolean truefalse Elimina el shadow de el sidebar false Open Close 
<vs-sidebar
  not-shadow
  absolute
  v-model="active"
  open
>
background String Vuesax Colors RGB HEX Cambia el color de fondo de el sidebar false Usage Open Close 
<vs-sidebar
  background="primary"
  absolute
  v-model="active"
  open
>
textWhite Boolean truefalse Cambia el color de el texto a blanco false Usage Open Close 
<vs-sidebar
  text-white
  background="primary"
  absolute
  v-model="active"
  open
>
notLineActive Boolean truefalse Elimina la linea de el active de los items false Open Close 
<vs-sidebar
  not-line-active
  absolute
  v-model="active"
  open
>
vs-sidebar-item:to String url Genera una nueva ruta de vue-router Open Close 
<vs-sidebar-item
  to="/"
>
vs-sidebar-item:href String url Genera una nueva ruta Open Close 
<vs-sidebar-item
  href="http://vuesax.com/"
>
right Boolean truefalse Determina si el componente se posiciona hacia la derecha Open Close 
<vs-sidebar right>
  ...
</vs-sidebar>

slots

Property Type Values Description default Example More
footer slot Agrega los elementos en la parte inferior de el sidebar. Usage Open Close 
<template #footer>
  ...
</template>
header slot Agrega los elementos debajo de el logo y sobre los items. Open Close 
<template #header>
  ...
</template>
vs-sidebar-item#icon slot Es el espacio para agregar el icono o una letra representativa. Usage Open Close 
<template #icon>
  <i class='bx bx-home' ></i>
</template>
Last Updated: 20/9/2020 14:36:51

Card