Navbar

# Navbar

# 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

genera un menu rápidamente con el componente vs-navbar, como tal el componente se divide en 3 slots (left, center(default), right) con los cuales puedes determinar la ubicación de los elementos, como sub componentes tenemos vs-navbar-item y vs-navbar-group

Puedes ver un ejemplo completo y cambiar las propiedades en tiempo real Aqui

child 1
child 2
child 3
Code copied

# Color

Cambia el color de el componente con la propiedad color o agregando directamente uno de los colores principales de vuesax

si quieres cambiar el color de texto a blanco puedes hacerlo con la propiedad text-white

child 1
child 2
child 3
Code copied

# Hide scroll

Agrega la funcionalidad de ocultar el navbar cuando el usuario hace scroll hacia abajo y de mostrar cuando sube

child 1
child 2
child 3
Code copied

# Group

Puedes agregar una lista de elementos dentro de un item con el componente vs-navbar-group y dentro de el agregar los componentes vs-navbar-item

Social
child 1
child 2
child 3
Code copied

# Padding Scroll

Agrega la funcionalidad de que el componente tiene un padding arriba y abajo que cuando se baja el scroll se elimina dando un efecto agradable

child 1
child 2
child 3
Code copied

# Square

Elimina la propiedad border-radius haciendo el componente cuadrado

child 1
child 2
child 3
Code copied

# Not line

Elimina la linea de efecto active de el componente

child 1
child 2
child 3
Code copied

# API

props

Property Type Values Description default Example More
fixed boolean truefalse Define si el componente esta fijo en la pantalla. false Open Close 
<vs-navbar fixed>
  ...
</vs-navbar>
shadow boolean truefalse Agrega una sombre al componente. primary Open Close 
<vs-navbar shadow>
  ...
</vs-navbar>
shadowScroll boolean truefalse Agrega la funcionalidad de agregar shadow al componente cuando el scrollTop es mas de 0. false Open Close 
<vs-navbar shadow-scroll>
  ...
</vs-navbar>
hideScroll boolean truefalse Agrega la funcionalidad de ocultar y mostrar el componente en base a si se baja o sube el scroll. false Usage Open Close 
<vs-navbar hide-scroll>
  ...
</vs-navbar>
textWhite boolean truefalse Cambia el color de texto de los items a blanco. false Usage Open Close 
<vs-navbar text-white>
  ...
</vs-navbar>
square boolean truefalse Cambia el border radius a 0 haciendo el componente cuadrado. false Usage Open Close 
<vs-navbar square>
  ...
</vs-navbar>
paddingScroll boolean truefalse determina si el componente tiene padding y al usuario hacer scroll se elimina haciendo un efecto. false Usage Open Close 
<vs-navbar padding-scroll>
  ...
</vs-navbar>
notLine boolean truefalse Elimina la linea de active en el componente. false Usage Open Close 
<vs-navbar not-line>
  ...
</vs-navbar>
leftCollapsed boolean truefalse Agrega la funcionalidad de que cuando los elementos de este slot no puedan estar correctamente se eliminen visualmente. false Usage Open Close 
<vs-navbar left-collapsed>
  ...
</vs-navbar>
centerCollapsed boolean truefalse Agrega la funcionalidad de que cuando los elementos de este slot no puedan estar correctamente se eliminen visualmente. false Usage Open Close 
<vs-navbar center-collapsed>
  ...
</vs-navbar>
rightCollapsed boolean truefalse Agrega la funcionalidad de que cuando los elementos de este slot no puedan estar correctamente se eliminen visualmente. false Usage Open Close 
<vs-navbar right-collapsed>
  ...
</vs-navbar>
targetScroll boolean truefalse Determina el elemento al que se le va a solicitar el evento scroll. document Usage Open Close 
<vs-navbar padding-scroll="#my-element">
  ...
</vs-navbar>
item:active boolean truefalse determina si el componente esta en estado de activo. false Usage Open Close 
<vs-navbar-item active>
  ...
</vs-navbar-item>
item:to string url Usa vue-router para generar una nueva vista en base al string proporcionado. false Open Close 
<vs-navbar-item to="/">
  ...
</vs-navbar-item>
item:id string id Es el id que se usa para cambiar el valor de el v-model de el componente padre y asi poder determinar el estado de active en base a la interacción de el usuario. false Open Close 
<vs-navbar-item id="myIdItem">
  ...
</vs-navbar-item>
item:href string url Genera una nueva pestaña con la url proporcionada. false Open Close 
<vs-navbar-item href="http://vuesax.com/">
  ...
</vs-navbar-item>
item:target string html-target Determina si la pestaña es una nueva o si remplaza la actual. _blank Open Close 
<vs-navbar-item target="_self">
  ...
</vs-navbar-item>

slots

Property Type Values Description default Example More
default slot Agrega los elementos en el centro de el componente. Usage Open Close 
<vs-navbar v-model="active">
  <vs-navbar-item :active="active == 'guide'" id="guide">
    Guide
  </vs-navbar-item>
</vs-navbar>
left slot Agrega los elementos en la parte izquierda de el componente. Usage Open Close 
<template #left>
  <img src="/logo2.png" alt="">
</template>
right slot Agrega los elementos en la parte derecha de el componente. Usage Open Close 
<template #right>
  <vs-button flat >Login</vs-button>
  <vs-button>Get Started</vs-button>
</template>
Last Updated: 19/6/2020 18:27:15

Sidebar