Mobile & responsive

<wr-descriptions responsive inline bordered>…</wr-descriptions>
<wr-stepper responsive>…</wr-stepper>
<wr-page-header responsive title="Settings">…</wr-page-header>
<wr-toolbar responsive>…</wr-toolbar>
<wr-pagination responsive [(page)]="page" [total]="200" />
<wr-table responsive [columns]="cols" [items]="rows" />

Component	When narrow
`wr-descriptions`	Columns stack.
`wr-stepper`	Turns vertical.
`wr-page-header`	Actions move below the title.
`wr-toolbar`	Wraps.
`wr-pagination`	Collapses to current / total.
`wr-table`	Rows become labelled cards.
`wr-tabs`	Scrolls with an edge fade. No flag needed.

import { provideWr } from 'ngwr';
import { withDensity } from 'ngwr/density';

// App-wide: sm | md | lg | touch
provideWr(withDensity({ defaultDensity: 'touch' }));

// One subtree: <section wrDensity="touch">…</section>

Lightbox: swipe down to close.
Toast: swipe sideways to dismiss.
Carousel: swipe left or right to change slides.

<wr-drawer position="bottom" safeArea>…</wr-drawer>

@use 'ngwr/breakpoints' as bp;

.toolbar {
  flex-direction: column;

  @include bp.media-up(md) {
    flex-direction: row;
  }
}

Adaptive layout components

Touch targets

Touch density

Swipe gestures

Safe areas

Build your own

On the server there is no viewport

See also