@material/feature-targeting
Advanced tools
Changelog
14.0.0 (2022-04-27)
unset is unsupported in IE. (f460e23)validateTooltipWithCaretDistances method. (3e30054)theme-styles mixin... the value being retreived from the $theme map and css property name was swapped. The mixin would request font-size/font-weight/letter-spacing from the $theme map (which expects size/weight/tracking)... so these values would always be null. (32b3913)attachTo. (05db65e)showTimeout is not set (indicating that this tooltip is about to be re-shown). (6ca8b8f)minRange param to range sliders to request a minimum gap between the two thumbs. (8fffcb5)valueToAriaValueTextFn and valueToValueIndicatorTextFn functions are called for. (b6510c8)PiperOrigin-RevId: 444830518
PiperOrigin-RevId: 419837612
Readme
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.
npm install @material/feature-targeting
Authoring component styles:
@use "@material/feature-targeting";
@mixin my-component-core-styles($query: feature-targeting.all()) {
$feat-structure: feature-targeting.create-target($query, structure);
@include feature-targeting.targets($feat-structure) {
// ...
}
}
Consuming component styles:
@use "@material/feature-targeting";
@use "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(feature-targeting.any(color, typography));
// The above two @includes and the following @include would produce equivalent results:
@include my-component-core-styles(feature-targeting.without(animation));
| Mixin | Description |
|---|---|
targets($feature-targets...) | Conditionalizes content to only be emitted if the given feature target(s) is/are queried. |
| Function | Description |
|---|---|
create-target($feature-query, $targeted-feature) | Returns a variable to be passed to targets in order to filter emitted styles. |
all($feature-queries...) | Returns a query object which will result in emitting 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. |
any($feature-queries...) | Returns a query object which will result in emitting targets blocks that match any of the specified features. Passing no arguments results in no blocks being emitted. |
without($feature-query) | Returns a query object which will result in emitting 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.
MDC Web's styles are currently split according to the following features:
structure - All baseline styles that don't fit into any other categoryanimation - Styles responsible for causing animations and transitions to occurcolor - Color-specific styles which rely on mdc-theme variablestypography - Typography-specific styles which rely on mdc-typographyFAQs
Material Components for the web Feature Targeting Scss helpers
The npm package @material/feature-targeting receives a total of 956,642 weekly downloads. As such, @material/feature-targeting popularity was classified as popular.
We found that @material/feature-targeting demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.