svcm/oa
1
0
Fork 0
mirror of https://git.hmsn.ink/kospo/svcm/oa.git synced 2026-03-20 06:03:39 +09:00
Code Issues Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
bangae1
2025-05-24 01:49:48 +09:00
commit 62abbcf4eb
2376 changed files with 325522 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
documentation/plugins/notyf/notyf-blue-documentation.md Normal file
View File

@@ -0,0 +1,47 @@
### Blue toast
Bside the two native types, `Notyf` allows you to create custom toast types.
You can change all the available option defaults, like `position` or `duration`.
You can configure a new toast type and even assign the icon of your choice.
Check the code example for more details.
<!--code-->
```vue
<script setup lang="ts">
import { Notyf } from 'notyf'
const notyf = new Notyf({
duration: 2000,
position: {
x: 'right',
y: 'bottom',
},
types: [
{
type: 'blue',
background: themeColors.blue,
icon: {
className: 'fas fa-check',
tagName: 'i',
text: '',
},
},
],
})
const blueToast = () => {
notyf.open({
type: 'blue',
message: 'This is some useful information that you might need.',
})
}
</script>
<template>
<VButton bold @click="blueToast">
Blue Toast
</VButton>
</template>
```
<!--/code-->

27
documentation/plugins/notyf/notyf-error-documentation.md Normal file
View File

@@ -0,0 +1,27 @@
### Error toast
Vuero is integrated with `Notyf`, a dead simple vanilla javascript
toasting library. You can check the plugin documentation on
<a href="https://github.com/caroso1222/notyf" target="_blank">Github</a>.
The success toast is one the 2 notyf default toasts.
<!--code-->
```vue
<script setup lang="ts">
import { Notyf } from 'notyf'
const notyf = new Notyf()
const errorToast = () => {
notyf.error('Looks like something went wrong')
}
</script>
<template>
<VButton bold @click="errorToast">
Error Toast
</VButton>
</template>
```
<!--/code-->

47
documentation/plugins/notyf/notyf-green-documentation.md Normal file
View File

@@ -0,0 +1,47 @@
### Green toast
Bside the two native types, `Notyf` allows you to create custom toast types.
You can change all the available option defaults, like `position` or `duration`.
You can configure a new toast type and even assign the icon of your choice.
Check the code example for more details.
<!--code-->
```vue
<script setup lang="ts">
import { Notyf } from 'notyf'
const notyf = new Notyf({
duration: 2000,
position: {
x: 'right',
y: 'bottom',
},
types: [
{
type: 'green',
background: themeColors.green,
icon: {
className: 'fas fa-check',
tagName: 'i',
text: '',
},
},
],
})
const greenToast = () => {
notyf.open({
type: 'green',
message: 'This is some useful information that you might need.',
})
}
</script>
<template>
<VButton bold @click="greenToast">
Green Toast
</VButton>
</template>
```
<!--/code-->

47
documentation/plugins/notyf/notyf-info-documentation.md Normal file
View File

@@ -0,0 +1,47 @@
### Info toast
Bside the two native types, `Notyf` allows you to create custom toast types.
You can change all the available option defaults, like `position` or `duration`.
You can configure a new toast type and even assign the icon of your choice.
Check the code example for more details.
<!--code-->
```vue
<script setup lang="ts">
import { Notyf } from 'notyf'
const notyf = new Notyf({
duration: 2000,
position: {
x: 'right',
y: 'bottom',
},
types: [
{
type: 'info',
background: themeColors.info,
icon: {
className: 'fas fa-info-circle',
tagName: 'i',
text: '',
},
},
],
})
const infoToast = () => {
notyf.open({
type: 'info',
message: 'This is some useful information that you might need.',
})
}
</script>
<template>
<VButton bold @click="infoToast">
Info Toast
</VButton>
</template>
```
<!--/code-->

47
documentation/plugins/notyf/notyf-orange-documentation.md Normal file
View File

