eQuantic.UIeQuantic.UI
Docs
Playground
GitHub
DocsTouch interaction
SwipeableRow
View source
1 min read
Reveals one action behind a horizontal swipe on a row. The open state is controlled, so only one row is ever open.
1
using eQuantic.UI.Components;
DEFAULT
Swipe meThe action sits behind
trailing action
Usage
1
2
3
4
5
6
7
8
9
new SwipeableRow(new ListItem(tx.Payee, tx.Memo))
{
ActionLabel = "Delete",
ActionIcon = Icons.Trash,
ActionVariant = Variant.Destructive,
OnAction = () => Delete(tx),
Open = _openRow == tx.Id,
OnOpenChanged = open => SetState(() => _openRow = open ? tx.Id : null),
}
API
Prop
Type
Default
Description
Child
VisualNode
The row itself.
ActionLabel
string
Label painted on the revealed pane.
ActionIcon
Icons
Glyph on the pane.
ActionVariant
Variant
Destructive
Colour of the pane.
OnAction
Action?
null
Fires when the action commits.
Open
bool
false
Controlled — track it in the parent so only one row opens.
OnOpenChanged
Action<bool>?
null
Reports the open state as the gesture settles.
States
State
Rendering
Swiping
The row translates one-to-one
Open
Snapped, the pane fully revealed
Committing
Full swipe fires the action
Closing
Any outside interaction closes it
Accessibility
The swipe action must also exist as a custom accessibility action on the row. A gesture-only action is a spec violation.
When to use
A frequent per-row action, as a shortcut.
Avoid
Swipe as the only path to an action.
Swipeable rows beside a horizontal carousel.
NOTEEvery dimension resolves through Sizing.*(SizeVariant) and the token scales — never a literal. Source: src/eQuantic.UI.Components/SwipeableRow.cs.