SlideItem

Swipe a row to reveal actions

A list row that slides aside to show actions — archive, delete — as in phone mail apps. The same actions must be reachable without a swipe, which the keyboard does: tabbing into them slides them into view.

Basic

加藤恵

英梨々

詩羽

美智留

Swipe a row left to delete, right to pin. Drag with the mouse on desktop. Actions fire on release past 80px; sticky keeps them open instead.

<script setup lang="ts">
import { ref } from "vue";
import { BlessButton, BlessMockup, BlessSlideItem, BlessText, useToast } from "blessing-ui";
const { toast } = useToast();
const rows = ref(["加藤恵", "英梨々", "詩羽", "美智留"]);
function remove(name: string, reset: () => void) {
  rows.value = rows.value.filter((r) => r !== name);
  toast(`Removed ${name}`);
  reset();
}
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <BlessMockup type="phone" style="width: 260px">
      <BlessSlideItem
        v-for="r in rows"
        :key="r"
        style="border-bottom: 1px solid var(--bless-color-border)"
        @right="(reset) => remove(r, reset)"
        @left="(reset) => (toast(`Pinned ${r}`), reset())"
      >
        <template #left><BlessButton style="height: 100%">Pin</BlessButton></template>
        <div style="padding: 14px 16px">{{ r }}</div>
        <template #right
          ><BlessButton color="danger" style="height: 100%">Delete</BlessButton></template
        >
      </BlessSlideItem>
    </BlessMockup>
    <BlessText size="sm" muted style="max-width: 260px"
      >Swipe a row left to delete, right to pin. Drag with the mouse on desktop. Actions fire on
      release past 80px; <code>sticky</code> keeps them open instead.</BlessText
    >
  </div>
</template>

• A swipe right reveals #left, a swipe left reveals #right. Without sticky, passing threshold fires @left / @right with a reset; with sticky the actions stay open until reset.

Usage

import { BlessSlideItem } from "blessing-ui";

API

Props

Name	Type	Default	Description
threshold	number	80	px of travel to trigger
sticky	boolean	—	keep the actions revealed after release instead of firing
disabled	boolean	—

Events

Name	Payload	Description
left	[reset: () => void]
right	[reset: () => void]
slide	[side: "left" | "right" | null]

Slots

Name	Scope	Description
default	any
left	{ reset: () => void; }
right	{ reset: () => void; }

Exposed

Name	Type	Description
reset	() => void