Browse Source
Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/pulls/75kb/add-usage-guide
trentlarson
1 year ago
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