Clear on Swipe

Overview

Notivue has built-in support for clearing notifications on swipe. This is done by importing NotivueSwipe component and wrapping the notification with it.

It works out-of-the-box with both built-in and custom components.

Usage

App.vue

<script setup>
import { Notivue, Notification, NotivueSwipe } from 'notivue'
</script>

<template>
  <Notivue v-slot="item">
    <NotivueSwipe :item="item">
      <Notification :item="item" />
    </NotivueSwipe>
  </Notivue>

  <!-- RouterView, etc. -->
</template>

Customization - Props

Prop	Description	Type	Default
disabled	Whether to disable functionalities or not.	boolean	false
touchOnly	Whether to enable clear on swipe only on touch devices.	boolean	false
threshold	Fraction of notification's width needed to be swiped for clearing. For instance, a threshold of 0.5 indicates that the 50% of the notification's width must be swiped in order to clear.	number	0.5
exclude	A querySelectorAll string that specifies elements to be exempted from the swipe action.	string	a, button