257 lines
8.6 KiB
Vue
257 lines
8.6 KiB
Vue
|
<script>
|
||
|
|
import Layout from '../../layouts/main'
|
||
|
|
import PageHeader from '../../components/page-header'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Alerts component
|
||
|
|
*/
|
||
|
|
export default {
|
||
|
|
components: { Layout, PageHeader },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: 'Alerts',
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
text: 'UI Elements',
|
||
|
|
href: '/',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: 'Alerts',
|
||
|
|
active: true,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
dismissSecs: 5,
|
||
|
|
dismissCountDown: 0,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
countDownChanged(dismissCountDown) {
|
||
|
|
this.dismissCountDown = dismissCountDown;
|
||
|
|
},
|
||
|
|
showAlert() {
|
||
|
|
this.dismissCountDown = this.dismissSecs;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Layout>
|
||
|
|
<PageHeader :title="title" :items="items" />
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-6">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">Default Alerts</h4>
|
||
|
|
<p class="card-title-desc">
|
||
|
|
Alerts are available for any length of text, as well as an
|
||
|
|
optional dismiss button. For proper styling, use one of the four
|
||
|
|
<strong>required</strong> contextual classes (e.g.,
|
||
|
|
<code class="highlighter-rouge">.alert-success</code>). For inline
|
||
|
|
dismissal, use the alerts jQuery plugin.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class>
|
||
|
|
<b-alert show variant="primary"
|
||
|
|
>A simple primary alert—check it out!</b-alert
|
||
|
|
>
|
||
|
|
<b-alert show variant="secondary"
|
||
|
|
>A simple secondary alert—check it out!</b-alert
|
||
|
|
>
|
||
|
|
<b-alert show variant="success"
|
||
|
|
>A simple success alert—check it out!</b-alert
|
||
|
|
>
|
||
|
|
<b-alert show variant="danger"
|
||
|
|
>A simple danger alert—check it out!</b-alert
|
||
|
|
>
|
||
|
|
<b-alert show variant="warning"
|
||
|
|
>A simple warning alert—check it out!</b-alert
|
||
|
|
>
|
||
|
|
<b-alert show variant="info"
|
||
|
|
>A simple info alert—check it out!</b-alert
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
|
||
|
|
<div class="col-xl-6">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">Link color</h4>
|
||
|
|
<p class="card-title-desc">
|
||
|
|
Use the
|
||
|
|
<code class="highlighter-rouge">.alert-link</code> utility class
|
||
|
|
to quickly provide matching colored links within any alert.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class>
|
||
|
|
<b-alert show variant="primary">
|
||
|
|
A simple primary alert with
|
||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a
|
||
|
|
click if you like.
|
||
|
|
</b-alert>
|
||
|
|
<b-alert show variant="secondary">
|
||
|
|
A simple secondary alert with
|
||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a
|
||
|
|
click if you like.
|
||
|
|
</b-alert>
|
||
|
|
<b-alert show variant="success">
|
||
|
|
A simple success alert with
|
||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a
|
||
|
|
click if you like.
|
||
|
|
</b-alert>
|
||
|
|
<b-alert show variant="danger">
|
||
|
|
A simple danger alert with
|
||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a
|
||
|
|
click if you like.
|
||
|
|
</b-alert>
|
||
|
|
<b-alert show variant="warning">
|
||
|
|
A simple warning alert with
|
||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a
|
||
|
|
click if you like.
|
||
|
|
</b-alert>
|
||
|
|
<b-alert show variant="info">
|
||
|
|
A simple info alert with
|
||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a
|
||
|
|
click if you like.
|
||
|
|
</b-alert>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-6">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">Dismissing</h4>
|
||
|
|
<p class="card-title-desc">
|
||
|
|
Add a dismiss button and the
|
||
|
|
<code>.alert-dismissible</code> class, which adds extra padding to
|
||
|
|
the right of the alert and positions the
|
||
|
|
<code>.close</code> button.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class>
|
||
|
|
<b-alert show dismissible variant="primary"
|
||
|
|
>A simple primary alert—check it out!</b-alert
|
||
|
|
>
|
||
|
|
<b-alert show dismissible variant="secondary"
|
||
|
|
>A simple secondary alert—check it out!</b-alert
|
||
|
|
>
|
||
|
|
<b-alert show dismissible variant="success"
|
||
|
|
>A simple success alert—check it out!</b-alert
|
||
|
|
>
|
||
|
|
<b-alert show dismissible variant="danger"
|
||
|
|
>A simple danger alert—check it out!</b-alert
|
||
|
|
>
|
||
|
|
<b-alert show dismissible variant="warning"
|
||
|
|
>A simple warning alert—check it out!</b-alert
|
||
|
|
>
|
||
|
|
<b-alert show dismissible variant="info"
|
||
|
|
>A simple info alert—check it out!</b-alert
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
|
||
|
|
<div class="col-xl-6">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title mb-4">With Icon</h4>
|
||
|
|
|
||
|
|
<div class>
|
||
|
|
<b-alert show dismissible variant="primary">
|
||
|
|
<i class="mdi mdi-bullseye-arrow me-2"></i>A simple primary
|
||
|
|
alert—check it out!
|
||
|
|
</b-alert>
|
||
|
|
|
||
|
|
<b-alert show dismissible variant="secondary">
|
||
|
|
<i class="mdi mdi-grease-pencil me-2"></i>A simple secondary
|
||
|
|
alert—check it out!
|
||
|
|
</b-alert>
|
||
|
|
|
||
|
|
<b-alert show dismissible variant="success">
|
||
|
|
<i class="mdi mdi-check-all me-2"></i>A simple success
|
||
|
|
alert—check it out!
|
||
|
|
</b-alert>
|
||
|
|
<b-alert show dismissible variant="danger">
|
||
|
|
<i class="mdi mdi-block-helper me-2"></i>A simple danger
|
||
|
|
alert—check it out!
|
||
|
|
</b-alert>
|
||
|
|
<b-alert show dismissible variant="warning">
|
||
|
|
<i class="mdi mdi-alert-outline me-2"></i>A simple warning
|
||
|
|
alert—check it out!
|
||
|
|
</b-alert>
|
||
|
|
<b-alert show dismissible variant="info">
|
||
|
|
<i class="mdi mdi-alert-circle-outline me-2"></i>A simple info
|
||
|
|
alert—check it out!
|
||
|
|
</b-alert>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-6">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">Live Example</h4>
|
||
|
|
<p class="card-title-desc">
|
||
|
|
Click the button below to show an alert (hidden with inline styles
|
||
|
|
to start), then dismiss (and destroy) it with the built-in close
|
||
|
|
button.
|
||
|
|
</p>
|
||
|
|
<b-alert
|
||
|
|
:show="dismissCountDown"
|
||
|
|
dismissible
|
||
|
|
variant="warning"
|
||
|
|
@dismissed="dismissCountDown = 0"
|
||
|
|
@dismiss-count-down="countDownChanged"
|
||
|
|
>
|
||
|
|
This alert will dismiss after {{ dismissCountDown }} seconds...
|
||
|
|
</b-alert>
|
||
|
|
<b-button @click="showAlert" variant="primary" class="m-1">
|
||
|
|
Show alert with count-down timer
|
||
|
|
</b-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
|
||
|
|
<div class="col-xl-6">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title">Additional content</h4>
|
||
|
|
<p class="card-title-desc">
|
||
|
|
Alerts can also contain additional HTML elements like headings,
|
||
|
|
paragraphs and dividers.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<b-alert variant="success" show>
|
||
|
|
<h4 class="alert-heading">Well done!</h4>
|
||
|
|
<p>
|
||
|
|
Aww yeah, you successfully read this important alert message.
|
||
|
|
This example text is going to run a bit longer so that you can
|
||
|
|
see how spacing within an alert works with this kind of content.
|
||
|
|
</p>
|
||
|
|
<hr />
|
||
|
|
<p class="mb-0">
|
||
|
|
Whenever you need to, be sure to use margin utilities to keep
|
||
|
|
things nice and tidy.
|
||
|
|
</p>
|
||
|
|
</b-alert>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Layout>
|
||
|
|
</template>
|