How to Theme Angular Material to Be More Compact
I'm Using Angular Material 7, and Find the Gutter Spacing of the Mat-Form-Field Et. Al. to Be Too Large. on the Desktop, the Information Density Is Very Low...
I'm using Angular Material 7, and find the gutter spacing of the mat-form-field et. al. to be too large. On the desktop, the information density is very low. I'd like to adjust this using theming, but Google only leads me to tutorials describing how to change colors. Does anyone have advice on how to make the spacing more compact without debugging dozens of Material css directives?
3 Answers
Material design has different density levels, Angular team finally implemented this and it is now an experimental feature in Angular 10 release.
If you don't want to use css for your grid gutter size, you can use angular material with flex-layout and easily set your gutter size using fxLayoutGap="16px or 20px". Here is the link fxLayoutGap API.
You can set up density level at your theme definition like this:
$app-light-theme: mat-light-theme((
color: (
primary: $mat-primary-palette,
accent: $mat-accent-palette
),
density: -3
));
See:
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
