Notification

Default

It generates a notification with the Sax Design function (SNotification), to use the instance of the notification it is necessary to save it in a variable, for example if you need to close the notification manually or do other functionalities with the instance

Copied

import { SNotification } from 'sax-design-vue'

SNotification({ ...options })

The necessary properties are the title and the content

Code copied

<template>
  <div class="center">
    <s-button @click="openNotification"> Open Notification </s-button>
  </div>
</template>

<script lang="ts" setup>
import { SNotification } from 'sax-design-vue'

const openNotification = () => {
  SNotification({
    title: 'Sax Design Vue',
    content:
      'Sax Design Vue notification example with configurable content, color, and position.',
  })
}
</script>

Position

Change the notification position with the position property

supported values

• bottom-right Default
• top-right
• top-center
• top-left
• bottom-left
• bottom-center

Code copied

<template>
  <div class="center">
    <s-button type="border" icon @click="openNotification">
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
    <s-button type="border" icon @click="openNotification('top-right')">
      <s-icon  name="bx:border-radius" class="t-r" />
    </s-button>
    <s-button type="border" icon @click="openNotification('top-left')">
      <s-icon  name="bx:border-radius" class="t-l" />
    </s-button>
    <s-button type="border" icon @click="openNotification('bottom-left')">
      <s-icon  name="bx:border-radius" class="b-l" />
    </s-button>
    <s-button type="border" icon @click="openNotification('bottom-center')">
      <s-icon  name="bx:border-bottom" />
    </s-button>
    <s-button type="border" icon @click="openNotification('top-center')">
      <s-icon  name="bx:border-top" />
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { SNotification } from 'sax-design-vue'

const openNotification = (position = null) => {
  SNotification({
    position,
    title: 'Sax Design Vue',
    content:
      'Sax Design Vue notification example with configurable content, color, and position.',
  })
}
</script>

<style scoped lang="scss">
.s-button {
  margin: 10px;
}
i {
  margin: 2px;
  font-size: 1.2rem;
  transform-origin: center;
  &.b-r {
    transform: rotate(90deg);
  }
  &.t-r {
    transform: rotate(0deg);
  }
  &.t-l {
    transform: rotate(-90deg);
  }
  &.b-l {
    transform: rotate(-180deg);
  }
}
</style>

Color

Use the color property to change the base color of the component and some of the child components, to better understand the handling of colors and themes you can see it here

Allowed values ​​are:

• primary
• success
• danger
• warning
• dark
• RGB
• HEX

Code copied

<template>
  <div class="center con-avatars">
    <s-button type="shadow" icon @click="openNotification(null, null)">
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
    <s-button type="flat" icon @click="openNotification(null, 'primary')">
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
    <s-button
      type="flat"
      color="success"
      icon
      @click="openNotification('top-right', 'success')"
    >
      <s-icon  name="bx:border-radius" class="t-r" />
    </s-button>
    <s-button
      type="flat"
      color="danger"
      icon
      @click="openNotification('top-left', 'danger')"
    >
      <s-icon  name="bx:border-radius" class="t-l" />
    </s-button>
    <s-button
      type="flat"
      color="warn"
      icon
      @click="openNotification('bottom-left', 'warn')"
    >
      <s-icon  name="bx:border-radius" class="b-l" />
    </s-button>
    <s-button
      type="flat"
      color="dark"
      icon
      @click="openNotification('bottom-center', 'dark')"
    >
      <s-icon  name="bx:border-bottom" />
    </s-button>
    <s-button
      type="flat"
      color="#7d33ff"
      icon
      @click="openNotification('top-center', '#7d33ff')"
    >
      <s-icon  name="bx:border-top" />
    </s-button>
    <s-button
      type="flat"
      color="rgb(59,222,200)"
      icon
      @click="openNotification(undefined, 'rgb(59,222,200)')"
    >
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { SNotification } from 'sax-design-vue'

