Notifications

Notifications is used to display messages in an overlay.

Getting Started

Ideal location of a Toast is the main application template or application layout, so that it can be used by any component within the application.

Import HcNotificationsHub

import { HcNotificationsHub } from '@deeepvision/hope-component-kit';

and add it to your App or to layout.

html

<HcNotificationsHub />

Use notify function to add notification to HcNotificationsHub.

notify({
  text: 'Profile was successfully changed',
  icon: 'snack-info',
  type: 'success',
  duration: 100000,
})

NotificationParams:

Option	Type
colorName	string
color	string
border	string
icon	string
title	string
text	string
loading	boolean
flat	boolean
sticky	boolean
square	boolean
notPadding	boolean
duration	number
customClass	string
type	NotificationType
position	NotificationPosition

type NotificationType = 'info' | 'warning' | 'success' | 'error';

type NotificationPosition = 'bottom-right' | 'top-right' | 'top-center' | 'top-left' | 'bottom-left'| 'bottom-center';

Basic Usage

<template>
  <div class="flex justify-between items-end">
    <HcButton
      type="danger"
      @click="notify({
        text: 'Something went wrong.',
        icon: 'snack-error',
        type: 'error',
        duration: 100000,
      })"
    >
      danger
    </HcButton>

    <HcButton
      @click="notify({
        text: 'Profile was successfully changed',
        icon: 'snack-info',
        type: 'success',
        duration: 100000,
      })"
    >
      success
    </HcButton>

    <HcButton
      @click="notify({
        text: 'Account with this email is already created',
        icon: 'snack-info',
        type: 'warning',
        duration: 100000,
      })"
    >
      warning
    </HcButton>

    <HcButton
      @click="notify({
        text: 'Changes have been made in the field ...',
        icon: 'snack-info',
        type: 'info',
        duration: 100000,
      })"
    >
      info
    </HcButton>
  </div>
</template>
<script lang="ts" setup>
import { HcNotificationsHub, notify } from '@deeepvision/hope-component-kit';
</script>

Props

Property	Type	Values	Description	Default
position	String	bottom-righttop-righttop-centertop-leftbottom-leftbottom-center	notification position	bottom-center
duration	Number	Number	duration (in milliseconds) before close	4000
width	String	String	components width
append	String	topbottom	position where append new notification in array	top
animation	String	fallingzooming	notification animation	falling

Notifications #

Getting Started #

Basic Usage #

Props #

Notifications

Getting Started

Basic Usage

Props