Permalink
Browse files

feat(checkbox): add ux-checkbox

  • Loading branch information...
ZHollingshead committed Apr 12, 2017
1 parent 0aeba74 commit a417b46ce975feb634320eb155720bf96bea8e57
@@ -0,0 +1,11 @@
+styles.checkbox {
+ display: inline-flex;
+ align-items: center;
+}
+
+styles.checkbox>.box {
+ width: 20px;
+ height: 20px;
+ border: #5d5d5d solid 2px;
+ border-radius: 3px;
+}
@@ -0,0 +1,12 @@
+import { styles } from '../styles/decorators';
+
+@styles()
+export class UxCheckboxTheme {
+ public effect = 'ripple'; // ripple or none
+
+ public background: string;
+ public foreground: string;
+
+ public backgroundDisabled: string;
+ public foregroundDisabled: string;
+}
@@ -0,0 +1,10 @@
+<template styles.checkbox>
+ <require from="./ux-checkbox-theme"></require>
+
+ <div class="box">
+ </div>
+
+ <label>
+ <slot></slot>
+ </label>
+</template>
@@ -0,0 +1,34 @@
+import {customElement, bindable, ViewResources, View, processAttributes} from 'aurelia-templating';
+import {inject} from 'aurelia-dependency-injection';
+import {StyleEngine} from '../styles/style-engine';
+import {Themable} from '../styles/themable';
+import {processDesignAttributes} from '../designs/design-attributes';
+
+@inject(Element, ViewResources, StyleEngine)
+@customElement('ux-checkbox')
+@processAttributes(processDesignAttributes)
+export class UxButton implements Themable {
+ @bindable public type = null;
+ @bindable public size = null;
+ @bindable public effect = null;
+ @bindable public disabled = false;
+ @bindable public theme = null;
+
+ public view: View;
+
+ constructor(public element: Element, public resources: ViewResources, private styleEngine: StyleEngine) {}
+
+ public created(_: any, myView: View) {
+ this.view = myView;
+ }
+
+ public bind() {
+ if (this.theme) {
+ this.styleEngine.applyTheme(this, this.theme);
+ }
+ }
+
+ public themeChanged(newValue: any) {
+ this.styleEngine.applyTheme(this, newValue);
+ }
+}
View
@@ -13,6 +13,7 @@ export { UxFieldTheme } from './form/ux-field-theme';
export { UxChipInputTheme } from './chip-input/ux-chip-input-theme';
export { UxTagTheme } from './chip-input/ux-tag-theme';
export { UxChipTheme } from './chip-input/ux-chip-theme';
+export { UxCheckboxTheme } from './checkbox/ux-checkbox-theme';
export * from './styles/decorators';
@@ -30,7 +31,8 @@ export function configure(config: FrameworkConfiguration, callback?: (config: Au
'./form/ux-submit-attribute',
'./chip-input/ux-chip-input',
'./chip-input/ux-chip',
- './chip-input/ux-tag'
+ './chip-input/ux-tag',
+ './checkbox/ux-checkbox'
]);
const ux = config.container.get(AureliaUX) as AureliaUX;

0 comments on commit a417b46

Please sign in to comment.