const openNotification = (position = undefined, color) => {
  SNotification({
    color,
    position,
    title: 'Sax Design Vue',
    content:
      'Sax Design Vue notification example with configurable content, color, and position.',
  })
}
</script>

Icons

Add the icon provided as the value of the icon property to the notification

Code copied

<template>
  <div class="center">
    <s-button
      type="shadow"
      icon
      @click="openNotification(null, null, notificationIcons.time)"
    >
      <s-icon  name="bx:border-radius" class="b-r" />
      <s-icon  name="bxs:time" />
    </s-button>
    <s-button
      type="flat"
      icon
      @click="
        openNotification(null, 'primary', notificationIcons.user)
      "
    >
      <s-icon  name="bx:border-radius" class="b-r" />
      <s-icon  name="bxs:user-pin" />
    </s-button>
    <s-button
      type="flat"
      color="success"
      icon
      @click="
        openNotification(
          'top-right',
          'success',
          notificationIcons.select,
        )
      "
    >
      <s-icon  name="bx:border-radius" class="t-r" />
      <s-icon  name="bx:select-multiple" />
    </s-button>
    <s-button
      type="flat"
      color="danger"
      icon
      @click="
        openNotification('top-left', 'danger', notificationIcons.bug)
      "
    >
      <s-icon  name="bx:border-radius" class="t-l" />
      <s-icon  name="bxs:bug" />
    </s-button>
    <s-button
      type="flat"
      color="warn"
      icon
      @click="
        openNotification('bottom-left', 'warn', notificationIcons.error)
      "
    >
      <s-icon  name="bx:border-radius" class="b-l" />
      <s-icon  name="bx:error" />
    </s-button>
    <s-button
      type="flat"
      color="dark"
      icon
      @click="
        openNotification(
          'bottom-center',
          'dark',
          notificationIcons.folder,
        )
      "
    >
      <s-icon  name="bx:border-bottom" />
      <s-icon  name="bx:folder-open" />
    </s-button>
    <s-button
      type="flat"
      color="#7d33ff"
      icon
      @click="
        openNotification('top-center', '#7d33ff', notificationIcons.bell)
      "
    >
      <s-icon  name="bx:border-top" />
      <s-icon  name="bx:bell" />
    </s-button>
    <s-button
      type="flat"
      color="rgb(59,222,200)"
      icon
      @click="
        openNotification(
          null,
          'rgb(59,222,200)',
          notificationIcons.calendar,
        )
      "
    >
      <s-icon  name="bx:border-radius" class="b-r" />
      <s-icon  name="bx:calendar" />
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, h } from 'vue'
import { SIcon, SNotification } from 'sax-design-vue'

const createNotificationIcon = (name: string) =>
  defineComponent({
    name: 'NotificationExampleIcon',
    setup: () => () => h(SIcon, { name }),
  })

const notificationIcons = {
  time: createNotificationIcon('bxs:time'),
  user: createNotificationIcon('bxs:user-pin'),
  select: createNotificationIcon('bx:select-multiple'),

  error: createNotificationIcon('bx:error'),
  folder: createNotificationIcon('bx:folder-open'),
  bell: createNotificationIcon('bx:bell'),
  calendar: createNotificationIcon('bx:calendar'),
}

const openNotification = (position = null, color, icon) => {
  SNotification({
    icon,
    color,
    position,
    title: 'Sax Design Vue',
    content:
      'Sax Design Vue notification example with configurable content, color, and position.',
  })
}
</script>

<style scoped lang="scss">
.s-button {
  margin: 10px;
}

Progress

Add a progress bar to the notification, if the value of the progress property is auto be determined by the duration property to reach 100%, if you want the value to be manual you can add a number of the (0 - 100) being 100 100% and use the function in the changeProgress instance and change the value to the one provided as the first parameter

Code copied

