Utilities

Breakpoint

Screen size as signals — isMobile (up to 640px), isTablet (up to 768px) and any media query. false on the server.

Part of @tectra-ng/utils (npm install @tectra-ng/utils, also included in tectra-ng).

Features2

API

Theming

Basic

Resize the window: the tags follow the kit breakpoints.

Mobile: no

Tablet: no

10 lines

<div class="flex">  <tx-tag    [value]="'Mobile: ' + (breakpoints.isMobile() ? 'yes' : 'no')"    [severity]="breakpoints.isMobile() ? 'success' : 'secondary'"  />  <tx-tag    [value]="'Tablet: ' + (breakpoints.isTablet() ? 'yes' : 'no')"    [severity]="breakpoints.isTablet() ? 'success' : 'secondary'"  /></div>

Media query

matches() turns any media query into a signal — the same signal for the same query across the app.


`(min-width: 1200px)`	no
`(orientation: portrait)`	no
`(prefers-color-scheme: dark)`	no
`(prefers-reduced-motion: reduce)`	no
`(hover: hover)`	no

6 lines

<tx-table ariaLabel="Media queries" dataKey="query" [value]="rows" [columns]="columns">  <ng-template txTableCell="query" let-value="value"    ><code>{{ value }}</code></ng-template  >  <ng-template txTableCell="matches" let-row>{{ row.matches() ? 'yes' : 'no' }}</ng-template></tx-table>