mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Kristiyan Kostadinov
49 lines
1.9 KiB
HTML
49 lines
1.9 KiB
HTML
<label [attr.for]="inputId" class="mat-checkbox-layout" #label>
|
|
<div class="mat-checkbox-inner-container"
|
|
[class.mat-checkbox-inner-container-no-side-margin]="!checkboxLabel.textContent || !checkboxLabel.textContent.trim()">
|
|
<input #input
|
|
class="mat-checkbox-input cdk-visually-hidden" type="checkbox"
|
|
[id]="inputId"
|
|
[required]="required"
|
|
[checked]="checked"
|
|
[attr.value]="value"
|
|
[disabled]="disabled"
|
|
[attr.name]="name"
|
|
[tabIndex]="tabIndex"
|
|
[indeterminate]="indeterminate"
|
|
[attr.aria-label]="ariaLabel || null"
|
|
[attr.aria-labelledby]="ariaLabelledby"
|
|
[attr.aria-checked]="_getAriaChecked()"
|
|
(change)="_onInteractionEvent($event)"
|
|
(click)="_onInputClick($event)">
|
|
<div matRipple class="mat-checkbox-ripple"
|
|
[matRippleTrigger]="label"
|
|
[matRippleDisabled]="_isRippleDisabled()"
|
|
[matRippleRadius]="20"
|
|
[matRippleCentered]="true"
|
|
[matRippleAnimation]="{enterDuration: 150}">
|
|
<div class="mat-ripple-element mat-checkbox-persistent-ripple"></div>
|
|
</div>
|
|
<div class="mat-checkbox-frame"></div>
|
|
<div class="mat-checkbox-background">
|
|
<svg version="1.1"
|
|
focusable="false"
|
|
class="mat-checkbox-checkmark"
|
|
viewBox="0 0 24 24"
|
|
xml:space="preserve">
|
|
<path class="mat-checkbox-checkmark-path"
|
|
fill="none"
|
|
stroke="white"
|
|
d="M4.1,12.7 9,17.6 20.3,6.3"/>
|
|
</svg>
|
|
<!-- Element for rendering the indeterminate state checkbox. -->
|
|
<div class="mat-checkbox-mixedmark"></div>
|
|
</div>
|
|
</div>
|
|
<span class="mat-checkbox-label" #checkboxLabel (cdkObserveContent)="_onLabelTextChange()">
|
|
<!-- Add an invisible span so JAWS can read the label -->
|
|
<span style="display:none"> </span>
|
|
<ng-content></ng-content>
|
|
</span>
|
|
</label>
|