<template>
  <div class="center">
    <s-button type="shadow" icon @click="openNotification(null, '')">
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
    <s-button icon @click="openNotification(null, 'primary')">
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
    <s-button
      color="success"
      icon
      @click="openNotification('top-right', 'success')"
    >
      <s-icon  name="bx:border-radius" class="t-r" />
    </s-button>
    <s-button
      color="danger"
      icon
      @click="openNotification('top-left', 'danger')"
    >
      <s-icon  name="bx:border-radius" class="t-l" />
    </s-button>
    <s-button
      color="warn"
      icon
      @click="openNotification('bottom-left', 'warn')"
    >
      <s-icon  name="bx:border-radius" class="b-l" />
    </s-button>
    <s-button
      color="dark"
      icon
      @click="openNotification('bottom-center', 'dark')"
    >
      <s-icon  name="bx:border-bottom" />
    </s-button>
    <s-button
      color="#7d33ff"
      icon
      @click="openNotification('top-center', '#7d33ff')"
    >
      <s-icon  name="bx:border-top" />
    </s-button>
    <s-button
      color="rgb(59,222,200)"
      icon
      @click="openNotification(null, 'rgb(59,222,200)')"
    >
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { SNotification } from 'sax-design-vue'

const openNotification = (position = null, color) => {
  SNotification({
    progressAuto: true,
    color,
    position,
    title: 'Sax Design Vue',
    content:
      'Sax Design Vue notification example with configurable content, color, and position.',
  })
}
</script>

<style scoped lang="scss">
.s-button {
  margin: 10px;
}
i {
  margin: 2px;
  font-size: 1.2rem;
  transform-origin: center;
  &.b-r {
    transform: rotate(90deg);
  }
  &.t-r {
    transform: rotate(0deg);
  }
  &.t-l {
    transform: rotate(-90deg);
  }
  &.b-l {
    transform: rotate(-180deg);
  }
}
</style>

Duration

Change the duration of the notification with the duration property, the value is numerical and determine the seconds before the bone component is hidden that 10s equals 10000 as the value

if you need the notification to never be hidden, the duration value would be 0

Code copied

<template>
  <div class="center con-avatars">
    <s-button type="border" @click="openNotification(4500)">
      Duration default (4.5s)
    </s-button>
    <s-button type="border" @click="openNotification(6000)">
      Duration 6s
    </s-button>
    <s-button type="border" @click="openNotification(10000)">
      Duration 10s
    </s-button>
    <s-button type="border" @click="openNotification(0)">
      Duration none
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { SNotification } from 'sax-design-vue'

const openNotification = (duration) => {
  SNotification({
    duration,
    progressAuto: true,
    title: 'Sax Design Vue',
    content:
      'Sax Design Vue notification example with configurable content, color, and position.',
  })
}
</script>

<style scoped lang="scss">
.s-button {
  margin: 10px;
}
i {
  margin: 2px;
  font-size: 1.2rem;
  transform-origin: center;
  &.b-r {
    transform: rotate(90deg);
  }
  &.t-r {
    transform: rotate(0deg);
  }
  &.t-l {
    transform: rotate(-90deg);
  }
  &.b-l {
    transform: rotate(-180deg);
  }
}
</style>

Square

Change the style of the notification with the square property so as not to have border-radius making it a rectangle

Code copied

<template>
  <div class="center">
    <s-button
      type="shadow"
      shape="square"
      icon
      @click="openNotification(null, '')"
    >
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
    <s-button
      type="border"
      shape="square"
      icon
      @click="openNotification(null, 'primary')"
    >
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
    <s-button
      type="border"
      shape="square"
      color="success"
      icon
      @click="openNotification('top-right', 'success')"
    >
      <s-icon  name="bx:border-radius" class="t-r" />
    </s-button>
    <s-button
      type="border"
      shape="square"
      color="danger"
      icon
      @click="openNotification('top-left', 'danger')"
    >
      <s-icon  name="bx:border-radius" class="t-l" />
    </s-button>
    <s-button
      type="border"
      shape="square"
      color="warn"
      icon
      @click="openNotification('bottom-left', 'warn')"
    >
      <s-icon  name="bx:border-radius" class="b-l" />
    </s-button>
    <s-button
      type="border"
      shape="square"
      color="dark"
      icon
      @click="openNotification('bottom-center', 'dark')"
    >
      <s-icon  name="bx:border-bottom" />
    </s-button>
    <s-button
      type="border"
      shape="square"
      color="#7d33ff"
      icon
      @click="openNotification('top-center', '#7d33ff')"
    >
      <s-icon  name="bx:border-top" />
    </s-button>
    <s-button
      type="border"
      shape="square"
      color="rgb(59,222,200)"
      icon
      @click="openNotification(null, 'rgb(59,222,200)')"
    >
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { SNotification } from 'sax-design-vue'

