6 changed files with 172 additions and 146 deletions
@ -0,0 +1,151 @@ |
|||
<template> |
|||
<QuickNav selected="Profile"></QuickNav> |
|||
<!-- CONTENT --> |
|||
<section id="Content" class="p-6 pb-24"> |
|||
<!-- Heading --> |
|||
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8"> |
|||
Test |
|||
</h1> |
|||
|
|||
<div class="mb-8"> |
|||
<h2 class="text-xl font-bold mb-4">Notiwind Alert Test Suite</h2> |
|||
|
|||
<button |
|||
@click=" |
|||
this.$notify( |
|||
{ |
|||
group: 'alert', |
|||
type: 'toast', |
|||
text: 'I\'m a toast. Don\'t mind me.', |
|||
}, |
|||
5000, |
|||
) |
|||
" |
|||
class="font-bold uppercase bg-slate-400 text-white px-3 py-2 rounded-md mr-2" |
|||
> |
|||
Toast (self-dismiss) |
|||
</button> |
|||
|
|||
<button |
|||
@click=" |
|||
this.$notify( |
|||
{ |
|||
group: 'alert', |
|||
type: 'info', |
|||
title: 'Information Alert', |
|||
text: 'Just wanted you to know.', |
|||
}, |
|||
-1, |
|||
) |
|||
" |
|||
class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2" |
|||
> |
|||
Info |
|||
</button> |
|||
|
|||
<button |
|||
@click=" |
|||
this.$notify( |
|||
{ |
|||
group: 'alert', |
|||
type: 'success', |
|||
title: 'Success Alert', |
|||
text: 'Congratulations!', |
|||
}, |
|||
-1, |
|||
) |
|||
" |
|||
class="font-bold uppercase bg-emerald-600 text-white px-3 py-2 rounded-md mr-2" |
|||
> |
|||
Success |
|||
</button> |
|||
|
|||
<button |
|||
@click=" |
|||
this.$notify( |
|||
{ |
|||
group: 'alert', |
|||
type: 'warning', |
|||
title: 'Warning Alert', |
|||
text: 'You might wanna look at this.', |
|||
}, |
|||
-1, |
|||
) |
|||
" |
|||
class="font-bold uppercase bg-amber-600 text-white px-3 py-2 rounded-md mr-2" |
|||
> |
|||
Warning |
|||
</button> |
|||
|
|||
<button |
|||
@click=" |
|||
this.$notify( |
|||
{ |
|||
group: 'alert', |
|||
type: 'danger', |
|||
title: 'Danger Alert', |
|||
text: 'Something terrible has happened!', |
|||
}, |
|||
-1, |
|||
) |
|||
" |
|||
class="font-bold uppercase bg-rose-600 text-white px-3 py-2 rounded-md mr-2" |
|||
> |
|||
Danger |
|||
</button> |
|||
|
|||
<button |
|||
@click=" |
|||
this.$notify( |
|||
{ |
|||
group: 'modal', |
|||
type: 'notification-permission', |
|||
}, |
|||
-1, |
|||
) |
|||
" |
|||
class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2" |
|||
> |
|||
Notif ON |
|||
</button> |
|||
|
|||
<button |
|||
@click=" |
|||
this.$notify( |
|||
{ |
|||
group: 'modal', |
|||
type: 'notification-mute', |
|||
}, |
|||
-1, |
|||
) |
|||
" |
|||
class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2" |
|||
> |
|||
Notif MUTE |
|||
</button> |
|||
|
|||
<button |
|||
@click=" |
|||
this.$notify( |
|||
{ |
|||
group: 'modal', |
|||
type: 'notification-off', |
|||
}, |
|||
-1, |
|||
) |
|||
" |
|||
class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2" |
|||
> |
|||
Notif OFF |
|||
</button> |
|||
</div> |
|||
</section> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Component, Vue } from "vue-facing-decorator"; |
|||
import QuickNav from "@/components/QuickNav.vue"; |
|||
|
|||
@Component({ components: { QuickNav } }) |
|||
export default class Help extends Vue {} |
|||
</script> |
Loading…
Reference in new issue