mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 07:13:44 +09:00
48 lines
907 B
Markdown
48 lines
907 B
Markdown
### 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-->
|