const openNotification = (position = null, color) => {
  SNotification({
    shape: 'square',
    color,
    position,
    title: 'Sax Design Vue',
    content:
      'Sax Design Vue notification example with configurable content, color, and position.',
  })
}
</script>

<style scoped lang="scss">
.s-button {
  margin: 10px;
}
i {
  margin: 2px;
  font-size: 1.2rem;
  transform-origin: center;
  &.b-r {
    transform: rotate(90deg);
  }
  &.t-r {
    transform: rotate(0deg);
  }
  &.t-l {
    transform: rotate(-90deg);
  }
  &.b-l {
    transform: rotate(-180deg);
  }
}
</style>

Border

Change the notification style with the border property by adding a border of the color provided as the value

Code copied

<template>
  <div class="center con-avatars">
    <s-button type="border" icon @click="openNotification(null, 'primary')">
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
    <s-button
      type="border"
      color="success"
      icon
      @click="openNotification('top-right', 'success')"
    >
      <s-icon  name="bx:border-radius" class="t-r" />
    </s-button>
    <s-button
      type="border"
      color="danger"
      icon
      @click="openNotification('top-left', 'danger')"
    >
      <s-icon  name="bx:border-radius" class="t-l" />
    </s-button>
    <s-button
      type="border"
      color="warn"
      icon
      @click="openNotification('bottom-left', 'warn')"
    >
      <s-icon  name="bx:border-radius" class="b-l" />
    </s-button>
    <s-button
      type="border"
      color="dark"
      icon
      @click="openNotification('bottom-center', 'dark')"
    >
      <s-icon  name="bx:border-bottom" />
    </s-button>
    <s-button
      type="border"
      color="#7d33ff"
      icon
      @click="openNotification('top-center', '#7d33ff')"
    >
      <s-icon  name="bx:border-top" />
    </s-button>
    <s-button
      type="border"
      color="rgb(59,222,200)"
      icon
      @click="openNotification(null, 'rgb(59,222,200)')"
    >
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { SNotification } from 'sax-design-vue'

const openNotification = (position = null, border) => {
  SNotification({
    border,
    position,
    title: 'Sax Design Vue',
    content:
      'Sax Design Vue notification example with configurable content, color, and position.',
  })
}
</script>

<style scoped lang="scss">
.s-button {
  margin: 10px;
}
i {
  margin: 2px;
  font-size: 1.2rem;
  transform-origin: center;
  &.b-r {
    transform: rotate(90deg);
  }
  &.t-r {
    transform: rotate(0deg);
  }
  &.t-l {
    transform: rotate(-90deg);
  }
  &.b-l {
    transform: rotate(-180deg);
  }
}
</style>

Flat

Change the style of the notification with the flat property, having this property changes to lighter colors and the text of the color property, this property is a boolean so you can only use the value true

Code copied

