angular-material-npfixed
Version:
The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M
97 lines (72 loc) • 2.16 kB
Markdown
content
checkbox
<h2> CSS Styles</h2>
The css decalaration of the `<md-checkbox>` component is:
<hljs lang="css">
md-checkbox {
margin: 8px;
cursor: pointer;
padding-left: 18px;
padding-right: 0;
line-height: 26px;
min-width: 18px;
min-height: 18px;
}
</hljs>
<br/>
<h3> Ink color</h3>
<p>In order to change the color when the checkbox is checked:</p>
<hljs lang="html">
<md-checkbox class="green">
Green Checkbox
</md-checkbox>
</hljs>
<hljs lang="css">
md-checkbox.md-checked.green .md-icon {
background-color: rgba(0, 255, 0, 0.87);
}
</hljs>
<br/>
<h3> Disabled</h3>
<p>In order to change the color when a disabled checkbox is checked:</p>
<br/>
<hljs lang="html">
<md-checkbox ng-disabled="true" class="red" ng-model="data.cb4" ng-init="data.cb4=true">
Checkbox: Disabled, Checked
</md-checkbox>
</hljs>
<hljs lang="css">
md-checkbox.md-checked[disabled].red .md-icon {
background-color: rgba(255, 0, 0, 0.26);
}
</hljs>
<br/>
<h3> Borders</h3>
<p>In order to add a custom border do the following:</p>
<br/><br/>
<hljs lang="html">
<div>
<md-checkbox ng-model="data.cb2" aria-label="Checkbox 2" ng-true-value="'yup'" ng-false-value="'nope'">
Default Border
</md-checkbox>
</div>
<div>
<md-checkbox ng-model="data.cb2" aria-label="Checkbox 2" ng-true-value="'yup'" class="dotted" ng-false-value="'nope'">
Custom Border
</md-checkbox>
</div>
</hljs>
<hljs lang="css">
md-checkbox.dotted .md-icon {
border-width: 1px;
border-style: dashed;
}
</hljs>
<br/>
<h3> Bi-Di </h3>
The mdCheckbox directive supports bi-directional specifiers in the `<html dir="rtl">` tag:
