Alert

# 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

Easily generate an alert with this component apart from functionalities such as hiding it and showing it color change and title icons among other things

Vuesax Framework
Vuesax (pronounced / vjusacksňź /, as view sacks) is a UI components framework created with Vuejs to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user
Code copied

# Solid New

You can change the style of the component by adding the solid property, the property is aboolean so you can add it without any value.

Vuesax Framework
Vuesax (pronounced / vjusacksňź /, as view sacks) is a UI components framework created with Vuejs to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user
Code copied

# Border New

You can change the style of the component by adding the border property, the property is aboolean so you can add it without any value.

Vuesax Framework
Vuesax (pronounced / vjusacksňź /, as view sacks) is a UI components framework created with Vuejs to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user
Code copied

# Shadow New

You can change the style of the component by adding the shadow property, the property is aboolean so you can add it without any value.

Vuesax Framework
Vuesax (pronounced / vjusacksňź /, as view sacks) is a UI components framework created with Vuejs to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user
Code copied

# Gradient New

You can change the style of the component by adding the gradient property, the property is aboolean so you can add it without any value.

Vuesax Framework
Vuesax (pronounced / vjusacksňź /, as view sacks) is a UI components framework created with Vuejs to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user
Code copied

# Relief New

You can change the style of the component by adding the relief property, the property is aboolean so you can add it without any value.

Vuesax Framework
Vuesax (pronounced / vjusacksňź /, as view sacks) is a UI components framework created with Vuejs to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user
Code copied

# Animate

A beautiful and simple animation to show and hide the alert to the user

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

# Color

Change the color of the entire alert with the color property

In this example you can click on the buttons and dynamically change the color value to display it in the component vs-alert

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

# Icon

Add an icon to the alert easily with the 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
Vuesax (pronounced / vjusacksňź /, as view sacks) is a UI components framework created with Vuejs to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user
Code copied

# Title

You can add a descriptive title to the alert with the slot="title"

Vuesax Alert Title
Vuesax (pronounced / vjusacksňź /, as view sacks) is a UI components framework created with Vuejs to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user
Code copied

# Hidden Content New

You can hide the content of an alert and just leave the title to display the content dynamically

Vuesax Framework
Code copied

# Pagination New

There are times when we need to show a lot of content to the user but we don't want to extend the text and make the alert very large and tall

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

Use the footer slot to add a footer to the alert where for example you can add interactions with the user such as a button or a checkbox.

Vuesax Framework
Vuesax (pronounced / vjusacksňź /, as view sacks) is a UI components framework created with Vuejs to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user
Code copied

# Progress bar New

You can add a progress bar to the alert with the progress property and a number of (0 - 100)

Vuesax Framework
Vuesax (pronounced / vjusacksňź /, as view sacks) is a UI components framework created with Vuejs to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user
Code copied

# Closable New

You can add a close alert icon with the closable property, the property is aboolean so you can add it without any value.

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

# Time Close New

If you need an alert to have time to hide, you can do so by joining some properties and few lines of code

Code copied

# API

props

Property Type Values Description default Example More
v-model boolean boolean Determine if the component is 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 (pronounced / vjusacksňź /, as view sacks) is a <b>UI components framework</b>
    created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a
    Unique and pleasant style, Vuesax is created from scratch and designed for all types of
    developed from the frontend lover to the backend that wants to easily create
    your visual approach to the end user
  </vs-alert>
</template>
<script>
  export default {
    data:() => ({
      active: true,
    })
  }
</script>
color String primary success danger warning dark RGB HEX Change the color of the component and some of its sub components. primary Usage Open Close
<vs-alert color="success">
  <template #title>
    Vuesax Framework
  </template>
  Vuesax (pronounced / vjusacksňź /, as view sacks) is a <b>UI components framework</b>
  created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a
  Unique and pleasant style, Vuesax is created from scratch and designed for all types of
  developed from the frontend lover to the backend that wants to easily create
  your visual approach to the end user