<template>
  <div class="center">
    <s-button type="flat" icon @click="openNotification(null, 'primary')">
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
    <s-button
      type="flat"
      color="success"
      icon
      @click="openNotification('top-right', 'success')"
    >
      <s-icon  name="bx:border-radius" class="t-r" />
    </s-button>
    <s-button
      type="flat"
      color="danger"
      icon
      @click="openNotification('top-left', 'danger')"
    >
      <s-icon  name="bx:border-radius" class="t-l" />
    </s-button>
    <s-button
      type="flat"
      color="warn"
      icon
      @click="openNotification('bottom-left', 'warn')"
    >
      <s-icon  name="bx:border-radius" class="b-l" />
    </s-button>
    <s-button
      type="flat"
      color="dark"
      icon
      @click="openNotification('bottom-center', 'dark')"
    >
      <s-icon  name="bx:border-bottom" />
    </s-button>
    <s-button
      type="flat"
      color="#7d33ff"
      icon
      @click="openNotification('top-center', '#7d33ff')"
    >
      <s-icon  name="bx:border-top" />
    </s-button>
    <s-button
      type="flat"
      color="rgb(59,222,200)"
      icon
      @click="openNotification(null, 'rgb(59,222,200)')"
    >
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { SNotification } from 'sax-design-vue'

const openNotification = (position = null, color) => {
  SNotification({
    flat: true,
    color,
    position,
    duration: 0,
    title: 'Sax Design Vue',
    content:
      'Sax Design Vue notification example with configurable content, color, and position.',
  })
}
</script>

<style scoped lang="scss">
.s-button {
  margin: 10px;
}
i {
  margin: 2px;
  font-size: 1.2rem;
  transform-origin: center;
  &.b-r {
    transform: rotate(90deg);
  }
  &.t-r {
    transform: rotate(0deg);
  }
  &.t-l {
    transform: rotate(-90deg);
  }
  &.b-l {
    transform: rotate(-180deg);
  }
}
</style>

Loading

Add a loading animation to the notification, having this property will only show the animation and the content will be hidden

Code copied

<template>
  <div class="center">
    <s-button type="shadow" icon @click="openNotification(null, '')">
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
    <s-button type="gradient" icon @click="openNotification(null, 'primary')">
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
    <s-button
      type="gradient"
      color="success"
      icon
      @click="openNotification('top-right', 'success')"
    >
      <s-icon  name="bx:border-radius" class="t-r" />
    </s-button>
    <s-button
      type="gradient"
      color="danger"
      icon
      @click="openNotification('top-left', 'danger')"
    >
      <s-icon  name="bx:border-radius" class="t-l" />
    </s-button>
    <s-button
      type="gradient"
      color="warn"
      icon
      @click="openNotification('bottom-left', 'warn')"
    >
      <s-icon  name="bx:border-radius" class="b-l" />
    </s-button>
    <s-button
      type="gradient"
      color="dark"
      icon
      @click="openNotification('bottom-center', 'dark')"
    >
      <s-icon  name="bx:border-bottom" />
    </s-button>
    <s-button
      type="gradient"
      color="#7d33ff"
      icon
      @click="openNotification('top-center', '#7d33ff')"
    >
      <s-icon  name="bx:border-top" />
    </s-button>
    <s-button
      type="gradient"
      color="rgb(59,222,200)"
      icon
      @click="openNotification(null, 'rgb(59,222,200)')"
    >
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { SNotification } from 'sax-design-vue'

const openNotification = (position = null, color) => {
  SNotification({
    loading: true,
    color,
    position,
    title: 'Sax Design Vue',
    content:
      'Sax Design Vue notification example with configurable content, color, and position.',
  })
}
</script>

<style scoped lang="scss">
.s-button {
  margin: 10px;
}
i {
  margin: 2px;
  font-size: 1.2rem;
  transform-origin: center;
  &.b-r {
    transform: rotate(90deg);
  }
  &.t-r {
    transform: rotate(0deg);
  }
  &.t-l {
    transform: rotate(-90deg);
  }
  &.b-l {
    transform: rotate(-180deg);
  }
}
</style>

Width

Change the size of the notification to the total screen with the property width and giving it a value of full

If you need the notification to have an automatic size to your content you can do it with the value auto

Code copied