@@ -0,0 +1,47 @@
### Orange toast
Beside the two native types, `Notyf` allows you to create custom toast types.
You can change all the available option defaults, like `position` or `duration`.
You can configure a new toast type and even assign the icon of your choice.
Check the code example for more details.
<!--code-->
```vue
<script setup lang="ts">
import { Notyf } from 'notyf'
const notyf = new Notyf({
duration: 2000,
position: {
x: 'right',
y: 'bottom',
},
types: [
{
type: 'orange',
background: themeColors.orange,
icon: {
className: 'fas fa-check',
tagName: 'i',
text: '',
},
},
],
})
const orangeToast = () => {
notyf.open({
type: 'orange',
message: 'This is some useful information that you might need.',
})
}
</script>
<template>
<VButton bold @click="orangeToast">
Orange Toast
</VButton>
</template>
```
<!--/code-->

47
documentation/plugins/notyf/notyf-primary-documentation.md Normal file
View File

@@ -0,0 +1,47 @@
### Primary toast
Bside the two native types, `Notyf` allows you to create custom toast types.
You can change all the available option defaults, like `position` or `duration`.
You can configure a new toast type and even assign the icon of your choice.
Check the code example for more details.
<!--code-->
```vue
<script setup lang="ts">
import { Notyf } from 'notyf'
const notyf = new Notyf({
duration: 2000,
position: {
x: 'right',
y: 'bottom',
},
types: [
{
type: 'primary',
background: themeColors.lime,
icon: {
className: 'fas fa-check',
tagName: 'i',
text: '',
},
},
],
})
const primaryToast = () => {
notyf.open({
type: 'primary',
message: 'This is some useful information that you might need.',
})
}
</script>
<template>
<VButton bold @click="primaryToast">
Primary Toast
</VButton>
</template>
```
<!--/code-->

47
documentation/plugins/notyf/notyf-purple-documentation.md Normal file
View File

@@ -0,0 +1,47 @@
### Purple toast
Bside the two native types, `Notyf` allows you to create custom toast types.
You can change all the available option defaults, like `position` or `duration`.
You can configure a new toast type and even assign the icon of your choice.
Check the code example for more details.
<!--code-->
```vue
<script setup lang="ts">
import { Notyf } from 'notyf'
const notyf = new Notyf({
duration: 2000,
position: {
x: 'right',
y: 'bottom',
},
types: [
{
type: 'purple',
background: themeColors.purple,
icon: {
className: 'fas fa-check',
tagName: 'i',
text: '',
},
},
],
})
const purpleToast = () => {
notyf.open({
type: 'purple',
message: 'This is some useful information that you might need.',
})
}
</script>
<template>
<VButton bold @click="purpleToast">
Purple Toast
</VButton>
</template>
```
<!--/code-->

27
documentation/plugins/notyf/notyf-success-documentation.md Normal file
View File

@@ -0,0 +1,27 @@
### Success toast
Vuero is integrated with `Notyf`, a dead simple vanilla javascript
toasting library. You can check the plugin documentation on
<a href="https://github.com/caroso1222/notyf" target="_blank">Github</a>.
The success toast is one the 2 notyf default toasts.
<!--code-->
```vue
<script setup lang="ts">
import { Notyf } from 'notyf'
const notyf = new Notyf()
const successToast = () => {
notyf.primary('Your changes have been successfully saved!')
}
</script>
<template>
<VButton bold @click="successToast">
Success Toast
</VButton>
</template>
```
<!--/code-->

47
documentation/plugins/notyf/notyf-warning-documentation.md Normal file
View File

@@ -0,0 +1,47 @@
### Warning toast
Bside the two native types, `Notyf` allows you to create custom toast types.
You can change all the available option defaults, like `position` or `duration`.
You can configure a new toast type and even assign the icon of your choice.
Check the code example for more details.
<!--code-->
```vue
<script setup lang="ts">
import { Notyf } from 'notyf'
const notyf = new Notyf({
duration: 2000,
position: {
x: 'right',
y: 'bottom',
},
types: [
{
type: 'warning',
background: themeColors.warning,
icon: {
className: 'fas fa-check',
tagName: 'i',
text: '',
},
},
],
})
const warningToast = () => {
notyf.open({
type: 'warning',
message: 'This is some useful information that you might need.',
})
}
</script>
<template>
<VButton bold @click="warningToast">
Warning Toast
</VButton>
</template>
```
<!--/code-->