Skip to content
bahtuiv0.18.8

<baht-swipe-row>

Row container for touch lists. The children are the row; actions sit behind it on the right and are revealed by swiping the row left. Pick one and the row emits baht-action { key } and closes.

  • Pointer events (touch, pen, mouse): released more than 40px left the row snaps open, more than 40px right it snaps shut, anything shorter springs back. Vertical drags stay page scrolls (touch-action: pan-y).
  • An open row closes on a pointerdown outside it, on a tap on the row (that tap is swallowed, so the row’s own click handler does not fire), on Escape and after an action. The click that ends a drag is swallowed too.
  • Keyboard: the actions are real buttons after the row content in tab order. Focusing one reveals the row; focus leaving the row hides it again.

Expense row

Coffee · ฿65

Drag the row left with a finger or the mouse, or Tab to the actions.

<baht-swipe-row>
  <div style="padding: 12px 16px">Coffee · ฿65</div>
</baht-swipe-row>

<script>
  const el = document.querySelector('baht-swipe-row');
  el.actions = [
    {
      "key": "edit",
      "label": "Edit"
    },
    {
      "key": "delete",
      "label": "Delete",
      "tone": "danger"
    }
  ];
</script>

Props

Section titled “Props”
NameTypeDefaultDescription
actionsJSSwipeAction[][]Actions revealed by the swipe, in order
openbooleanfalseRevealed state. Reflected; set it to open or close the row from the host
labelstring''Accessible name of the action group (default: the i18n rowActions string)

Events

Section titled “Events”
EventdetailDescription
baht-action{ key: string }An action was pressed; the row closes itself
nameCustomEvent

Slots

Section titled “Slots”
SlotDescription
(default)The row content. Adopted into .baht-swipe-row-content

Styling

Section titled “Styling”
Class What it is
.baht-swipe-row clipping wrapper; --open while revealed, --dragging mid-gesture
.baht-swipe-row-content your row; slides left, keeps --baht-color-surface behind it
.baht-swipe-row-actions the action strip pinned to the right edge (role="group")
.baht-swipe-row-action, --neutral / --danger one action button (sunken fill / --baht-color-danger)

The slide eases on --baht-dur-base; it is instant under prefers-reduced-motion.