repository·master·Indexed 12 days ago
https://github.com/angular/materialA library of reusable, accessible UI components that implements Google's Material Design specification for AngularJS (v1.x) single-page applications. Version 1.2.5 requires AngularJS 1.7.2 or higher. Note: Official support ended in January 2022; developers using Angular (v2+) should use the Angular Material project instead.
AngularJS Material support officially ended in January 2022.
This project is an implementation of the Material Design Specification (2014-2017) for AngularJS (v1.x). For developers using the modern Material Design Specification (2018+) and the Angular (v2+) framework, please use the Angular Material project instead.
Angular Material typography classes are aligned with those in AngularJS Material. However, Angular Material provides additional capabilities for customization:
The AngularJS Material layout system (using flex, show, hide, etc.) has been split into two distinct paths for Angular developers:
If you require a comprehensive, declarative API similar to AngularJS Material, use the separate Flex Layout project. It provides:
fxLayout, fxFlex, fxHide, and fxShow.fxLayout.lt-md or fxFlex.gt-sm.MediaObserver service.For a more lightweight approach, use the Angular CDK's layout capabilities. This is ideal if you want to use native CSS (Flexbox/Grid) and only need programmatic access to breakpoints. It includes:
MediaMatcher service: Access to native MediaQueryList.Breakpoints: A set of predefined Material Design responsive breakpoints.BreakpointObserver service: APIs for responding to viewport size changes based on those breakpoints.AngularJS Material performed most theming at run-time using JavaScript, which incurred performance costs.
Angular Material performs theming at compile-time using Sass. This approach removes JavaScript execution costs associated with theming but requires up-front setup.
Key differences:
[class] or [ngClass] bindings to toggle between pre-defined theme classes.$mdThemingProvider service during the module configuration phase. At runtime, the $mdTheming service evaluates the theme's color definitions and appends the generated CSS to the document's <head>.md-checkbox directive supports bi-directional (RTL) layouts. It respects the dir attribute on the <html> tag (e.g., <html dir="rtl">).The project follows specific architectural patterns to ensure maintainability and minification efficiency:
AngularJS Material uses a runtime injection mechanism to apply themes. It does not rely on static CSS files for component styles, but instead dynamically generates and injects <style> tags into the <head> of your application based on registered themes.
*-theme.scss files are compiled into a single CSS string. This string is injected into the material.core module as a constant named $MD_THEME_CSS.generateAllThemes() function parses the $MD_THEME_CSS constant. It uses an internal closure variable GENERATED to track which themes have already been processed to prevent duplicate generation.<style> tags. These tags are distributed across the four standard palettes:primaryaccentwarnbackgroundEach palette results in four specific hue-based <style> tags (e.g., .md-primary, .md-primary.md-hue-1, .md-primary.md-hue-2, and .md-primary.md-hue-3).
The project organizes component modules within the /src/components directory. Each component has its own folder containing the logic, tests, and styles, along with a demo subfolder. Compiled assets are distributed in the /dist directory both as individual modules and as a combined library.
-- /src
-- /components
-- /<component folder>
-- <component>.js
-- <component>.spec.js
-- <component>.scss
-- <component>-theme.scss
-- /demo<name>
-- index.html
-- style.css
-- script.jsSlow layout calculations in Internet Explorer are often caused by large numbers of elements in the DOM, especially when using ng-repeat. To mitigate this, use the md-virtual-repeat directive.
md-virtual-repeat only adds elements to the DOM that are currently visible in the viewport and reuses elements as the user scrolls. This allows for efficient scrolling through millions of records.
Requirement: All list items must have an equal and static height for virtual repeat to function correctly.
Wrap your list in an md-virtual-repeat-container and use the md-virtual-repeat directive on the repeating item.
<md-content layout="column" ng-controller="ListCtrl">
<md-virtual-repeat-container id="vertical-container">
<md-list>
<md-list-item md-virtual-repeat="person in people"
ng-click="goToPerson(person.name, $event)">
<img alt="{{ person.name }}" ng-src="{{ person.img }}" class="md-avatar">
<p>{{ person.name }}</p>
<md-checkbox class="md-secondary" ng-model="person.selected"></md-checkbox>
<md-icon md-svg-icon="communication:email" ng-click="doSecondaryAction($event)"
aria-label="Send Email" class="md-secondary md-hue-3"></md-icon>
<md-icon class="md-secondary" ng-click="doSecondaryAction($event)" aria-label="Chat"
md-svg-icon="communication:message"></md-icon>
</md-list-item>
</md-list>
</md-virtual-repeat-container>
</md-content>AngularJS Material uses a hierarchical theming system to provide a consistent visual tone across all UI components. The system is built on four key concepts:
red, blue, green, grey).primary: Represents primary interface elements.accent: Represents secondary interface elements.warn: Represents elements requiring user caution.When migrating from AngularJS Material to Angular Material, many features have been moved to the more generic Angular Component Dev Kit (CDK). Use the following mapping to find the equivalent functionality in the CDK:
| AngularJS Material | CDK Equivalent |
|---|---|
$mdPanel | Overlay |
md-virtual-repeat | *cdkVirtualFor |
md-virtual-repeat-container | cdk-virtual-scroll-viewport |
$mdLiveAnnouncer | LiveAnnouncer |
$mdUtil.bidi() | Directionality service and Dir directive |
md-input (md-no-autogrow, max-rows) | CdkTextareaAutosize |
layout system | See Angular CDK Layout section |