- autocomplete: allows tab or enter to select an item (59015b09)
- button: support angular-new-router ng-link (4b9dcab5, closes #2478)
- tooltip: Support hide-* show-* and user defined css using "display: none;" (08132848, closes #2386)
- content containers for
md-dialognow requiremd-dialog-contentto be more flexible with child content containers. This is more consistent withmd-card, which usesmd-card-content. (9dc62403) - md-input-containers no longer allow both label and placeholder to be used simultaneously. Now the placeholder value (if present) is transcluded as a label or ignored. When the placeholder value is ignored, a warning will be logged. (d931c0d2)
- autocomplete:
- adds support for the new
$animate.pin()inng-animate@1.4.0-rc.1(790ccca6) - adds watcher for ngDisabled rather than 2-way binding (973a2fca, closes #2160)
- allow undefined
searchTextandselectedItem(8fb60c34, closes #2515) - fixes issue where autocomplete suggestions were not hiding (da0a4f06)
- fixes bug that prevented autocomplete results from displaying on focus if min-le (5e72bb3d)
- adds support for the new
- bottomsheet: fix button styles (7bd97acc)
- build:
- button:
- card: md-action-bar renamed to .md-actions (5610dc98, closes #2472)
- chips:
- demo: fix list demo secondary action. (7e5d5e34, closes #2471)
- dialog:
- docs: fix doc app toolbar breadcrumb when using back button (58f2c481, closes #2464)
- gridlist: Tile ordering improved (5d9142ea, closes #2553, #NaN)
- highlight: adds missing characters to sanitize method (ef0dce07, closes #2292)
- icon: rem sizes, line-height for font icons (860d1f67, closes #2597)
- input: improve layout when md-input-container has nested md-icon. (2dbe6a97, closes #2452)
- interimElement: fix default parent grabbing svg body (952d5f50)
- list:
- mdUtil:
- select:
- tabs:
- tests: support for Angular 1.4 and improved use of angular-mocks. (48ee9867)
This RC2 release contains more polish and bug fixes to stabilize performance, layout, and improve the UX for Chips, List, Select, and Tabs.
- chips:
- list:
- mdUtil: add md-overflow-wrapper-shown class to DOM (5a028092)
- List
md-itemhas been renamed tomd-list-itemmd-item-contentelement is now a.md-list-item-textclass- List styles of
.md-tile-leftchanged to.md-avatarfor avatar-like images md-list-itemuses.md-no-proxyand.md-no-style
- Tabs
- When using
md-tab-label, the content of your tab must be wrapped inmd-tab-body
- When using
- Typography changes have significantly impacted the
<h1>...<h4>types.
(f1db7534)
- autocomplete: fixes positioning logic to fire at the correct time (8946322b, closes #2298)
- button:
- card: action bar spacing, remove order attrs (50ce4e8b, closes #2403)
- checkbox: style checkbox without visual label (ab264807, closes #2175)
- chips:
- adds better focus handling for chips (def6d3a4)
- fixes issue where arrow keys switch active chip while editing input field (1f261440)
- fixes issue with deletion logic (6d4ecbee)
- fixes shift+tab interaction with
md-chips(314aae1c) - adds aria-hidden to remove buttons (79b07399, closes #2345)
- adds slightly better support for input types other than
text(d885d638) - prevents item deletion when text is selected (b65236b7, closes #2322)
- dialog: action spacing matches spec (d7b23763, closes #2389)
- input: expect input container to use placeholder for label fallback (8410c0d6, closes #2397)
- inputContainer: style ng-messages as both element and attr (a5d09af5)
- interimElement: add fallback to document.body if root node removed (3b3d0205)
- list:
- mdList: remove focus state on blur (588e58cf, closes #2339)
- select:
- fix scrollbars not respecting parent overflow hidden (b9ee6121)
- fix select backdrop closing when parent is destroyed (2d66368c)
- fix infinite loop condition (6e3b43cc)
- fix 1px error to match md-input-container style (bd566a52)
- add tabindex, aria-disabled support (40924003, closes #2308)
- fix restore focus on select close (f55eeba0)
- remove broken ARIA attributes (aaa6e5aa)
- improve keyboard filtering (f3c113c9)
- improve disable scroll layout (68395a25)
- tabs:
- tabs will no longer assume that all tabs have no content if the first one doesn't (1b789fed, closes #2398)
- adds a queue for delayed function calls (0e2ccd23, closes #2402)
- resolves issue where
md-tabsis used withinui-viewby removing hard require (43508032, closes #2414) - apply ARIA only to dummy tabs (5ad44728)
- cleans up label/template fetch logic (17aecd2d)
- id's should no longer cause issues when used within tab labels or contents (ea185eab, closes #2326)
- tests: mock .flush() added for Angular 1.4.x (1e3f1a59)
- textfield: removed unstable, deprecated textfield component Replaced with md-input-container (b5c4390b)
The release of 0.9 is primarily focused on bug fixes and polish efforts. Also included in this upcoming release will be added support for List items and controls, Chips, re-architected Tabs, and improvements to Gesture support and documentation.
- autocomplete:
- adds
md-menu-classto allow users to add a class to the dropdown menu for cust (860897d9) - dropdown will now stretch to accomodate longer text (b1343704)
- adds support for
md-autocomplete-snapto specify parent element for autocomple (15d1db73) md-highlight-textnow supports custom flags (1ac0c93c, closes #1799)- adds support for
nameattribute (ebca76da) - adds support for floating labels (f487248a)
- adds
- button: support for link icon buttons (1b9bafb5, closes #2265)
- card: add default background color (3bc8b27b, closes #1846)
- chips: initial commit Supports basic list mutation (add, remove items). (713f7b67, closes #2030)
- gestures: add provider to all config and optional skipClickHijack() (f28393df)
- layout: re-add offset attribute (fecceeb5)
- list: BREAKING: add list controls (abb807d0, closes #2021)
- mdButton: add icon button for toolbars, etc. (6ee9a190, closes #2091, #NaN)
- mdCard: support md-card-footer (ff794eca, closes #1474)
- radioButton: allow theming on radio group (30d0cc44, closes #1746)
- script: Set ngModule to Closure namespace. (ade76f95, closes #1709)
- select:
- sidenav:
- tabs:
- adds support for
md-no-pagination(d0ddad1f, closes #1189) - adds support for
md-center-tabs(2de0cf26, closes #1992) - adds support for
labelattribute without tab content (faab8883, closes #2068) - adds support for dynamic height based on tab contents (efde63c4, closes #2088)
- refactors tabs to function closer to spec (f34eb800, closes #1087, #1107, #1140, #1247, #1261, #1380, #1387, #1403, #1443, #1505, #1506, #1516, #1518, #1564, #1570, #1620, #1626, #1698, #1777, #1788, #1850, #1959, #1986, #2020, #1944)
- adds support for
- tooltip: adds
md-autohidefunctionality (b682e36a, closes #1689)
Generated HTML and style improvements:
- CSS Focus outlines not prevented by default
- Box-sizing removed from body, applied to components
textRendering: optimizeLegibilityremoved from body, applied to a subset of elements- Font sizes, margins, padding in
remunits - Roboto webfont included in SCSS
- Typography: classes introduced for headings and body copy
- High-contrast mode supported on Windows
- Docs: Pinch and zoom re-enabled in viewport
Bugs fixed:
- #1087, #1107, #1140, #1247, #1261
- #1380, #1387, #1403, #1443, #1505
- #1506, #1516, #1518, #1564, #1570
- #1620, #1626, #1698, #1777, #1788
- #1850, #1959, #1986, #2020
(f34eb800)
- include Roboto as non-blocking (5936f7a0, closes #2247, #NaN)
- switch focus on keyboard, use .md-focused (0e916bfc, closes #1336)
- limit global list styles (fde08cc1)
- refactor global CSS styles (6af1546d, closes #1442, #NaN)
- autocomplete:
- fixes menu flicker (9b2dc2c4)
- updates the z-index to account for use within sidenav or dialog (3cc914d7, closes #2202)
- hitting enter with an item selected no longer resets the selected item (7e666ab4, closes #2183)
- dropdown will shift if there is not enough space (0b15c976, closes #2004)
- moves autocomplete dropdown to nearest content container (7f355f6d, closes #2013, #1961, #1670)
md-min-lengthnow supports 0 as a value and will show dropdown on focus (dcf92682)md-search-text-changenow fires when content is deleted from text (f308779a, closes #2061)- item templates now handle child bindings in the correct scope (2e157d2b, closes #2065)
- adds a minimum width (66fe5757, closes #1853)
- hides cancel button when field is disabled (936b8816, closes #1710)
- adds support for
md-autofocus(c6374d9b, closes #1764) - accepts pre-selected values (c3fcd0d8, closes #1779)
- will no longer query when item is selected (5f141269, closes #1835, #1732)
- disables browser autocomplete (1a8b5658, closes #1849)
- autocomplete now selects the first item by default and no longer hides results w (4c2b086a, closes #1858)
- adds support for
$httppromises (de423ae4, closes #1798)
- bottomSheet: make bottom sheet work with new md-list (bc32eb4c)
- bower: fixes bower warning (c4979d68, closes #2165)
- build:
- button:
- update to use .md-focused (7d1608e6)
- safari background FAB colors (0178b895, closes #2011)
- hover, disabled, alignment, docs (a936e1ed, closes #1607, #NaN)
- prevents transition from firing on ng-leave (9aedd741, closes #936)
- Support ui-sref attribute natively. (7b743ed4)
- fixes ripple on fab buttons in safari (a1c011ef, closes #1856)
- card: add correct themed background color (9af45d37)
- checkbox:
- chips:
- dialog:
- divider: make divider work with new md-list (ebcd7f04)
- docs: use node_modules/angularytics (b8cc062a)
- gesture: don't stop hijacking clicks on ios & android when jquery is loaded (81bcf7fd, closes #1869, #1842)
- gestures:
- gridlist:
- icon:
- icons:
- input:
- float labels support dir=rtl (b88b744f, closes #964)
- Only make invalid input label red when it's floating (6d368505, closes #1928)
- delegate clicks in IE10 (d0b427d6, closes #1394)
- improve textarea appearance on firefox and IE (a693dabd, closes #1157)
- input validation and visual error indicators fixed (c818da75, closes #1606)
- list:
- md-select: Track disabled state (dc93bffe)
- mdButton: focus styles only on keyboard (dfb4d1ab, closes #1423)
- progressCircular: fixes animation in IE11 (d5b77bdc, closes #387)
- radioButton: fix googly eyed radio-buttons (bffa15ab)
- ripple:
- select:
- greatly improve scroll disable compatability (614630d7)
- fix invalid css (2f9eef70)
- make select focus states match ui-spec (42db19dd)
- bug using select attr with inferred value (e20b1906)
- fix scrollbar margin of select parent (f3cd5b9c)
- make select positioning factor in scroll bar width (e18450fb)
- reposition select on resize events (0fe35cc8)
- fix md-on-show not hiding spinner for non-async (13b9c697)
- make constrained select fit to top/left first (f6f2187c)
- BREAKING: make select more inline with md-input-container styles (a67a6a2e)
- fix alignment of select dropdown arrow (5c853e66)
- fix firefox select positioning, page moving on open (a15347cd)
- sidenav: improve API usage for $animate enter/leave (4245bcf7, closes #2261)
- subheader: fix width styling while scrolling (2f335732)
- tabs:
- resets offset if the user resizes causing pagination to no longer be necessary (bd1c973a)
- fixes styles for
md-align-tabs="bottom"(0dabfc5c) - fixes Safari issue regarding dynamic tabs transitions (4ac7dc03)
- fixes flicker issue with dynamic height (48eeb627)
- fixes styles for
md-border-bottomandmd-align-tabs(9affd121, closes #2119) - adds support for height changes in between tab switches (64c4585b, closes #2088, #2177)
- resolves issue where code was attempting to fire after the tabs array had been r (f15fd050)
- re-added
md-on-selectandmd-on-deselectevents tomd-tabdirective (c84899df) - applies correct styles for tabs living inside md-toolbar (4c59c5c5, closes #2067)
- updates CSS so that tabs support scrolling when necessary (9f0d428c, closes #2088)
- theming:
- toast: style tweaks for desktop rendering, fix opacity (860a55ec)
- toolbar: md-button style cleanup (1c19272a, closes #2267, #2146)
- tooltip:
- autocomplete: clicking on the scrollbar in the dropdown will no longer cause the list to hide (2731f107, closes #1739)
- gestures: resolves jQuery conflict with $mdGesture (79505888)
- select:
- support rtl direction (59e30a39)
- make md-option work with ng-selected (425a76a3)
- make select work with ng-disabled (60514054)
- fix select not setting initial value (6dc46d52)
- fix closing select a second time on firefox (e49a20e8)
- fix positioning / sizing on firefox (67618dc8)
- fix resetting value for selects without placeholder (2a0ea163)
- fix empty select breaking page (6e7b36cf)
- make select consistent with md-input (6aa1c8a7)
- positioning when to close to bottom or right (cf78ba9f)
- autocomplete: adds support for
md-delayto wait until the user stops typing to poll for resu (70a884a1)
- autocomplete:
- button: allow attribute syntax for md-button. (fc223b0c, closes #1661)
- core: Remove redeclared variable declaration. (3454db3c, closes #1697)
- input:
- select:
- when nothing selected, focus first option (50b5d923)
- make space not scroll select (b8da17a0)
- make sure arrow keys always focus next/prev option (e441abaf)
- render label on external model updates (6baed64c)
- fix updating of values on change and init (0e21b3bc)
- change placeholder computation to be handled internally (b4c0a86e)
- fix duplicate options when using ng-repeat (9e0ca443)
- fix chrome double scroll bars (4d722ecf)
- tooltip: fixes
md-directionattribute functionality (93080cae, closes #1673)
- select:
- select:
- keyboard controls in IE (69053a30)
- fix overflow scroll on IE (c5c5f860)
- prevent select from closing a dialog on click away (c573c8cd)
- stop position from going past bottom of screen (805ed1b4)
- fix select with 0 options positioning (5a82426e)
- support custom interpolate symbols (20b66111)
- remove placeholder for falsey, but defined values (9497f063)
- close md-select-menu if md-select is removed (5e02ad94)
- select:
- autocomplete: added initial files for autocomplete (0bd8cf1c, closes #1418)
- dialog: add ability to specify theme on alert and confirm presets (c97f48b7)
- gridlist: Initial gridList implementation (ef4aff00)
- icon: implemented md-icon for font-faces and svgs (b7d09d7e, closes #1438)
- input: adds
no-floatclass to disable floating label animations (33f677e5, closes #201, #1392) - tabs: changes default state of tabs to be transparent. (732cbc9c, closes #1250, #1393)
- toast:
- tooltip: adds
md-directionso that users can specify tooltip direction (9c69c5cd, closes #1220, #1410)
- autocomplete:
- dialog: correct opening position for showing a dialog (150efe62)
- docs: toolbar button overlap on mobile (7391cad4)
- gridlist:
- Tile removal now supports ngAnimate (1d8e7832, closes #1559, #1560)
- add ngInject annotation support for GridLayoutFactory - $mdGridLayout (c045f542)
- Throws error on invalid or missing colCount to avoid infinite loops (39f4f26a)
- Adds grid height calculation (0196014d)
- Prevents media from being unwatched immediately (a4104215)
- icon:
- input:
- layout: fix responsive breakpoint dead-zones (ecf6edef)
- mdButton: add default color, update docs (a80804b5, closes #1486)
- select: fixes scrollbar and padding issues (5d7b63b0)
- tooltip: content text was semi-opaque (42cff135, closes #1480, #1492)
- autocomplete: selected item now properly updates (1307b945, closes #1468)
- button: remove underline on href button hover (c19cd433)
- card: fixes selector to be more specific (2f840b2a)
- gesture: fix gesture event dispatching with jQuery (88813b78, closes #1367)
- input: check invalid model immediately and setInvalid() if needed (e0f53ddd, closes #372)
- mdIcon:
- mdInput: css cascades from disabled fieldset (66fa1e3e, closes #895)
- mdMedia: fix media listeners not firing on non-chrome browsers (0dfcaf55)
- mdTabs: use md-icon for pagination arrows (517623e7, closes #1464, #1466)
- sidenav: properly sets width of sidenav (0318ca44, closes #957)
- slider:
- subheader: fix subheaders within dialogs (55084143)
- theming: fix typo in warning message (8a6eb7e8)
- toast: fix minified toast controller injections (5c5106e4)
- tooltip: now works inside elements without pointer events (3d010cd8)
- bottomSheet: disable scroll on parent when bottom sheet is shown (8273126c)
- button: adds attribute override for ripple size (b7c43a10, closes #1088)
- gestures: add built in gesture system, remove HammerJS (8364fb57)
- input: make input placeholder attr work (f1d7f830, closes #1279)
- mdInputContainer: add mdIsError expr, defaults to $touched && $invalid (c3cad666, closes #1267)
- sidenav:
- theming:
- add warnings when using unregistered themes (f6f56c98)
- warn for same palette as primary and accent (1c973330)
- fix strong light colors vs normal light colors, as per spec (dd5b9549)
- rename palette methods, change default palettes (0e0846fe, closes #1252)
- change default color of components that should be accent (f2996b73)
- toolbar: add shadow to toolbar (4e47a174)
- As per the spec this commit changes the default color palette of FABs, checkboxes, radio buttons, sliders and switches to the accent palette.
closes #1255
(f2996b73)
- card: fixes selector to be more specific (2f840b2a)
- gesture:
- theming:
- fix warning for
changeThemebeing wrong (f44bf604)
- fix warning for
- checkbox:
- make
mdAriacheck linked element (3346532c)
- make
- build:
- button:
- card:
- allow img to have a wrapper (349b521e)
- dialog: fix overlay not covering, dialog position in overlay (1d5ef95d)
- input:
- layout: fix IE11 layout (74fe3eb1, closes #1227)
- mdSwitch: add missing styles to switch (54338d7d, closes #912)
- ripple: fixes size issue with ripple on switches (c435409b)
- slider:
- styles: fix subheader z-index, button md-mini class, md-no-bar. (dde9ab79, closes #1182, #1034, #1173, #1194)
- switch: set tabindex to -1 while disabled (19f47b5d)
- tabs:
- toast:
- input:
- fix bug regarding
md-maxlengthvalue changes (b432277d)
- fix bug regarding
- allow user selection when swipe listener is enabled (520faa72, closes #838)
- button:
- dialog:
- input: fix label inputs with specified types (747c6acb)
- layout: make sure hide-gt-* and show-gt-* work together properly (d149f36b, closes #772)
- radioGroup: fix render call happing before radioGroup init (68e350d1)
- subheader: make content clickable (7178b6d6, closes #554)
- tabs:
- theming: make switch, checkbox, radio button default to primary color for consistency (8cbfeadf)
- input: add error states, md-maxlength (a2bc3c68)
- layout: add flex-order-{sm,gt-sm,md,gt-md,lg,gt-lg} attributes (3e453078)
- tooltip: add configurable md-delay attr, default 400ms. (e4ed530d, closes #713)
- $mdUtil: fix bugs in iterator's
next()/previous()methods Refactor for DRY-ness `next (124466e7) - $mdComponentRegistry: gracefully recover if no md-component-id is specified (bf2266f1)
- demos: tab dynamic demo removes use of on-select expressions (4db16c17)
- mdDialog:
- input: fix height on IE11 (dc31ee53)
- layout:
- mdButton:
- mdCard: add an md-card-content container inside md-card for content (28a4f8ff, closes #265)
- mdMedia: avoid unnecessary digest and make changes apply quicker (98247bcf, closes #978)
- mdRadioButton: Loosen equality check (ca3e4c30, closes #1112)
- mdToolbar: Toolbar flow on medium screens (bfc947f6)
- mdUtil:
- mdRadioButton: arrowkey navigation with disabled buttons (f520d507, closes #1040)
- mdSidenav: Fix tests and typo (c0e2b0fb)
- mdTabs:
- theming:
- mdDialog: disable scrolling on parent while showing dialog (993fa2bc)
- input:
- textarea: make textarea autogrow with size of content (1c653696, closes #565)
- layout: add layout-align-{sm,gt-sm,md,gt-md,lg,gt-lg} attrs (8550bd6c, closes #631)
- mdRadioGroup: Radio submits on keydown/enter (03c75927, closes #577)
- mdSlider: make discrete track ticks themable (91bc598f, closes #621)
- mdSwitch: add grab/grabbing cursor during drag (c60640bf, closes #983)
- mdTabs: adds default transitions for tab content (3ee83a64, closes #1044, #717, #811)
- $mdToast: add mdToast#showSimple shortcut method (dd960c6f)
- md-text-float has been deprecated due to flaws (explanation in #547).
To create an input, you now must use the native <input> and <textarea>
elements, with a <md-input-container> parent around each
<input> or <textarea>.
Change your code from this:
<md-text-float label="First Name" ng-model="firstName"></md-text-float>To this:
<md-input-container>
<label>First Name</label>
<input ng-model="firstName">
</md-input-container>- md-card now requires a separate
md-card-contentelement containing the card's content. This was done to fix padding problems with the content.
Change your code from this:
<md-card>
<img src="img/washedout.png" alt="Washed Out">
<h2>Paracosm</h2>
<p>
The titles of Washed Out's breakthrough song and the first single from Paracosm share the
two most important words in Ernest Greene's musical language: feel it.
</p>
</md-card>To this:
<md-card>
<img src="img/washedout.png" alt="Washed Out">
<md-card-content>
<h2>Paracosm</h2>
<p>
The titles of Washed Out's breakthrough song and the first single from Paracosm share the
two most important words in Ernest Greene's musical language: feel it.
</p>
</md-card-content>
</md-card>(28a4f8ff)
- $$interimElement: make templates work with custom interpolation symbols (d5aa68d1)
- build: correct in buildConfig.js (6caccf75, closes #981)
- button: fix hover on flat buttons (de587772)
- checkbox:
- demo: Update slider demo to work in IE11 (39559808, closes #653)
- filenames: updated component .scss names to match conventions (629b753f)
- layout:
flex="n"attrs set height for column layout, width for row (d3577798, closes #937) - mdToast: Puts index above dialog (4ae4e072, closes #903)
- switch: only add focus border if label is not empty (9c24cc93, closes #944)
- tooltip: fix bugs in Safari & Firefox, as well as scrolling bugs (0d265292, closes #593)
- theming: use $mdThemingProvider (47f0d09e)
- Themes are no longer defined by linked CSS files.
Themes are now defined through Javascript only. A 'theme template' is bundled into angular-material.js, and then Javascript is used to generate theme css for every theme the user defines.
The default theme is still shipped with angular-material.
If you used another theme (for example, the purple theme), change your code from this:
<link rel="stylesheet" href="/themes/purple-theme.css">
<div md-theme="purple">
<md-button class="md-primary">Purple</md-button>
</div>To this:
var app = angular.module('myApp', ['ngMaterial']);
app.config(function($mdThemingProvider) {
//will use the colors from default theme for any color not defined.
$mdThemingProvider.theme('purple')
.primaryColor('purple');
});<div md-theme="purple">
<md-button class="md-primary">Purple</md-button>
</div>For more information, read the updated Theme documentation - (47f0d09e)
- checkbox:
- compiler: trim whitespace from templates (effects toast, bottomSheet, etc) (3be3a527)
- dialog: transition in and out properly to/from click element (1f5029d0, closes #568)
- layout: make [hide] attr work properly with all device sizes (c0bbad20)
- mdMedia: support all prefixes: sm,gt-sm,md,gt-md,lg,gt-lg (c1cb9951)
- ripple: fixes an error caused when clicking on disabled checkboxes (8a1718d7)
- slider:
- tabs:
- toolbar: use accent color for buttons inside (12d458e3)
- tooltip: make it appear above dialogs (a3ce7d84, closes #735)
- layout: add both layout-margin and layout-padding attributes (5caa22b2, closes #830)
- toast: simple with content string: '$mdToast.simple('my-content')` (554beff3, closes #833)
- dialog: correct the opening position when opening from a button (22865394, closes #757)
- hide: make hide-gt-* attrs work properly with larger show attrs (7fc6b423)
- ripple: prevent null error while using ripple (6d81ded1)
This version introduces more breaking layout changes, ripple improvements, aria improvements, bug fixes, and documentation enhancements.
- button: add override for transitions on ng-hide (8fa652cf, closes #678)
- layout: add [flex-{sm,md,etc}] attr for 100% flex on screen size (7acca432, closes #706)
- ripple:
- sidenav: use flex display when opened (ae1c1528, closes #737)
- mdAria: checks child nodes for aria-label (d515a6c2, closes #567)
- mdBottomSheet: add escape to close functionality (d4b4480e)
- tabs: ink ripple color syncs with ink bar (9c56383b)
-
The -phone, -tablet, -pc, and -tablet-landscape attribute suffixes have been removed and replaced with -sm, -md, and -lg attributes.
-
hide-sm means hide only on small devices (phones).
-
hide-md means hide only on medium devices (tablets)
-
hide-lg means hide only on large devices (rotated tablets).
Additionally, three new attribute suffixes have been provided for more flexibility:
- hide-gt-sm means hide on devices with size greater than small (bigger than phones).
- hide-gt-md means hide on devices with size greater than medium (bigger than tablets)
- hide-gt-lg means hide on devices with size greater than large (bigger than rotated tablets).
See the layout options section of the website for up-to-date information.
(a659c543)
v0.6.0-rc1 releases the following changes:
- improvements to the ink Ripple effects
- namespace prefixing Material attributes
- revised the Layout system to be more intuitive and responsive
- added enhancements for modular builds and distrbution for each component
- improved minification and SHA tags for each deployed .js and .css file
- numerous bug fixes to improve stability, adds responsive features, and enhances API documentation.
- button: fix css for md-fab icon position when href is present (a7763fde, closes #591)
- card: make md-card themeable (55cdb5b7, closes #619)
- demos: dialog, bottomsheet, and toast now display within properly within the bounding d (5909f0a5)
- docs:
- layout: updates layout attributes in index template (669d0048)
- md-button: improve a11y: make title, aria-label work (ff576289, closes #512)
- ripple: fix ripple sometimes appearing when the element is disabled (58eaef49)
- sidenav:
- slider: update discrete slider thumb text while dragging (2877585e, closes #622)
- themes: bring blue, red, and green colors up to latest spec (de3ff4b8)
- layout:
- styles: add 'swift' css transitions to all components according to spec (15bb142c, closes #611)
- mdThemingProvider: add alwaysWatchTheme options, fix docs (0a404088)
- radioGroup: add up/down arrow navigation (367e47db, closes #538)
- tabs: add accessibility links between tabs and content (5d3bab56)
- bottomSheet: focus the first available button on open (768cc098, closes #571)
- interimElement: allow options.parent to be a selector (342051e0, closes #640)
- mdDialog: enhance show API with confirm() and alert() builder functions. (12b8cbc06.
See Demos JavaScript source
$mdDialog.show(
$mdDialog.alert()
.title('This is an alert title')
.content('You can specify some description text in here.')
.ariaLabel('Password notification')
.ok('Got it!')
.targetEvent(ev)
);- To provide improved clarity and easier usages, the Layout system has been revised (d51a44c5).
See the updated Layout sections for details. We associate labels with specific breakpoints:
| Label | Size (dp) | Attribute |
|---|---|---|
| Phone | 0 <= size <= 600 | layout-sm |
| Tablet | 600 > size <= 960 | layout-md |
| Tablet-Landscape | 960 >= size <= 1200 | layout-lg |
| PC | > 1200 | layout-gt-lg |
Example 1: To use a horizontal layout and responsively change to vertical for screen sizes < 600 dp:
> ```
>
> **Example 2**: To use a *horizontal* layout and change to *vertical* for *phone* and *tablet* screen sizes:
>```html
```
> **Example 3**: To show an element except when on a *phone* (or smaller) screen size:
>```html
```
> **Example 4**: To always hide an element, but show it only on phone (or smaller) devices:
>```html
```
#### Details on Breaking Changes
Note: If you previously provided a `controller` option to `$materialToast`, that controller would be injected with a `$hideToast` function. This feature no longer exists; use `$materialToast.hide()`.
- For performance, the disabled attribute is no longer supported; instead the ng-disabled attribute is now read to check if a component is disabled. (2ece8cd7)
If you use the
disabledattribute on a component to set whether it is disabled, change it to an ng-disabled expression. Change your code from this:<md-checkbox disabled></md-checkbox>To this:
<md-checkbox ng-disabled="true"></md-checkbox>
-
All material component attributes and are now namespaced with the
md-prefix; these changes do not affect ng- prefixes or standard html5 prefixes (eb2f2f8a). Affected attributes:- <md-button md-no-ink="" >
- <md-content> (92b76435)
- md-scroll-x
- md-scroll-y
- md-scroll-xy
- <md-divider md-inset="" >
- <md-linear-progress md-buffer-value="someValue" md-mode="query" >
- <md-circular-rogress md-mode="query" md-diameter="60" >
- <md-sidenav>
- md-is-open="isOpen"
- md-is-locked-open="isLockedOpen"
- md-component-id="my-sidenav"
- <md-tabs>
- md-selected="selectedIndex"
- md-on-select="doSomething()"
- md-on-deselect="doSomething()"
- md-active="tabIsActive"
- <md-text-float md-fid="someId">
-
When using the
<md-button>directive, the compiled element will now be a normal<a>or<button>element with the class="md-button" attribute. (d835f9ee)
Any css referencing the
md-buttonelement selector should now reference the.md-buttonclass selector. Change your CSS overrides from this:md-button { color: red; }To this:
.md-button { color: red; }
Version 0.5.0 introduces theming support, improves stability, adds responsive features, and enhances API documentation.
- theming: introduce theming support, documented at Theming Introduction (80768270)
- sidenav:
- mdAria: add better warnings (3368c931, closes #366)
- md-input-group: disable with ARIA (72bad32a)
- slider: slider default value in ng-repeat corrected (b652d863, closes #479)
- css:
- textFloat:
- colors:
- The
md-theme-*classes have all been removed, in favor of themes. - Instead, use
md-primaryandmd-warnclasses on an element when a theme is set.
- The
- bottomSheet:
listclass has been renamed tomd-listgridclass has been renamed tomd-gridhas-headerclass has been renamed tomd-has-headergrid-textclass has been renamed tomd-grid-text.
- button:
md-button-coloredclass has been changed tomd-primaryandmd-warncolor classes.- All classes that start with
md-button-fabnow start withmd-fab.md-button-fabtomd-fab.md-button-fab-top-lefttomd-fab-top-leftmd-button-fab-top-righttomd-fab-top-rightmd-button-fab-bottom-lefttomd-fab-bottom-leftmd-button-fab-bottom-righttomd-fab-bottom-right
md-button-corneredclass has been changed tomd-corneredmd-button-iconclass has been changed tomd-iconmd-button-raisedclass has been changed tomd-raised
- content:
md-content-paddingclass has been renamed tomd-padding. - dialog:
dialog-contentclass has been removed. Use anmd-contentelement instead.dialog-actionshas been renamed tomd-actions
- subheader:
md-subheader-coloredis nowmd-primary. - textFloat:
- use of
<md-input-group>is deprecated,<md-text-float>markup can be used for most cases
- use of
- toast:
toast-actionhas been renamed tomd-action - toolbar:
md-toolbar-tallclass has been renamed tomd-tallmd-toolbar-medium-tallclass has been renamed tomd-medium-tall
- whiteframe: md-whiteframe-z* classes no longer set z-index, only shadow
This release adds support for the official Angular 1.3 release and includes improvements to both the document generator and component demos.
Note that
<md-input-group>and<md-input>are deprecated in favor on<md-text-float>. While both directives are still available for more granular control, developers are encouraged to use the<md-text-float>directive whenever possible.
- text-float: Add floating label text field (25cf6f1)
- Focus management for docs views (9afe28a8)
- bottomSheet: use position:fixed so it does not move (bfaf96d8)
- ripple: use contentParent scroll offset (4c0c50e4, closes #416)
- slider:
- subheader: sort items correctly in browsers that dont support true/false (d8e5079e, closes #438)
- tabs: remove tabs all at once on controller destroy (7237767d, closes #437)
Version 0.4.1 changes the prefix for all services and directives from 'material' to 'md'.
To migrate your code, replace all instances of 'material' in your project with 'md':
sed -i '' 's/material/md/g' $(echo my-material-project/app/**/*.{js,html,css})Additionally, material-linear-progress has been renamed to md-progress-linear and material-circular-progress has been renamed to md-progress-circular.
angular-aria is now a dependency. Be sure to include angular-aria.js before angular-material. See https://github.com/angular/bower-material#usage.
Version 0.4 incorporates four (4) new components: circular progress, subheader, tooltip and bottom sheet. A new API has also been introduced for $materialDialog and $materialToast. Additionally, many small component functionality and performance issues have been resolved.
v0.4 is tested on desktop Chrome, Safari and Firefox, as well as Android 4.4+ and iOS7.
The services $materialDialog and $materialToast have changed API(s). See section at bottom for Change Details.
- button:
- checkbox: resolve TypeError for inputDirective.link (4da56732)
- dialog: cancel instead of hiding when user escapes/clicks out (0cc21d47)
- interimElement: make cancel and hide not fail when no element is shown (6162156d)
- progress-linear: Add aria, tests and better animations (3b386276, closes #297)
- radio: Radio button a11y (05ed42de, closes #310)
- toolbar: Demo correct heading levels (fd7697d6)
- ripple:
- sidenav:
- slider: discrete mode supports live dragging and snap-to (b231f1c0, closes #331)
- textfield:
- progress-circular: Add circular progress component (07d56533, closes #365)
- subheader: add subheader component with sticky scroll (7787c9cc, closes #216)
- tooltip: add tooltip component (9f9b0897, closes #354)
- bottomSheet add bottomSheet component (3be359c)
#### Details on Breaking Changes
1) $materialDialog:
Change your code from this:
var hideDialog = $materialDialog(options);
hideDialog();To this:
$materialDialog
.show(options)
.then(
function success(response) {},
function cancelled(reason) {}
);
// Hides the dialog last shown with `show()`
// and resolves the show() promise with `response`
$materialDialog.hide(response);
// Hides the dialog last shown and rejects the `show()`
// promise with the `reason`
$materialDialog.cancel(reason);Note: If you previously provided a controller option to $materialDialog, that controller would be injected with a $hideDialog function. This feature no longer exists; use $materialDialog.hide().
2) $materialToast:
Change your code from this:
var hideToast = $materialToast(options);
hideToast();To this:
$materialToast
.show(options)
.then(
function success(response) {},
function cancelled(reason) {}
);
// Hides the dialog last shown with `show()`
// and resolves the show() promise with `response`
$materialToast.hide(response);
// Hides the dialog last shown and rejects the `show()`
// promise with the `reason`
$materialToast.cancel(reason);Note: If you previously provided a `controller` option to `$materialToast`, that controller would be injected with a `$hideToast` function. This feature no longer exists; use `$materialToast.hide()`.
v0.0.3 includes many bug fixes, performance, and usability improvements to existing components, as well as introducing the slider, switch, divider, and linear progress components.
Additionally, accessibility support is added to material-button, material-checkbox, material-radio-button, material-slider, material-dialog and material-list. With added ARIA support including roles, states and properties, Angular Material directives now also communicate to users of assistive technologies. Additionally, tabIndex and focus management are handled dynamically where appropriate.
0.0.3 is tested on desktop Chrome, Safari and Firefox, as well as Android 4.4+ and iOS 7+. Also tested with VoiceOver on OSX and iOS7, ChromeVox, JAWS, NVDA and ZoomText.
- button: don't use angular transclusion at all, manual only (6b322729)
- card: make it use up proper width with margin (f33185ff, closes #247)
- demo: tab demos improved layout and accessibility (8915c324)
- dialog: use position:fixed instead of absolute (6ba874d8, closes #249)
- iterator: update add()/remove() logic (6a596b32)
- material-dialog: Focus mgmt, ARIA attributes (fe054ae6)
- material-list: Add semantics (6e48cd35)
- material-slider: Adds missing ARIA role (903cbc06)
- ripple:
- slider: watch ngDisabled expr on non-isolate parent scope (5f1923d5, closes #272)
- switch: correctly adjust when label will not fit on one line (e912a838, closes #80)
- tabs:
- make the ink ripple use the color of the ink bar. (c5ca159a, closes #280)
- don't paginate on initial load when width is 0 (5f5435d1, closes #271)
- use position: absolute container to fix ios bugs (7d0a282f, closes #220)
- Tab pagination/selection now works properly on iOS (3410650d, closes #220, #231)
- Tab pagination/selection now works properly on iOS (c77c0e26, closes #220, #231)
- remove window resize listener on $destroy (4b887f1e, closes #254)
- toolbar:
- add hammerjs dependency (e383e4f4)
- $materialToast: add swipe-to-close functionality (22285dc4)
- divider: add implementation of the divider component (e3aceeae, closes #194)
- docs: added support for the doc app to show its associated Git SHA id/link (02d2e5d2)
- progressLinear: Add linear progress indicator (f87d0452, closes #187)
- material-dialog: on open focus
.dialog-closeor the last button (8f756fc6, closes #222) - material-switch: add switch component (4975c743, closes #80)
- slider: add full-featured slider component (5ea4dbc2, closes #260, #31)
- switch: add focus styles (8878ca7a)
- tabs: improvements to pagination, disabled tabs, and tab navigation. (b4244bf3)