# Mobile Playground

Source: https://lumeo.nativ.sh/docs/mobile

Mobile

# Mobile Playground

Test every Lumeo gesture, hit target, and haptic primitive in one place. Open DevTools → Device Toolbar (Ctrl+Shift+M) and pick a phone preset, or just try the gestures with mouse-drag — the same pointer events drive both.

## Swipe gestures

All sheets, drawers and tabs respond to pointer drags — touch, mouse and pen unified.

### Sheet — all 4 sides

SwipeToClose

Swipe direction matches the `Side` param.

Top

Right

Bottom

Left

### Drawer — swipe down

Default on

Drawer is the swipe-first primitive — gesture always on.

Open Drawer

### Carousel — horizontal swipe

Built-in

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Previous slide Next slide

### Pull to Refresh

rc.50

Pulled 0 times — drag down

### Swipe Actions — iOS Mail.app pattern

rc.50

Drag a row left or right to reveal leading/trailing actions.

Archive

Delete

Maria Müller

Re: Quarterly review draft

Archive

Delete

Daniel Kim

Designs ready for handoff

Archive

Delete

Anna Schmidt

Friday standup notes

## Haptic feedback

Tap a button below — on a supported device (most Android, some iOS) you'll feel a vibration. No-op on desktop and unsupported devices.

Light Medium Heavy Success Error Custom 120ms

Last triggered: `—`

## Hit targets & touch input

All interactive elements meet WCAG 2.5.5 (44×44 CSS px on mobile) — try tapping them on a phone preset.

Chips with dismiss

design

engineering

product

marketing

research

Pagination — 44px on touch, 36px desktop

Toast — 44px close on mobile

Show toast

## Long-press & wheel pickers

### Context menu — long-press

500ms

Press and hold on the area below (touch) or right-click (desktop).

Long-press here

### Wheel pickers (iOS-style)

rc.50

Scroll the columns up/down — touch native, mouse-wheel works too.

05/15/2026

00

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

00

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

## Safe area & touch ripple

### Touch Ripple

Material-style tap feedback. Try tapping the buttons below.

Default ripple

Red ripple

Slow green

### Safe Area

Wraps content with `env(safe-area-inset-*)` padding. Visible effect only on iPhone notch / Android nav-bar.

Content inside SafeArea

Want the API details? See the dedicated pages — [PullToRefresh](/components/pull-to-refresh), [SwipeActions](/components/swipe-actions), [TouchRipple](/components/touch-ripple), [SafeArea](/components/safe-area), [Sheet](/components/sheet), [Drawer](/components/drawer).