Alert

A set of floating or in place notifications.

Basic

Basic alerts, in place and permanent.

Live demo

Basic.vue

Closable

Alerts can be closed Basic alerts, in place and permanent.

Live demo

Closable.vue

Time to live

Alerts can have a limited time to live that will make them disappear after a certain amount of time:

<bt-alert :ttl="3000">I'll stay visible for 3 seconds.</bt-alert>
<bt-alert :ttl="null">I'll always be visible.</bt-alert>

Live demo

Ttl.vue

Icons

You can easily add an icon via the icon and iconSet props:

<bt-alert icon="home">Welcome home.</bt-alert>

The default set being used is material, but you can change it:

<bt-alert icon-set="remix" icon="home">Welcome home.</bt-alert>

WARNING

Like everytime you use an icon, you must first import it (anywhere) in your app:

import "@banquette/vue-material-icons/home";
import "@banquette/vue-remix-icons/home";

Alerts stack

Alerts can also be added inside a stack, that will make them float above everything else. The stack has a position: fixed so alerts placed inside will float relative to the screen space.

Live demo

Stack.vue

Global function

The easiest way to show an alert is to use the global btShowAlert method exposed to all Vue apps created with the VueBuilder:

<!-- Show a "success" alert with infinite TTL. -->
<bt-button @click="btShowAlert('Changes saved successfully', 'success', 3000)">
    Success alert
</bt-button>

<!-- Show a default alert that will appear on the bottom right of the stack area. -->
<bt-button @click="btShowAlert({message: 'A message here', position: 'bottom-right', closable: true})">
    Default alert
</bt-button>

AlertService

To make the alert appear in the stack you can use the AlertService:

import { Injector } from "@banquette/dependency-injection";
import { AlertService } from "@banquette/vue-ui/alert";

const alert = Injector.Get(AlertService);

// Show a "success" alert with infinite TTL.
alert.show('A message here', 'success');

// Show a faded "danger" alert that will disappear after 3 seconds.
alert.show('A message here', 'danger faded', 3000);

// Show a closable primary alert that will appear on the bottom right of the stack area.
alert.show({message: 'A message here', variant: 'primary', position: 'bottom-right', closable: true});

In the above example, the stack is automatically created by the AlertService when show() is called.

The component

You can also create a stack manually:

<bt-alerts-stack></bt-alerts-stack>

By doing this, you can add an identifier to your stack so you can target it when you create an alert:

<bt-alerts-stack id="my-stack"></bt-alerts-stack>

// This alert will be added to the stack with the id "my-stack".
alert.show({stack: 'my-stack', message: 'A message here'});

Slots

You can also add your alerts manually in the stack by using slots:

<bt-alerts-stack>
    <template #top>
        <bt-alert>I'm on the center top</bt-alert>
        <bt-alert>I'm on the center top too</bt-alert>
    </template>
    <template #bottom-right>
        <bt-alert>I'm on the bottom right</bt-alert>
    </template>
    <template #top-left>
        <bt-alert>I'm on the top left</bt-alert>
    </template>
</bt-alerts-stack>

Local stack

By setting the fixed prop to false the stack becomes absolute and thus relative to its closest relative parent:

<bt-alerts-stack id="local" :fixed="false"></bt-alerts-stack>

An example

Here is an example combining all we've seen previously.

Live demo

Local-stack.vue

Props

Method	Description	Default
title	An optional title to show above the content. You can also override the title slot.	null
icon	The name of the icon to show, or null to show none.	null
icon-set	The name of set of icon to get the icon from.	'material'
ttl	Time to live. If > 0, defines the number of milliseconds the alert will stay alive.	null
closable	If true the end-user can close the alert by themselves.	false
allowHtml	If true, evaluate the HTML code present in the message and title.	false
transition	Name of the transition to apply when an alert is shown / hidden. If false, disable the transition.	undefined
visible	Bi-directional visibility control. Can be used with v-model: v-model:visible="...".	null

Slots

Name	Description
default	Contain the content of the alert. Props: close : a function that you can call to hide the alert.
title	Define the title of the alert. If the slot is defined, the title prop is not used anymore. Props: close : a function that you can call to hide the alert.

Theming

Below the list of all CSS variables and selectors available to customize the appearance of the component. If you're not familiar on how the theming works, please refer to the VueThemes documentation.

Variables

Variable	Default	Comment
fontFamily	var(--bt-font-family-base)	-
fontSize	var(--bt-font-size-base)	-
fontWeight	var(--bt-font-weight-normal)	-
borderColor	var(--bt-color-primary-100)	-
borderRadius	var(--bt-border-radius-base)	-
borderWidth	0	-
borderStyle	var(--bt-border-style-base)	-
textColor	var(--bt-color-primary-contrast)	-
backgroundColor	var(--bt-color-primary-50)	-
closeFillColor	currentColor	Color of the close icon.
closeFillHoverColor	currentColor	Color of the close icon when hovered.
closeBackgroundHoverColor	var(--bt-color-primary-100)	Background color of the close icon when hovered.

Selectors

Name	Comment	Pseudo classes	Attributes	Combinable with
root	The root element.	Any	Any	-
body	Inner container of the message.	-	-	root
closeIcon	Close icon.	-	-	root
icon	Message icon.	-	-	root

Examples:

cssSelectors: {
    root: {
        background: '...'
    },
    'root:hover': {
        outline: '...'
    },
    'root:hover body': {
        background: '...'
    },
    icon: {
        fill: '...'
    }
}