<template>
  <div class="center">
    <s-button type="shadow" icon @click="openNotification(null, '')">
      <s-icon  name="bx:border-bottom" />
    </s-button>
    <s-button
      type="flat"
      icon
      @click="openNotification('top-center', 'primary', 'auto')"
    >
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { SNotification } from 'sax-design-vue'

const openNotification = (position = null, color, width = 'full') => {
  SNotification({
    width,
    position,
    color,
    title: 'Sax Design Vue',
    content:
      'Sax Design Vue notification example with configurable content, color, and position.',
  })
}
</script>

<style scoped lang="scss">
.s-button {
  margin: 10px;
}
i {
  margin: 2px;
  font-size: 1.2rem;
  &.b-r {
    transform: rotate(90deg);
  }
}
</style>

Sticky

You can add a style to the paste component to the nearest corner with the sticky property, this property is a boolean po which can only have the value true

Code copied

<template>
  <div class="center">
    <s-button type="shadow" icon @click="openNotification(null, null)">
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
    <s-button flat icon @click="openNotification(null, 'primary')">
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
    <s-button
      type="flat"
      color="success"
      icon
      @click="openNotification('top-right', 'success')"
    >
      <s-icon  name="bx:border-radius" class="t-r" />
    </s-button>
    <s-button
      type="flat"
      color="danger"
      icon
      @click="openNotification('top-left', 'danger')"
    >
      <s-icon  name="bx:border-radius" class="t-l" />
    </s-button>
    <s-button
      type="flat"
      color="warn"
      icon
      @click="openNotification('bottom-left', 'warn')"
    >
      <s-icon  name="bx:border-radius" class="b-l" />
    </s-button>
    <s-button
      type="flat"
      color="dark"
      icon
      @click="openNotification('bottom-center', 'dark')"
    >
      <s-icon  name="bx:border-bottom" />
    </s-button>
    <s-button
      type="flat"
      color="#7d33ff"
      icon
      @click="openNotification('top-center', '#7d33ff')"
    >
      <s-icon  name="bx:border-top" />
    </s-button>
    <s-button
      type="flat"
      color="rgb(59,222,200)"
      icon
      @click="openNotification(null, 'rgb(59,222,200)')"
    >
      <s-icon  name="bx:border-radius" class="b-r" />
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { SNotification } from 'sax-design-vue'

const openNotification = (position = null, color) => {
  SNotification({
    sticky: true,
    color,
    duration: 0,
    position,
    title: 'Sax Design Vue',
    content:
      'Sax Design Vue notification example with configurable content, color, and position.',
  })
}
</script>

<style scoped lang="scss">
.s-button {
  margin: 10px;
}
i {
  margin: 2px;
  font-size: 1.2rem;
  transform-origin: center;
  &.b-r {
    transform: rotate(90deg);
  }
  &.t-r {
    transform: rotate(0deg);
  }
  &.t-l {
    transform: rotate(-90deg);
  }
  &.b-l {
    transform: rotate(-180deg);
  }
}
</style>

Example

You can do great things with this component and some others from Sax Design, to add any element within the notification we have the property content this property can only receive an imported component and that is what it will generate within the notification

Code copied

<template>
  <div class="center">
    <s-button type="border" icon @click="openNotificationUser">
      Example User
    </s-button>
    <s-button type="border" icon @click="openNotificationCookie">
      Example Cookie
    </s-button>
    <s-button type="border" icon @click="openNotificationCall">
      Example Call
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { createVNode } from 'vue'
import { SNotification } from 'sax-design-vue'

import user from './user.vue'
import cookie from './cookie.vue'
import call from './call.vue'

const openNotificationCookie = () => {
  SNotification({
    duration: 0,
    content: createVNode(cookie),
  })
}
const openNotificationUser = () => {
  SNotification({
    duration: 0,
    width: 'auto',
    content: createVNode(user),
  })
}
const openNotificationCall = () => {
  SNotification({
    duration: 0,
    width: 'auto',
    content: createVNode(call),
    notPadding: true,
  })
}
</script>

API