Notification

Bold notification blocks, to alert your users of something

The notification is a simple colored block meant to draw the attention to the user about something. As such, it can be used as a pinned notification in the corner of the viewport. That's why it supports the use of the delete element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, consectetur adipiscing elit

<div class="notification">
    <button class="delete"></button>
    Lorem ipsum dolor sit amet, consectetur
    adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>,
    tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
    Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
    consectetur adipiscing elit
</div>

Colors

The notification element is available in all the different colors defined by the $colors Sass map.
Each color now comes in its light version. Simply append the is-light modifier to obtain the light version of the notification.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit

<div class="notification is-primary">
    <button class="delete"></button>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</div>

<div class="notification is-primary is-light">
    <button class="delete"></button>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</div>

<div class="notification is-mix">
    <button class="delete"></button>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</div>

<div class="notification is-mix is-light">
    <button class="delete"></button>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</div>

<div class="notification is-info">
    <button class="delete"></button>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</div>

<div class="notification is-info is-light">
    <button class="delete"></button>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</div>

<div class="notification is-success">
    <button class="delete"></button>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</div>

<div class="notification is-success is-light">
    <button class="delete"></button>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</div>

<div class="notification is-warning">
    <button class="delete"></button>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</div>

<div class="notification is-warning is-light">
    <button class="delete"></button>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</div>

<div class="notification is-danger">
    <button class="delete"></button>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</div>

<div class="notification is-danger is-light">
    <button class="delete"></button>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit

<template>
    <section>
        <button class="button block" @click="isActive = !isActive">Toggle</button>
        <b-notification :active.sync="isActive" aria-close-label="Close notification">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isActive: true
            }
        }
    }
</script>

Types

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit

<template>
    <section>
        <b-notification aria-close-label="Close notification">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>

        <b-notification type="is-info" aria-close-label="Close notification">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>

        <b-notification type="is-success" aria-close-label="Close notification">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>

        <b-notification
            type="is-warning"
            aria-close-label="Close notification"
            role="alert">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>

        <b-notification
            type="is-danger"
            aria-close-label="Close notification"
            role="alert">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>
    </section>
</template>

Icons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit

<template>
    <section>
        <b-notification
            type="is-info"
            has-icon
            aria-close-label="Close notification">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>

        <b-notification
            type="is-success"
            has-icon
            aria-close-label="Close notification">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>

        <b-notification
            type="is-warning"
            has-icon
            aria-close-label="Close notification"
            role="alert">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>

        <b-notification
            type="is-danger"
            has-icon
            aria-close-label="Close notification"
            role="alert">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>

        <b-notification
            type="is-dark"
            has-icon
            icon="user"
            aria-close-label="Close notification"
            role="alert">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>
    </section>
</template>

Auto Close

Notification will be automatically closed after duration.

<template>
    <section>
        <button class="button block" @click="isActive = true" :disabled="isActive">Show</button>
        <b-notification
            auto-close type="is-danger"
            :active.sync="isActive"
            aria-close-label="Close notification">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isActive: false
            }
        }
    }
</script>

Programmatically opening

<template>
    <section>
        <button class="button" @click="simple">
            Launch notification (default)
        </button>

        <button class="button is-success" @click="success">
            Launch notification (custom)
        </button>

        <button class="button is-danger" @click="danger">
            Launch notification (custom)
        </button>
    </section>
</template>

<script>
    export default {
        methods: {
            simple() {
                this.$buval.notification.open('Something happened')
            },
            success() {
                this.$buval.notification.open({
                    message: 'Something happened correctly!',
                    type: 'is-success'
                })
            },
            danger() {
                this.$buval.notification.open({
                    duration: 5000,
                    message: `Something's not good, also I'm on bottom`,
                    position: 'is-bottom-right',
                    type: 'is-danger',
                    hasIcon: true
                })
            }
        }
    }
</script>

From outside Vue instance

You can use it on Vuex or VueRouter using this syntax:

import { NotificationProgrammatic as Notification } from '@apolokak/buval'
Notification.open('Notify!')

API

Name	Description	Type	Value	Default
`type`	Type (color) of the notification, optional	String	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-mix`, `is-info`, `is-success`, `is-warning`, `is-danger`, and any other colors you've set in the `$colors` list on Sass	—
`active`	Whether notification is active or not, use the `.sync` modifier to make it two-way binding	Boolean	—	`true`
`closable`	Adds an 'X' button that closes the notification	Boolean	—	`true`
`auto-close`	Hide notification after `duration` only not programmatic	Boolean	—	`false`
`duration`	Visibility duration in miliseconds	Number	—	`2000`
`animation`	Custom animation (transition name)	String	—	`fade`
`icon-pack`	Icon pack to use	String	`mdi`, `fa`, `fas`, `far`, `fad`, `fal`	`fa`
`has-icon`	Adds an icon on the left side depending on the `type` (or the `icon` prop if defined)	Boolean	—	`false`
`icon`	Icon name to use with `has-icon`	Boolean	—	—
`aria-close-label`	Label for the close button, to be read by accessibility screenreaders.	String	—	—
`message`	Message text (can contain HTML). Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.	String	—	—
`position`	Which position the notification will appear when programmatically	String	`is-top-right`, `is-top`, `is-top-left`, `is-bottom-right`, `is-bottom`, `is-bottom-left`	`is-top-right`
`queue`	If should queue with others notices (snackbar/toast/notification)	Boolean	—	`true`
`indefinite`	Show the Notification indefinitely until it is dismissed when programmatically	Boolean	—	`false`
`container`	DOM element the toast will be created on. Note that this also changes the `position` of the toast from `fixed` to `absolute`. Meaning that the container should be `fixed`.	String	—	`body`

Name	Description	Parameters
`close`	Triggers when user closes the notification	—

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Type	Default
`$notification-background-color`	color	`$background`
`$notification-code-background-color`	color	`$scheme-main`
`$notification-radius`	size	`$radius`
`$notification-padding`	size	`1.25rem 2.5rem 1.25rem 1.5rem`