Riupress UI

Appearance

Toast ​

Toast is a component of notifications. It has several configurations and is added using actions in the store.

Props ​

id
type:Number, String
default:0
title
required
type:String
default:''
msg
type:String
default:''
color
type:String
default:primary
values:primary, secondary, success, danger, info, warning
template
type:String
default:simple
values:simple, condensed, action, reply, splitreply, buttons
duration
type:Number
default:3500
avatar
type:String
default:''
icon
type:Object
accept
type:Object
decline
type:Object
position
type:String
default:top
values:top, bottom

Examples ​

The simplest notification with the icon, title, content and close button
html
<toast
  title="Successfully saved!"
  :iconfile="iconHome"
  msg="Anyone with a link can now view this file."
  :duration="0"
/>
ts
const toastStore = useToastStore()
toastStore.add({
  title: 'Successfully saved!',
  iconfile: iconHome,
  msg: 'Anyone with a link can now view this file.'
})

WARNING

The icon inserted into the component should be inserted using shallowRef

Simple notification with one button
html
<toast
  template="condensed"
  title="Discussion archived"
  :accept="{ action: 'route', title: 'Undo', value: '/' }"
  :duration="0"
/>
ts
const toastStore = useToastStore()
toastStore.add({
  title: 'Discussion archived',
  template: 'condensed',
  duration: 5000,
  accept: {
    action: 'action',
    title: 'Undo',
    value: 'toasts/remove',
    args: 1
  }
})
With action to be performed (two buttons) and an icon
html
<toast
  template="action"
  title="Discussion moved"
  msg="Lorem ipsum dolor sit amet consectetur adipisicing elit oluptatum tenetur."
  :iconfile="iconHome"
  :accept="{ action: 'route', title: 'Undo', value: '/' }"
  :decline="{ action: 'route', title: 'Dissmis', value: '/' }"
  :duration="0"
/>
ts
const toastStore = useToastStore()
toastStore.add({
  title: 'Discussion moved',
  msg: 'Lorem ipsum dolor sit amet consectetur adipisicing elit oluptatum tenetur.',
  iconfile: iconHome,
  template: 'action',
  duration: 0,
  accept: {
    action: 'action',
    title: 'Undo',
    value: 'toasts/remove',
    args: 1
  },
  decline: {
    action: 'action',
    title: 'Dissmis',
    value: 'toasts/remove',
    args: 1
  }
})
With Avatar, user and action to perform (one button)
html
<toast
  template="reply"
  title="Emilia Gates"
  msg="Sure! 8:30pm works great!"
  avatar="https://avatars.githubusercontent.com/u/213058?s=460&v=4"
  :accept="{ action: 'route', title: 'Undo', value: '/' }"
  :decline="{ action: 'route', title: 'Reply', value: '/' }"
  :duration="0"
/>
ts
const toastStore = useToastStore()
toastStore.add({
  title: 'Emilia Gates',
  msg: 'Sure! 8:30pm works great!',
  avatar: 'https://avatars.githubusercontent.com/u/213058?s=460&v=4',
  template: 'reply',
  duration: 0,
  accept: {
    action: 'action',
    title: 'Reply',
    value: 'toasts/remove',
    args: 1
  }
})
With action to be performed (two buttons), without an icon
html
<toast
  template="splitreply"
  title="Receive notifications"
  msg="Notications may include alerts, sounds, and badges."
  :accept="{ action: 'route', title: 'Reply', value: '/' }"
  :decline="{ action: 'route', title: 'Don\'t allow', value: '/' }"
  :duration="0"
/>
ts
const toastStore = useToastStore()
toastStore.add({
  title: 'Receive notifications',
  msg: 'Notications may include alerts, sounds, and badges.',
  template: 'splitreply',
  duration: 0,
  accept: {
    action: 'action',
    title: 'Reply',
    value: 'toasts/remove',
    args: 1
  },
  decline: {
    action: 'action',
    title: "Don't allow",
    value: 'toasts/remove',
    args: 1
  }
})
With the user, avatar and two buttons
html
<toast
  template="buttons"
  title="Emilia Gates"
  msg="Sent you an invite to connect."
  avatar="https://avatars.githubusercontent.com/u/213058?s=460&v=4"
  :accept="{ action: 'route', title: 'Accept', value: '/' }"
  :decline="{ action: 'route', title: 'Decline', value: '/' }"
  :duration="0"
/>
ts
const toastStore = useToastStore()
toastStore.add({
  title: 'Emilia Gates',
  msg: 'Sent you an invite to connect.',
  avatar: 'https://avatars.githubusercontent.com/u/213058?s=460&v=4',
  template: 'buttons',
  duration: 0,
  accept: {
    action: 'action',
    title: 'Accept',
    value: 'toasts/remove',
    args: 1
  },
  decline: {
    action: 'action',
    title: 'Decline',
    value: 'toasts/remove',
    args: 1
  }
})