File tree Expand file tree Collapse file tree 5 files changed +20
-35
lines changed
material-examples/checkbox-configurable Expand file tree Collapse file tree 5 files changed +20
-35
lines changed Original file line number Diff line number Diff line change @@ -7,7 +7,7 @@ <h1>mat-checkbox: Basic Example</h1>
7
7
(change) ="isIndeterminate = false "
8
8
[indeterminate] ="isIndeterminate "
9
9
[disabled] ="isDisabled "
10
- [align ] ="alignment ">
10
+ [labelPosition ] ="labelPosition ">
11
11
Do you want to < em > foobar</ em > the < em > bazquux</ em > ?
12
12
13
13
</ mat-checkbox > - < strong > {{printResult()}}</ strong >
@@ -24,23 +24,23 @@ <h1>mat-checkbox: Basic Example</h1>
24
24
< label for ="color-toggle "> Toggle Color</ label >
25
25
</ div >
26
26
< div >
27
- < p > Alignment :</ p >
27
+ < p > Label position :</ p >
28
28
< div >
29
- < input #start type ="radio "
30
- value ="start "
31
- id ="align-start "
32
- name ="alignment "
33
- (click) ="alignment = start .value "
29
+ < input #after type ="radio "
30
+ value ="after "
31
+ id ="align-after "
32
+ name ="labelPosition "
33
+ (click) ="labelPosition = after .value "
34
34
checked >
35
- < label for ="align-start " > Start </ label >
35
+ < label for ="align-after " > After </ label >
36
36
</ div >
37
37
< div >
38
- < input #end type ="radio "
39
- value ="end "
40
- id ="align-end "
41
- name ="alignment "
42
- (click) ="alignment = end .value ">
43
- < label for ="align-end " > End </ label >
38
+ < input #before type ="radio "
39
+ value ="before "
40
+ id ="align-before "
41
+ name ="labelPosition "
42
+ (click) ="labelPosition = before .value ">
43
+ < label for ="align-before " > Before </ label >
44
44
</ div >
45
45
</ div >
46
46
Original file line number Diff line number Diff line change @@ -79,7 +79,7 @@ export class CheckboxDemo {
79
79
isIndeterminate : boolean = false ;
80
80
isChecked : boolean = false ;
81
81
isDisabled : boolean = false ;
82
- alignment : string = 'start ' ;
82
+ labelPosition : string = 'after ' ;
83
83
useAlternativeColor : boolean = false ;
84
84
85
85
printResult ( ) {
Original file line number Diff line number Diff line change @@ -142,21 +142,6 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
142
142
set required ( value : boolean ) { this . _required = coerceBooleanProperty ( value ) ; }
143
143
private _required : boolean ;
144
144
145
- /**
146
- * Whether or not the checkbox should appear before or after the label.
147
- * @deprecated
148
- * @deletion -target 6.0.0
149
- */
150
- @Input ( )
151
- get align ( ) : 'start' | 'end' {
152
- // align refers to the checkbox relative to the label, while labelPosition refers to the
153
- // label relative to the checkbox. As such, they are inverted.
154
- return this . labelPosition == 'after' ? 'start' : 'end' ;
155
- }
156
- set align ( value : 'start' | 'end' ) {
157
- this . labelPosition = ( value == 'start' ) ? 'after' : 'before' ;
158
- }
159
-
160
145
/** Whether the label should appear after or before the checkbox. Defaults to 'after' */
161
146
@Input ( ) labelPosition : 'before' | 'after' = 'after' ;
162
147
Original file line number Diff line number Diff line change @@ -9,9 +9,9 @@ <h2 class="example-h2">Checkbox configuration</h2>
9
9
10
10
< section class ="example-section ">
11
11
< label class ="example-margin "> Align:</ label >
12
- < mat-radio-group [(ngModel)] ="align ">
13
- < mat-radio-button class ="example-margin " value ="start " > Start </ mat-radio-button >
14
- < mat-radio-button class ="example-margin " value ="end " > End </ mat-radio-button >
12
+ < mat-radio-group [(ngModel)] ="labelPosition ">
13
+ < mat-radio-button class ="example-margin " value ="after " > After </ mat-radio-button >
14
+ < mat-radio-button class ="example-margin " value ="before " > Before </ mat-radio-button >
15
15
</ mat-radio-group >
16
16
</ section >
17
17
@@ -30,7 +30,7 @@ <h2 class="example-h2">Result</h2>
30
30
class ="example-margin "
31
31
[(ngModel)] ="checked "
32
32
[(indeterminate)] ="indeterminate "
33
- [align ] ="align "
33
+ [labelPosition ] ="labelPosition "
34
34
[disabled] ="disabled ">
35
35
I'm a checkbox
36
36
</ mat-checkbox >
Original file line number Diff line number Diff line change @@ -11,6 +11,6 @@ import {Component} from '@angular/core';
11
11
export class CheckboxConfigurableExample {
12
12
checked = false ;
13
13
indeterminate = false ;
14
- align = 'start ' ;
14
+ labelPosition = 'after ' ;
15
15
disabled = false ;
16
16
}
You can’t perform that action at this time.
0 commit comments