# Alert

# 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 alert fácilmente con este componente aparte de funcionalidades como ocultarlo y mostrarlo cambio de color y titulo iconos entre otras cosas

Vuesax Framework

Vuesax (pronunciado / vjusacksː /, como view sacks) es un framework de componentes UI creado con Vuejs para hacer proyectos fácilmente y con un estilo único y agradable, vuesax esta creado desde cero y pensado para todo tipo de desarrollador desde el amante del frontend hasta el backend que quiere crear fácilmente su enfoque visual al usuario final

Code copied

# Solid New

Puedes cambiar el estilo del componente al agregar la propiedad solid, la propiedad es un boolean por lo que puedes agregarla sin ningún valor.

Vuesax Framework

Code copied

# Border New

Puedes cambiar el estilo del componente al agregar la propiedad border, la propiedad es un boolean por lo que puedes agregarla sin ningún valor.

Vuesax Framework

Code copied

# Shadow New

Puedes cambiar el estilo del componente al agregar la propiedad shadow, la propiedad es un boolean por lo que puedes agregarla sin ningún valor.

Vuesax Framework

Code copied

# Gradient New

Puedes cambiar el estilo del componente al agregar la propiedad gradient, la propiedad es un boolean por lo que puedes agregarla sin ningún valor.

Vuesax Framework

Code copied

# Relief New

Puedes cambiar el estilo del componente al agregar la propiedad relief, la propiedad es un boolean por lo que puedes agregarla sin ningún valor.

Vuesax Framework

Code copied

# Animate

Una hermosa y simple animación al mostrar y ocultar el alert al usuario

Vuesax Framework

Code copied

# Color

Cambia el color de todo el alert con la propiedad color

En este ejemplo puedes hacer click en los botones y cambiar dinámicamente el valor de color para visualizarlo en el componente vs-alert

Vuesax Framework

Code copied

# Icon

Agrega un icono al alert facilmente con el slot icon

Iconos por defecto

Vuesax no usa ninguna librería o fuente de iconos por defecto, con esto damos la libertad de usar la que prefieras Todos los componentes que usen en algún lugar un icono por defecto como el de close en un Alert o un Popup va a ser un svg para no tener que instalar ningún tipo de fuente externa, y se podrá sustituir con un slot="icon" por el icono de su preferencia

Vuesax Docs Icons

Estos documentos y los ejemplos usan la libreria de componentes boxicons, no es obligatoria o necesaria para el uso de Vuesax pero la recomendamos por su amplia gama de iconos y como complementan visualmente el framework

Vuesax Alert Icon

Code copied

# Title

Puedes agregarle al alert un titulo descriptivo con el slot="title"

Vuesax Alert Title

Code copied

# Hidden Content New

Puedes ocultar el contenido de un alert y solo dejar el titulo para mostrar el contenido de manera dinámica

Vuesax Framework

Code copied

# Pagination New

hay ocasiones en que necesitamos mostrar mucho contenido al usuario pero no queremos extender el texto y hacer que el alert sea muy grande y alto

Vuesax Framework

Pagina 1 - esta pagina es un slot y aquí adentro puedes agregar ya sea texto, elementos html o componentes

1 / 3

Code copied

usa el slot footer para agregar un footer al alert donde por ejemplo puedes agregar interacciones con el usuario como un botón o un checkbox.

Vuesax Framework

Code copied

# Progress bar New

Puedes agregar una barra de progreso al alert con la propiedad progress y un numero del (0 - 100)

Vuesax Framework

Code copied

# Closable New

Puedes agregar un icono de cerrar alert con la propiedad closable, la propiedad es un boolean por lo que puedes agregarla sin ningún valor.

Vuesax Framework

Code copied

# Time Close New

Si necesitas que un alert tenga un tiempo para ocultarse puedes hacerlo uniendo algunas propiedades y pocas lineas de código

Code copied

# API

props

