You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.5 KiB
63 lines
1.5 KiB
<template>
|
|
<b-container fluid>
|
|
<b-row>
|
|
<b-col sm='4'>1 of 2</b-col>
|
|
<b-col sm='2'>2 of 2</b-col>
|
|
</b-row>
|
|
<b-alert show>Default Alert</b-alert>
|
|
|
|
<b-alert variant="success" show>Success Alert</b-alert>
|
|
|
|
<b-alert v-model="showDismissibleAlert" variant="danger" dismissible>
|
|
Dismissible Alert!
|
|
</b-alert>
|
|
<img src="~@images/bluedialog.png" alt="">
|
|
<b-alert
|
|
:show="dismissCountDown"
|
|
dismissible
|
|
variant="warning"
|
|
@dismissed="dismissCountDown=0"
|
|
@dismiss-count-down="countDownChanged"
|
|
>
|
|
<p>This alert will dismiss after {{ dismissCountDown }} seconds...</p>
|
|
<b-progress
|
|
variant="warning"
|
|
:max="dismissSecs"
|
|
:value="dismissCountDown"
|
|
height="4px"
|
|
></b-progress>
|
|
</b-alert>
|
|
|
|
<b-button @click="showAlert" variant="info" class="m-1">
|
|
Show alert with count-down timer
|
|
</b-button>
|
|
<b-button @click="showDismissibleAlert=true" variant="info" class="m-1">
|
|
Show dismissible alert ({{ showDismissibleAlert ? 'visible' : 'hidden' }})
|
|
</b-button>
|
|
</b-container>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
dismissSecs: 10,
|
|
dismissCountDown: 0,
|
|
showDismissibleAlert: false
|
|
}
|
|
},
|
|
methods: {
|
|
countDownChanged(dismissCountDown) {
|
|
this.dismissCountDown = dismissCountDown
|
|
},
|
|
showAlert() {
|
|
this.dismissCountDown = this.dismissSecs
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss'>
|
|
@import "./style.scss";
|
|
|
|
</style>
|
|
|