feat(md-select): add floating label, ref #243

aurelia-ui-toolkits · Sep 1, 2016 · 6aaa610 · 6aaa610
1 parent beb322c
commit 6aaa610
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 3 deletions.
diff --git a/src/colors/md-colors.html b/src/colors/md-colors.html
@@ -168,8 +168,8 @@
   /* text input aurelia-validation messages */
   .md-input-validation {
     left: 0;
-    color:#f44336;
-    font-size:0.8rem;
+    color: #f44336;
+    font-size: 0.8rem;
     transition: opacity .2s ease-out;
     margin-top: -4px;
     margin-bottom: 0;
@@ -230,7 +230,7 @@
     background: ${mdAccentColor};
   }
   md-range input[type="range"] + .thumb {
-    background-color: ${mdAccentColor}!important;
+    background-color: ${mdAccentColor} !important;
   }
 
   /* select */
@@ -278,5 +278,39 @@
   footer.page-footer {
     background-color: ${mdPrimaryColor};
   }
+
+  /* md-select label */
+  .select-wrapper input {
+      // make input fit in div
+      display: inline-block !important;
+      // fix validation border thickness
+      border-bottom: 1px solid #4CAF50;
+  }
+
+  .select-wrapper input.invalid {
+      border-bottom: 1px solid #F44336;
+  }
+
+  .select-wrapper + label {
+    color: ${mdAccentColor};
+      width: 100%;
+  }
+  /* position validation label */
+  .select-wrapper + label:after {
+      display: block;
+      content: "";
+      position: absolute;
+      top: 60px;
+      opacity: 0;
+      transition: .2s opacity ease-out, .2s color ease-out;
+      transform: translateY(0) !important;
+  }
+  /* set validation text */
+  .select-wrapper.invalid + label:after {
+      content: attr(data-error);
+      color: #F44336;
+      opacity: 1;
+  }
+
   </style>
 </template>
diff --git a/src/select/select.js b/src/select/select.js
@@ -9,6 +9,7 @@ import {fireEvent} from '../common/events';
 @customAttribute('md-select')
 export class MdSelect {
   @bindable() disabled = false;
+  @bindable() label = '';
   _suspendUpdate = false;
   subscriptions = [];
 
@@ -29,6 +30,17 @@ export class MdSelect {
     //   this.handleChangeFromNativeSelect();
     // });
     this.createMaterialSelect(false);
+
+    if (this.label) {
+      let wrapper = $(this.element).parent('.select-wrapper');
+      let div = $('<div class="input-field"></div>');
+      let va = this.element.attributes.getNamedItem('validate');
+      if (va) {
+        div.attr(va.name, va.label);
+      }
+      wrapper.wrap(div);
+      $(`<label>${this.label}</label>`).insertAfter(wrapper);
+    }
     $(this.element).on('change', this.handleChangeFromNativeSelect);
   }