</vs-alert>
type boolean solid border shadowgradientrelief Change the style of all the alert. default Usage Open Close
<vs-alert solid>
  <template #title>
    Vuesax Framework
  </template>
  Vuesax (pronounced / vjusacksňź /, as view sacks) is a <b>UI components framework</b>
  created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a
  Unique and pleasant style, Vuesax is created from scratch and designed for all types of
  developed from the frontend lover to the backend that wants to easily create
  your visual approach to the end user
</vs-alert>
hidden-content boolean boolean With this property you can hide the content of the alert. false Usage Open Close
<template>
  <vs-alert :hidden-content="true" >
    <template #title>
      Vuesax Framework
    </template>
    Vuesax (pronounced / vjusacksňź /, as view sacks) is a <b>UI components framework</b>
    created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a
    Unique and pleasant style, Vuesax is created from scratch and designed for all types of
    developed from the frontend lover to the backend that wants to easily create
    your visual approach to the end user
  </vs-alert>
</template>
page Number Number Determine the page that is active (this property is linked to the slots="page-{n}"). Usage Open Close
<template>
  <vs-alert :page="1" >
    <template #title>
      Vuesax Framework
    </template>
    <template #page-1>
      Page 1 - this page is a slot and here you can add either text, html elements or components
    </template>
  </vs-alert>
</template>
progress Number 0 - 100 Add a progress bar to the alert and the value is the percentage of width. Usage Open Close
<vs-alert progress="70">
  <template #title>
    Vuesax Framework
  </template>
  Vuesax (pronounced / vjusacksňź /, as view sacks) is a <b>UI components framework</b>
  created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a
  Unique and pleasant style, Vuesax is created from scratch and designed for all types of
  developed from the frontend lover to the backend that wants to easily create
  your visual approach to the end user
</vs-alert>
closable boolean boolean Add a button to close the alert (it is necessary to use 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 (pronounced / vjusacksňź /, as view sacks) is a <b>UI components framework</b>
    created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a
    Unique and pleasant style, Vuesax is created from scratch and designed for all types of
    developed from the frontend lover to the backend that wants to easily create
    your visual approach to the end user
  </vs-alert>
</template>
<script>
  export default {
    data:() => ({
      active: true,
    })
  }
</script>

slots

Property Type Values Description default Example More
icon slot Add an icon to the alert. Usage Open Close
<template>
  <vs-alert>
    <template #icon>
      <i class='bx bxs-chat'></i>
    </template>
    <template #title>
      Vuesax Alert Icon
    </template>
    Vuesax (pronounced / vjusacksňź /, as view sacks) is a <b>UI components framework</b>
    created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a
    Unique and pleasant style, Vuesax is created from scratch and designed for all types of
    developed from the frontend lover to the backend that wants to easily create
    your visual approach to the end user
  </vs-alert>
</template>
title slot Add a title to the alert. Usage Open Close
<template>
  <div class="center">
    <vs-alert>
      <template #title>
        Vuesax Alert Title
      </template>
      Vuesax (pronounced / vjusacksňź /, as view sacks) is a <b>UI components framework</b>
      created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a
      Unique and pleasant style, Vuesax is created from scratch and designed for all types of
      developed from the frontend lover to the backend that wants to easily create
      your visual approach to the end user
    </vs-alert>
  </div>
</template>
page-{n} slot (page-1 - page-{n}) Add the pages to the alert component if it is page one would be (slot="page-1"). Usage Open Close
<template>
  <vs-alert :page.sync="page" >
    <template #title>
      Vuesax Framework
    </template>

    <template #page-1>
      Page 1 - this page is a slot and here you can add either text,
      html elements or components
    </template>
  </vs-alert>
</template>
footer slot Add a footer to the alert component. Usage Open Close
<vs-alert>
  <template #title>
    Vuesax Framework
  </template>
  Vuesax (pronounced / vjusacksňź /, as view sacks) is a <b>UI components framework</b>
  created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a
  Unique and pleasant style, Vuesax is created from scratch and designed for all types of
  developed from the frontend lover to the backend that wants to easily create
  your visual approach to the end user
  <template #footer>
    <vs-button flat>
      Cancel
    </vs-button>
    <vs-button>
      Accept
    </vs-button>
  </template>
</vs-alert>
Last Updated: 1/13/2020, 12:32:50 PM