Make every control tighter or roomier with one setting.
Add the stylesheet and the feature; without the @use, density changes nothing.
@use 'ngwr/theme';
@use 'ngwr/density';import { provideWr } from 'ngwr';
import { withDensity } from 'ngwr/density';
bootstrapApplication(AppComponent, {
providers: [
provideWr(
withDensity({
defaultDensity: 'sm', // default 'md'
storageKey: 'wr-density', // null to not persist
}),
),
],
});sm, md (default), lg and touch. Each sets four multipliers.
| Token | sm / md / lg / touch | Scales |
|---|---|---|
--wr-density-y | 0.55 / 1 / 1.35 / 1.7 | Vertical padding, so control height |
--wr-density-x | 0.85 / 1 / 1.15 / 1.25 | Horizontal padding |
--wr-density-gap | 0.8 / 1 / 1.15 / 1.5 | Gaps in layout components |
--wr-density-text | 0.95 / 1 / 1.05 / 1 | Yours to read; no component uses it |
WrDensity switches the whole app and remembers the choice.
const density = inject(WrDensity);
density.set('lg'); // 'sm' | 'md' | 'lg' | 'touch'
density.cycle(); // sm, md, lg, touch, sm, …
density.current(); // 'sm' | 'md' | 'lg' | 'touch'wrDensity on any element sets the density for that subtree only.
<aside wrDensity="sm">
<wr-list>…</wr-list>
</aside>Multiply your padding by the multipliers.
.my-control {
padding: calc(var(--wr-control-padding-y-md) * var(--wr-density-y, 1))
calc(var(--wr-control-padding-x-md) * var(--wr-density-x, 1));
gap: calc(0.5rem * var(--wr-density-gap, 1));
}