Notification

Display a toast notification in your app.

Usage

First of all, add the Notifications component to your app, preferably inside app.vue.

<template>
  <div id="app">
    <s-notifications/>
  </div>
</template>

This component will render the notifications at the bottom right of the screen by default. You can configure its behavior in the app.config.ts through ui.notifications:

export default defineAppConfig({
    ui: {
        notifications: {
            // Show toasts at the top right of the screen
            position: 'top-0 right-0'
        }
    }
})

Then, you can use the useToast composable to add notifications to your app:

<script setup>
import {useToast} from "stellar-ui";

const toast = useToast()
</script>
<template>
  <s-button label="Show toast" @click="toast.add({ title: 'Hello world!' })" />
</template>

When using toast.add, this will push a new notification to the stack displayed in <s-notifications />. All the props of the Notification component can be passed to toast.add.

<script setup>
const toast = useToast()

onMounted(() => {
  toast.add({
    id: 'update_downloaded',
    title: 'Update downloaded.',
    description: 'It will be installed on restart. Restart now?',
    icon: 'i-octicon-desktop-download-24',
    timeout: 0,
    actions: [{
      label: 'Restart',
      click: () => {

      }
    }]
  })
})
</script>

You can also use the Notification component directly in your app as an alert for example.

Title

Pass a title to your Notification.

<template>
  <s-notification title="Notification" />
</template>