Swipe Actions

Swipeable list row that reveals leading/trailing actions, with full-swipe commit and a keyboard alternative.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { SwipeActions, SwipeActionsContent, SwipeActionsTray, SwipeActionsAction } from "@vizejs/ui/swipe-actions";

Or copy the source into your project with vize lib pull swipe-actions (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Mail list whose rows swipe to reveal archive and delete actions, with a full swipe deleting the row. -->
<script setup lang="ts">
import { ref } from "vue";

import {
  SwipeActions,
  SwipeActionsAction,
  SwipeActionsContent,
  SwipeActionsTray,
} from "@vizejs/ui/swipe-actions";

const messages = ref(["Team lunch on Friday", "Invoice #1042", "Design review notes"]);
const lastAction = ref<string | null>(null);

function run(action: string, message: string): void {
  lastAction.value = `${action}: ${message}`;
  messages.value = messages.value.filter((candidate) => candidate !== message);
}
</script>

<template>
  <div>
    <ul aria-label="Inbox">
      <SwipeActions
        v-for="message in messages"
        :key="message"
        as="li"
        @full-swipe="() => run('Deleted', message)"
      >
        <SwipeActionsTray side="leading" aria-label="Quick actions">
          <SwipeActionsAction value="archive" @select="() => run('Archived', message)">
            Archive
          </SwipeActionsAction>
        </SwipeActionsTray>
        <SwipeActionsTray side="trailing" aria-label="Destructive actions">
          <SwipeActionsAction value="delete" @select="() => run('Deleted', message)">
            Delete
          </SwipeActionsAction>
        </SwipeActionsTray>
        <SwipeActionsContent>{{ message }}</SwipeActionsContent>
      </SwipeActions>
    </ul>
    <output>{{ lastAction ?? "No actions yet" }}</output>
  </div>
</template>

API

SwipeActions

Source: src/families/interaction/swipe-actions/swipe-actions.vue

Props

Events

Slots

Exposed

SwipeActionsContent

Source: src/families/interaction/swipe-actions/swipe-actions-content.vue

Props

Slots

SwipeActionsTray

Source: src/families/interaction/swipe-actions/swipe-actions-tray.vue

Props

Slots

SwipeActionsAction

Source: src/families/interaction/swipe-actions/swipe-actions-action.vue

Props

Events

Slots

Behavior

Normative state x input -> outcome table for swipe-actions.vue, swipe-actions-content.vue, swipe-actions-tray.vue, and swipe-actions-action.vue (@vizejs/ui/swipe-actions). Every row is proven by the named test in swipe-actions.test.ts or swipe-actions-ssr.test.ts.

The subpath ships no CSS.