{
expect(rippleElement).toBeFalsy('Expected a disabled radio button not to have a ripple');
});
- it('should remove ripple if md-ripple-disabled input is set', async(() => {
+ it('should remove ripple if mdRippleDisabled input is set', async(() => {
fixture.detectChanges();
for (let radioNativeElement of radioNativeElements)
{
diff --git a/src/lib/select/option.html b/src/lib/select/option.html
index 90659d08fbd9..0ced3b05a018 100644
--- a/src/lib/select/option.html
+++ b/src/lib/select/option.html
@@ -1,3 +1,3 @@
-
\ No newline at end of file
+
diff --git a/src/lib/slider/README.md b/src/lib/slider/README.md
index 87e422e90396..781d9d0613a3 100644
--- a/src/lib/slider/README.md
+++ b/src/lib/slider/README.md
@@ -43,40 +43,40 @@ value on bottom.
### Adding a thumb label
By default the exact selected value of a slider is not visible to the user. However, this value can
-be added to the thumb by adding the `thumb-label` attribute.
+be added to the thumb by adding the `thumbLabel` attribute.
The [material design spec](https://material.google.com/components/sliders.html) recommends using the
-`thumb-label` attribute (along with `tick-interval="1"`) only for sliders that are used to display a
+`thumbLabel` attribute (along with `tickInterval="1"`) only for sliders that are used to display a
discrete value (such as a 1-5 rating).
```html
-
+
```
### Adding ticks
By default a sliders do not show tick marks along the thumb track. They can be enabled using the
-`tick-interval` attribute. The value of `tick-interval` should be a number representing the number
-of steps between between ticks. For example a `tick-interval` of `3` with a `step` of `4` will draw
+`tickInterval` attribute. The value of `tickInterval` should be a number representing the number
+of steps between between ticks. For example a `tickInterval` of `3` with a `step` of `4` will draw
tick marks at every `3` steps, which is the same as every `12` values.
```html
-
+
```
-The `tick-interval` can also be set to `auto` which will automatically choose the number of steps
+The `tickInterval` can also be set to `auto` which will automatically choose the number of steps
such that there is at least `30px` of space between ticks.
```html
-
+
```
-
+
The slider will always show a tick at the beginning and end of the track. If the remaining space
doesn't add up perfectly the last interval will be shortened or lengthened so that the tick can be
shown at the end of the track.
The [material design spec](https://material.google.com/components/sliders.html) recommends using the
-`tick-interval` attribute (set to `1` along with the `thumb-label` attribute) only for sliders that
+`tickInterval` attribute (set to `1` along with the `thumbLabel` attribute) only for sliders that
are used to display a discrete value (such as a 1-5 rating).
### Disabling the slider
@@ -91,7 +91,7 @@ value.
### Value binding
`md-slider` supports both 1-way binding and 2-way binding via `ngModel`. It also emits a `change`
-event when the value changes due to user interaction.
+event when the value changes due to user interaction.
```html
@@ -132,7 +132,7 @@ right-to-left languages.
| `max` | number | Optional, the maximum number for the slider. Default = `100`. |
| `step` | number | Optional, declares where the thumb will snap to. Default = `1`. |
| `value` | number | Optional, the value to start the slider at. |
-| `tick-interval` | `"auto"` \| number | Optional, how many steps between tick marks. |
+| `tickInterval` | `"auto"` \| number | Optional, how many steps between tick marks. |
| `invert` | boolean | Optional, whether to invert the axis the thumb moves along. |
| `vertical` | boolean | Optional, whether the slider should be oriented vertically. |
| `disabled` | boolean | Optional, whether or not the slider is disabled. Default = `false`. |
diff --git a/src/lib/slider/slider.spec.ts b/src/lib/slider/slider.spec.ts
index 951562e71017..46367d801331 100644
--- a/src/lib/slider/slider.spec.ts
+++ b/src/lib/slider/slider.spec.ts
@@ -1041,7 +1041,7 @@ class StandardSlider { }
class DisabledSlider { }
@Component({
- template: ``,
+ template: ``,
styles: [styles],
})
class SliderWithMinAndMax {
@@ -1062,19 +1062,19 @@ class SliderWithValue { }
class SliderWithStep { }
@Component({
- template: ``,
+ template: ``,
styles: [styles],
})
class SliderWithAutoTickInterval { }
@Component({
- template: ``,
+ template: ``,
styles: [styles],
})
class SliderWithSetTickInterval { }
@Component({
- template: ``,
+ template: ``,
styles: [styles],
})
class SliderWithThumbLabel { }
diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts
index 5be17ccd817a..f9906be8f78f 100644
--- a/src/lib/slider/slider.ts
+++ b/src/lib/slider/slider.ts
@@ -103,10 +103,15 @@ export class MdSlider implements ControlValueAccessor {
/** Whether or not to show the thumb label. */
private _thumbLabel: boolean = false;
- @Input('thumb-label')
+ @Input('thumbLabel')
get thumbLabel(): boolean { return this._thumbLabel; }
set thumbLabel(value) { this._thumbLabel = coerceBooleanProperty(value); }
+ /** @deprecated */
+ @Input('thumb-label')
+ get _thumbLabelDeprecated(): boolean { return this._thumbLabel; }
+ set _thumbLabelDeprecated(value) { this._thumbLabel = value; }
+
private _controlValueAccessorChangeFn: (value: any) => void = () => {};
/** The last value for which a change event was emitted. */
@@ -140,12 +145,17 @@ export class MdSlider implements ControlValueAccessor {
*/
private _tickInterval: 'auto' | number = 0;
- @Input('tick-interval')
+ @Input()
get tickInterval() { return this._tickInterval; }
set tickInterval(v) {
this._tickInterval = (v == 'auto') ? v : coerceNumberProperty(v, this._tickInterval);
}
+ /** @deprecated */
+ @Input('tick-interval')
+ get _tickIntervalDeprecated() { return this.tickInterval; }
+ set _tickIntervalDeprecated(v) { this.tickInterval = v; }
+
/** The size of a tick interval as a percentage of the size of the track. */
private _tickIntervalPercent: number = 0;
diff --git a/src/lib/tabs/tab-group.scss b/src/lib/tabs/tab-group.scss
index 62a89f2e8f6e..0cc31e4050b6 100644
--- a/src/lib/tabs/tab-group.scss
+++ b/src/lib/tabs/tab-group.scss
@@ -25,7 +25,7 @@
flex-grow: 1;
}
-// The bottom section of the view; contains the tab bodies
+// The bottom section of the view; contains the tab bodies
.md-tab-body-wrapper {
position: relative;
overflow: hidden;
@@ -33,11 +33,12 @@
transition: height $md-tab-animation-duration $ease-in-out-curve-function;
}
-// Wraps each tab body
+// Wraps each tab body
md-tab-body {
@include md-fill;
display: block;
overflow: hidden;
+
&.md-tab-body-active {
position: relative;
overflow-x: hidden;
@@ -45,7 +46,8 @@ md-tab-body {
z-index: 1;
flex-grow: 1;
}
- :host[md-dynamic-height] &.md-tab-body-active {
+
+ :host.md-tab-group-dynamic-height &.md-tab-body-active {
overflow-y: hidden;
}
}
@@ -54,4 +56,4 @@ md-tab-body {
.md-tab-disabled {
cursor: default;
pointer-events: none;
-}
\ No newline at end of file
+}
diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts
index 0f46849eeb90..91f919b4450d 100644
--- a/src/lib/tabs/tab-group.ts
+++ b/src/lib/tabs/tab-group.ts
@@ -48,6 +48,7 @@ export class MdTabChangeEvent {
selector: 'md-tab-group',
templateUrl: 'tab-group.html',
styleUrls: ['tab-group.css'],
+ host: { '[class.md-tab-group-dynamic-height]': 'dynamicHeight' }
})
export class MdTabGroup {
@ContentChildren(MdTab) _tabs: QueryList;
@@ -65,9 +66,14 @@ export class MdTabGroup {
/** Whether the tab group should grow to the size of the active tab */
private _dynamicHeight: boolean = false;
- @Input('md-dynamic-height') set dynamicHeight(value: boolean) {
- this._dynamicHeight = coerceBooleanProperty(value);
- }
+ @Input()
+ get dynamicHeight(): boolean { return this._dynamicHeight; }
+ set dynamicHeight(value: boolean) { this._dynamicHeight = coerceBooleanProperty(value); }
+
+ /** @deprecated */
+ @Input('md-dynamic-height')
+ get _dynamicHeightDeprecated(): boolean { return this._dynamicHeight; }
+ set _dynamicHeightDeprecated(value: boolean) { this._dynamicHeight = value; }
/** The index of the active tab. */
private _selectedIndex: number = null;
diff --git a/src/lib/tabs/tab-header.html b/src/lib/tabs/tab-header.html
index a73c284021f2..238c98f7d8e1 100644
--- a/src/lib/tabs/tab-header.html
+++ b/src/lib/tabs/tab-header.html
@@ -1,6 +1,6 @@
@@ -16,8 +16,8 @@
-
\ No newline at end of file
+
diff --git a/src/lib/tooltip/README.md b/src/lib/tooltip/README.md
index 65a7857d4d01..7d79fa18d2f4 100644
--- a/src/lib/tooltip/README.md
+++ b/src/lib/tooltip/README.md
@@ -6,18 +6,18 @@ The positions `before` and `after` should be used instead of `left` and `right`
### Examples
A button with a tooltip
```html
-
+
```
-## `[md-tooltip]`
+## `[mdTooltip]`
### Properties
| Name | Type | Description |
| --- | --- | --- |
-| `md-tooltip` | `string` | The message to be displayed. |
-| `tooltip-position` | `"before"|"after"|"above"|"below"|"left"|"right"` | The position of the tooltip. |
+| `mdTooltip` | `string` | The message to be displayed. |
+| `mdTooltipPosition` | `"before"|"after"|"above"|"below"|"left"|"right"` | The position of the tooltip. |
### Methods
diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts
index 97481e8bbf80..83c9ac5a1657 100644
--- a/src/lib/tooltip/tooltip.spec.ts
+++ b/src/lib/tooltip/tooltip.spec.ts
@@ -302,8 +302,8 @@ describe('MdTooltip', () => {
selector: 'app',
template: `
`
})
diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts
index c14536da593d..b8c1f9e003bd 100644
--- a/src/lib/tooltip/tooltip.ts
+++ b/src/lib/tooltip/tooltip.ts
@@ -43,7 +43,7 @@ export const TOUCHEND_HIDE_DELAY = 1500;
* https://material.google.com/components/tooltips.html
*/
@Directive({
- selector: '[md-tooltip], [mat-tooltip]',
+ selector: '[md-tooltip], [mat-tooltip], [mdTooltip]',
host: {
'(longpress)': 'show()',
'(touchend)': 'hide(' + TOUCHEND_HIDE_DELAY + ')',
@@ -58,10 +58,15 @@ export class MdTooltip {
/** Allows the user to define the position of the tooltip relative to the parent element */
private _position: TooltipPosition = 'below';
- @Input('tooltip-position') get position(): TooltipPosition {
+ @Input('mdTooltipPosition') get position(): TooltipPosition {
return this._position;
}
+ /** @deprecated */
+ @Input('tooltip-position')
+ get _positionDeprecated(): TooltipPosition { return this._position; }
+ set _positionDeprecated(value: TooltipPosition) { this._position = value; }
+
set position(value: TooltipPosition) {
if (value !== this._position) {
this._position = value;
@@ -75,14 +80,14 @@ export class MdTooltip {
}
/** The default delay in ms before showing the tooltip after show is called */
- @Input('tooltipShowDelay') showDelay = 0;
+ @Input('mdTooltipShowDelay') showDelay = 0;
/** The default delay in ms before hiding the tooltip after hide is called */
- @Input('tooltipHideDelay') hideDelay = 0;
+ @Input('mdTooltipHideDelay') hideDelay = 0;
/** The message to be displayed in the tooltip */
private _message: string;
- @Input('md-tooltip') get message() {
+ @Input('mdTooltip') get message() {
return this._message;
}
set message(value: string) {
@@ -92,6 +97,11 @@ export class MdTooltip {
}
}
+ /** @deprecated */
+ @Input('md-tooltip')
+ get _deprecatedMessage(): string { return this.message; }
+ set _deprecatedMessage(v: string) { this.message = v; }
+
constructor(private _overlay: Overlay, private _elementRef: ElementRef,
private _viewContainerRef: ViewContainerRef, private _ngZone: NgZone,
@Optional() private _dir: Dir) {}