14.0.0 • Published 5 months ago

@material/feature-targeting v14.0.0

Weekly downloads
117,776
License
MIT
Repository
github
Last release
5 months ago

Feature Targeting

MDC Feature Targeting provides infrastructure to allow CSS styles to be included or excluded categorically.

Most of the time, you shouldn't need to depend on mdc-feature-targeting directly. However, understanding it can be useful if you're interested in having more control over when certain types of MDC styles are emitted.

Installation

npm install @material/feature-targeting

Basic Usage

Styles

Authoring component styles:

@import "@material/feature-targeting/functions";
@import "@material/feature-targeting/mixins";

@mixin my-component-core-styles($query: mdc-feature-all()) {
  $feat-structure: mdc-feature-create-target($query, structure);

  @include mdc-feature-targets($feat-structure) {
    // ...
  }
}

Consuming component styles:

@import "@material/feature-targeting/functions";
@import "my-component-mixins";

// To include all styles (using the default of mdc-feature-all() defined above):
@include my-component-core-styles;

// Or, to include a specific subset of styles:
@include my-component-core-styles(structure);
@include my-component-core-styles(mdc-feature-any(color, typography));
// The above two @includes and the following @include would produce equivalent results:
@include my-component-core-styles(mdc-feature-without(animation));

Sass Mixins and Functions

MixinDescription
mdc-feature-targets($feature-targets...)Conditionalizes content to only be emitted if the given feature target(s) is/are queried.
FunctionDescription
mdc-feature-create-target($feature-query, $targeted-feature)Returns a variable to be passed to mdc-feature-targets in order to filter emitted styles.
mdc-feature-all($feature-queries...)Returns a query object which will result in emitting mdc-feature-targets blocks that match all of the specified features. Passing no arguments results in all blocks being emitted, which is the most common use case.
mdc-feature-any($feature-queries...)Returns a query object which will result in emitting mdc-feature-targets blocks that match any of the specified features. Passing no arguments results in no blocks being emitted.
mdc-feature-without($feature-query)Returns a query object which will result in emitting mdc-feature-targets blocks that do not match the specified feature.

$feature-query and $feature-queries refer to one or more of the values listed below under Supported Features.

Supported Features

MDC Web's styles are currently split according to the following features:

  • structure - All baseline styles that don't fit into any other category
  • animation - Styles responsible for causing animations and transitions to occur
  • color - Color-specific styles which rely on mdc-theme variables
  • typography - Typography-specific styles which rely on mdc-typography
@material/form-field@material/icon-button@material/list@material/image-list@material/linear-progress@material/floating-label@material/line-ripple@material/drawer@material/dialog@material/fab@material/elevation@material/data-table@material/dom@material/circular-progress@material/checkbox@material/button@material/card@material/chips@material/banner@material/menu@material/menu-surface@material/notched-outline@material/theme@material/tab-scroller@material/select@material/touch-target@material/tooltip@material/ripple@material/slider@material/textfield@material/snackbar@material/switch@material/tab@material/tab-indicator@material/tab-bar@material/shape@material/typography@material/radio@material/segmented-buttonmaterial-components-web@everything-registry/sub-chunk-584@infinitebrahmanuniverse/nolb-_mate@material/focus-ring@material/grid-list@labstack/data-table@maicol07/mwa-card@maicol07/mwa-data-table@maicol07/mwc-card@mhamrah/svelte-material-ui@smui/top-app-bar@smui/list@smui-extra/accordion@smui-extra/badge@smui-extra/bottom-app-bar@smui/button@smui/snackbar@smui/switch@smui/textfield@smui/paper@smui/select@smui/fab@smui/form-field@react-universal-dialogs/android@tylertech/forge@emuanalytics/flow-rdf@aurelia2-mdc-web/expandable@aurelia-mdc-web/button@aurelia-mdc-web/expandable@authentic/mwc-chips@authentic/mwc-listbw-material@angular/material@angular/material-experimental@detachhead/smui-extra-accordion@detachhead/smui-extra-badge@detachhead/smui-extra-bottom-app-bar@detachhead/smui-fab@detachhead/smui-button@detachhead/smui-form-field@detachhead/smui-paper@detachhead/smui-select@detachhead/smui-snackbar@detachhead/smui-switch@detachhead/smui-textfield@detachhead/smui-top-app-barsariska-cobrowsingsariska-webapp@detachhead/smui-list
14.0.0

2 years ago

13.0.0

3 years ago

12.0.0

3 years ago

11.0.0

3 years ago

10.0.0

3 years ago

9.0.0

3 years ago

8.0.0

3 years ago

7.0.0

4 years ago

6.0.0

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.0.0

4 years ago

4.0.0-canary.1

5 years ago

4.0.0-canary.0

5 years ago

4.0.0-alpha.0

5 years ago

3.1.0

5 years ago

3.0.0

5 years ago

0.44.1

5 years ago

0.44.0

5 years ago