feat(material): first ng2 material design components
This commit is contained in:
Jeremy Elbourn
committed by
Yegor Jbanov
Yegor Jbanov
parent
ffe13078e5
commit
f149ae79c6
@ -0,0 +1,8 @@
|
||||
<style>@import "angular2_material/src/components/checkbox/checkbox.css";</style>
|
||||
|
||||
<div (^click)="toggle($event)">
|
||||
<div class="md-checkbox-container">
|
||||
<div class="md-checkbox-icon"></div>
|
||||
</div>
|
||||
<div class="md-checkbox-label"><content></content></div>
|
||||
</div>
|
||||
77
modules/angular2_material/src/components/checkbox/checkbox.js
vendored
Normal file
77
modules/angular2_material/src/components/checkbox/checkbox.js
vendored
Normal file
@ -0,0 +1,77 @@
|
||||
import {Component, View, Attribute, PropertySetter} from 'angular2/angular2';
|
||||
import {isPresent} from 'angular2/src/facade/lang';
|
||||
import {KeyCodes} from 'angular2_material/src/core/constants'
|
||||
|
||||
@Component({
|
||||
selector: 'md-checkbox',
|
||||
properties: {
|
||||
'checked': 'checked',
|
||||
'disabled': 'disabled'
|
||||
},
|
||||
hostListeners: {
|
||||
'keydown': 'onKeydown($event)'
|
||||
}
|
||||
})
|
||||
@View({
|
||||
templateUrl: 'angular2_material/src/components/checkbox/checkbox.html',
|
||||
directives: []
|
||||
})
|
||||
export class MdCheckbox {
|
||||
/** Whether this checkbox is checked. */
|
||||
checked_: boolean;
|
||||
|
||||
/** Setter for `aria-checked` attribute. */
|
||||
ariaCheckedSetter: Function;
|
||||
|
||||
/** Setter for `aria-disabled` attribute. */
|
||||
ariaDisabledSetter: Function;
|
||||
|
||||
constructor(
|
||||
@Attribute('tabindex') tabindex: string,
|
||||
@PropertySetter('tabindex') tabindexSetter: Function,
|
||||
@PropertySetter('attr.role') roleSetter: Function,
|
||||
@PropertySetter('attr.aria-checked') ariaCheckedSetter: Function,
|
||||
@PropertySetter('attr.aria-disabled') ariaDisabledSetter: Function) {
|
||||
this.ariaCheckedSetter = ariaCheckedSetter;
|
||||
this.ariaDisabledSetter = ariaDisabledSetter;
|
||||
|
||||
roleSetter('checkbox');
|
||||
this.checked = false;
|
||||
tabindexSetter(isPresent(tabindex) ? tabindex : '0');
|
||||
}
|
||||
|
||||
get checked() {
|
||||
return this.checked_;
|
||||
}
|
||||
|
||||
set checked(value) {
|
||||
this.checked_ = value;
|
||||
this.ariaCheckedSetter(value);
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this.disabled_;
|
||||
}
|
||||
|
||||
set disabled(value) {
|
||||
this.disabled_ = isPresent(value) && value !== false;
|
||||
this.ariaDisabledSetter(this.disabled_);
|
||||
}
|
||||
|
||||
onKeydown(event: KeyboardEvent) {
|
||||
if (event.keyCode == KeyCodes.SPACE) {
|
||||
event.preventDefault();
|
||||
this.toggle(event);
|
||||
}
|
||||
}
|
||||
|
||||
toggle(event) {
|
||||
if (this.disabled) {
|
||||
event.stopPropagation();
|
||||
return;
|
||||
}
|
||||
|
||||
this.checked = !this.checked;
|
||||
this.ariaCheckedSetter(this.checked);
|
||||
}
|
||||
}
|
||||
176
modules/angular2_material/src/components/checkbox/checkbox.scss
Normal file
176
modules/angular2_material/src/components/checkbox/checkbox.scss
Normal file
@ -0,0 +1,176 @@
|
||||
@import "../../core/style/variables";
|
||||
@import "../../core/style/shadows";
|
||||
|
||||
// TODO(jelbourn): This goes away.
|
||||
@import "../../core/style/default-theme";
|
||||
|
||||
$checkbox-width: 18px !default;
|
||||
$checkbox-height: $checkbox-width !default;
|
||||
|
||||
md-checkbox {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
margin: 15px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
|
||||
*, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&[aria-checked="true"] .md-checkbox-icon {
|
||||
border: none;
|
||||
}
|
||||
|
||||
// Checkbox is disabled.
|
||||
&[disabled] {
|
||||
cursor: no-drop;
|
||||
}
|
||||
|
||||
// Checkbox is focused.
|
||||
&:focus .md-checkbox-label:not(:empty) {
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
// Checkbox is checked.
|
||||
&[aria-checked="true"] .md-checkbox-icon:after {
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
display: table;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
border: 2px solid;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
|
||||
.md-checkbox-container {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
display: inline-block;
|
||||
width: $checkbox-width;
|
||||
height: $checkbox-height;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.md-ripple-container {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
left: -15px;
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
bottom: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox is not checked.
|
||||
.md-checkbox-icon {
|
||||
transition: 240ms;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $checkbox-width;
|
||||
height: $checkbox-height;
|
||||
border: 2px solid;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.md-checkbox-label {
|
||||
border: 1px dotted transparent;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
vertical-align: middle;
|
||||
white-space: normal;
|
||||
pointer-events: none;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
// THEME
|
||||
// TODO(jelbourn): ripple
|
||||
|
||||
md-checkbox {
|
||||
|
||||
.md-ripple {
|
||||
color: md-color($md-accent, 600);
|
||||
}
|
||||
&[aria-checked="true"] .md-ripple {
|
||||
color: md-color($md-background, 600);
|
||||
}
|
||||
|
||||
.md-checkbox-icon {
|
||||
border-color: md-color($md-foreground, icon);
|
||||
}
|
||||
&[aria-checked="true"] .md-checkbox-icon {
|
||||
background-color: md-color($md-accent, 0.87);
|
||||
}
|
||||
|
||||
&[aria-checked="true"] .md-checkbox-icon:after {
|
||||
border-color: md-color($md-background, 200);
|
||||
}
|
||||
|
||||
&:not([disabled]) {
|
||||
&.md-primary {
|
||||
.md-ripple {
|
||||
color: md-color($md-primary, 600);
|
||||
}
|
||||
&[aria-checked="true"] .md-ripple {
|
||||
color: md-color($md-background, 600);
|
||||
}
|
||||
|
||||
.md-checkbox-icon {
|
||||
border-color: md-color($md-foreground, icon);
|
||||
}
|
||||
&[aria-checked="true"] .md-checkbox-icon {
|
||||
background-color: md-color($md-primary, 0.87);
|
||||
}
|
||||
|
||||
&[aria-checked="true"] .md-checkbox-icon:after {
|
||||
border-color: md-color($md-background, 200);
|
||||
}
|
||||
}
|
||||
|
||||
&.md-warn {
|
||||
.md-ripple {
|
||||
color: md-color($md-warn, 600);
|
||||
}
|
||||
|
||||
.md-checkbox-icon {
|
||||
border-color: md-color($md-foreground, icon);
|
||||
}
|
||||
&[aria-checked="true"] .md-checkbox-icon {
|
||||
background-color: md-color($md-warn, 0.87);
|
||||
}
|
||||
|
||||
&[aria-checked="true"] .md-checkbox-icon:after {
|
||||
border-color: md-color($md-background, 200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
.md-checkbox-icon {
|
||||
border-color: md-color($md-foreground, disabled);
|
||||
}
|
||||
|
||||
&[aria-checked="true"] .md-checkbox-icon {
|
||||
background-color: md-color($md-foreground, disabled);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user