Property	Type	Values	Description	default	Example
v-model	boolean	boolean	determina si el componente se encuentra visible.	true	Usage Open Close
<template> <vs-button flat @click="active=!active"> {{ active ? 'Close Alert' : 'Open Alert' }} </vs-button> <vs-alert closable v-model="active"> <template #title> Vuesax Framework </template> Vuesax (pronunciado / vjusacksː /, como view sacks) es un <b>framework de componentes UI</b> creado con <a href="https://vuejs.org/">Vuejs</a> para hacer proyectos fácilmente y con un estilo único y agradable, vuesax esta creado desde cero y pensado para todo tipo de desarrollador desde el amante del frontend hasta el backend que quiere crear fácilmente su enfoque visual al usuario final </vs-alert> </template> <script> export default { data:() => ({ active: true, }) } </script>
color	String	primary success danger warning dark RGB HEX	Cambia el color del componente y algunos de sus sub componentes.	primary	Usage Open Close
`<vs-alert color="success"> <template #title> Vuesax Framework </template> Vuesax (pronunciado / vjusacksː /, como view sacks) es un <b>framework de componentes UI</b> creado con <a href="https://vuejs.org/">Vuejs</a> para hacer proyectos fácilmente y con un estilo único y agradable, vuesax esta creado desde cero y pensado para todo tipo de desarrollador desde el amante del frontend hasta el backend que quiere crear fácilmente su enfoque visual al usuario final </vs-alert>`
type	boolean	solid border shadowgradientrelief	cambia el estilo de todo el alert.	default	Usage Open Close
`<vs-alert solid> <template #title> Vuesax Framework </template> Vuesax (pronunciado / vjusacksː /, como view sacks) es un <b>framework de componentes UI</b> creado con <a href="https://vuejs.org/">Vuejs</a> para hacer proyectos fácilmente y con un estilo único y agradable, vuesax esta creado desde cero y pensado para todo tipo de desarrollador desde el amante del frontend hasta el backend que quiere crear fácilmente su enfoque visual al usuario final </vs-alert>`
hidden-content	boolean	boolean	con esta propiedad puedes ocultar el contenido de el alert.	false	Usage Open Close
<template> <vs-alert :hidden-content="true" > <template #title> Vuesax Framework </template> Vuesax (pronunciado / vjusacksː /, como view sacks) es un <b>framework de componentes UI</b> creado con <a href="https://vuejs.org/">Vuejs</a> para hacer proyectos fácilmente y con un estilo único y agradable, vuesax esta creado desde cero y pensado para todo tipo de desarrollador desde el amante del frontend hasta el backend que quiere crear fácilmente su enfoque visual al usuario final </vs-alert> </template>
page	Number	Number	determina la pagina que esta activa (esta propiedad va unida con los slots="page-{n}").		Usage Open Close
`<template> <vs-alert :page="1" > <template #title> Vuesax Framework </template> <template #page-1> Pagina 1 - esta pagina es un slot y aquí adentro puedes agregar ya sea texto, elementos html o componentes </template> <template #page-2> Pagina 2 - En esta otra pagina puedes poner también lo que necesites y es dinámico osea que puedes agregar cuantas paginas necesites </template> <template #page-3> Pagina 3 - esta es la ultima pagina de el ejemplo </template> </vs-alert> </template>`
progress	Number	0 - 100	agrega una barra de progreso al alert y el valor es el porcentaje de ancho.		Usage Open Close
`<vs-alert progress="70"> <template #title> Vuesax Framework </template> Vuesax (pronunciado / vjusacksː /, como view sacks) es un <b>framework de componentes UI</b> creado con <a href="https://vuejs.org/">Vuejs</a> para hacer proyectos fácilmente y con un estilo único y agradable, vuesax esta creado desde cero y pensado para todo tipo de desarrollador desde el amante del frontend hasta el backend que quiere crear fácilmente su enfoque visual al usuario final </vs-alert>`
closable	boolean	boolean	agrega un botón para poder cerrar el alert (es necesario el uso de v-model).	false	Usage Open Close
<template> <vs-button flat @click="active=!active"> {{ active ? 'Close Alert' : 'Open Alert' }} </vs-button> <vs-alert closable v-model="active"> <template #title> Vuesax Framework </template> Vuesax (pronunciado / vjusacksː /, como view sacks) es un <b>framework de componentes UI</b> creado con <a href="https://vuejs.org/">Vuejs</a> para hacer proyectos fácilmente y con un estilo único y agradable, vuesax esta creado desde cero y pensado para todo tipo de desarrollador desde el amante del frontend hasta el backend que quiere crear fácilmente su enfoque visual al usuario final </vs-alert> </template> <script> export default { data:() => ({ active: true, }) } </script>

slots

Property	Type	Values	Description	Example
icon	slot		agrega un icono al alert.	Usage Open Close
<template> <vs-alert> <template #icon> <i class='bx bxs-chat'></i> </template> <template #title> Vuesax Alert Icon </template> Vuesax (pronunciado / vjusacksː /, como view sacks) es un <b>framework de componentes UI</b> creado con <a href="https://vuejs.org/">Vuejs</a> para hacer proyectos fácilmente y con un estilo único y agradable, vuesax esta creado desde cero y pensado para todo tipo de desarrollador desde el amante del frontend hasta el backend que quiere crear fácilmente su enfoque visual al usuario final </vs-alert> </template>
title	slot		Agrega un titulo al alert.	Usage Open Close
<template> <div class="center"> <vs-alert> <template #title> Vuesax Alert Title </template> Vuesax (pronunciado / vjusacksː /, como view sacks) es un <b>framework de componentes UI</b> creado con <a href="https://vuejs.org/">Vuejs</a> para hacer proyectos fácilmente y con un estilo único y agradable, vuesax esta creado desde cero y pensado para todo tipo de desarrollador desde el amante del frontend hasta el backend que quiere crear fácilmente su enfoque visual al usuario final </vs-alert> </div> </template>
page-{n}	slot	(page-1 - page-{n})	Agrega las paginas al componente alert si es la pagina uno seria (slot="page-1").	Usage Open Close
`<template> <vs-alert :page.sync="page" > <template #title> Vuesax Framework </template> <template #page-1> Pagina 1 - esta pagina es un slot y aquí adentro puedes agregar ya sea texto, elementos html o componentes </template> <template #page-2> Pagina 2 - En esta otra pagina puedes poner también lo que necesites y es dinámico osea que puedes agregar cuantas paginas necesites </template> <template #page-3> Pagina 3 - esta es la ultima pagina de el ejemplo </template> </vs-alert> </template>`
animate	slot		texto descriptivo.	Usage Open Close
`código...`
footer	slot		Agrega un footer al componente alert.	Usage Open Close
<vs-alert> <template #title> Vuesax Framework </template> Vuesax (pronunciado / vjusacksː /, como view sacks) es un <b>framework de componentes UI</b> creado con <a href="https://vuejs.org/">Vuejs</a> para hacer proyectos fácilmente y con un estilo único y agradable, vuesax esta creado desde cero y pensado para todo tipo de desarrollador desde el amante del frontend hasta el backend que quiere crear fácilmente su enfoque visual al usuario final <template #footer> <vs-button flat> Cancel </vs-button> <vs-button> Accept </vs-button> </template> </vs-alert>

Button Loading

# Alert

# Default

# Solid New

# Border New

# Shadow New

# Gradient New

# Relief New

# Animate

# Color

# Icon

# Title

# Hidden Content New

# Pagination New

# footer New

# Progress bar New

# Closable New

# Time Close New

# API