14.0.0 • Published 12 months ago

@material/density v14.0.0

Weekly downloads
49,671
License
MIT
Repository
github
Last release
12 months ago

Density

Density subsystem provides adaptive layout to components.

Installation

npm install @material/density

Basic Usage

Styles

This package is used as utility for other components' density mixins. Mixin provided by this package is not intended to be consumed directly by developers, use component's density mixin instead.

The styles for applying density to button component instance looks like this:

@import "@material/button/mixins";

.my-custom-button {
  @include mdc-button-density(-3);
}

This would apply -3 (high density) to button component instance.

You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate component height.

Style Customization

Sass Variables

VariableDescription
$mdc-density-intervalDensity interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.
$mdc-density-minimum-scaleMinimum scale supported by density subsystem. This scale always maps to highest dense scale.
$mdc-density-maximum-scaleMaximum scale supported by density subsystem. This scale always maps to lowest dense scale.
$mdc-density-supported-scalesSupported density scale when density literal is used (For example, minimum).

Sass Functions

FunctionDescription
mdc-density-prop-value($density-config, $density-scale, $property-name)Returns component property value based on given density config and density scale.
14.0.0

3 years ago

13.0.0

4 years ago

12.0.0

4 years ago

11.0.0

4 years ago

10.0.0

4 years ago

9.0.0

4 years ago

8.0.0

5 years ago

7.0.0

5 years ago

6.0.0

5 years ago

5.1.0

5 years ago

5.0.0

5 years ago

4.0.0

6 years ago

4.0.0-canary.1

6 years ago

4.0.0-canary.0

6 years ago