feat(select): add placeholder as an input for select

closes #6862
ionic-team · Jun 15, 2016 · 461ba11 · 461ba11
1 parent ea450d4
commit 461ba11
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 2 deletions.
diff --git a/src/components/select/select.ios.scss b/src/components/select/select.ios.scss
@@ -10,12 +10,17 @@ $select-ios-padding-bottom:      $item-ios-padding-bottom !default;
 $select-ios-padding-left:        $item-ios-padding-left !default;
 
 $select-ios-icon-color:          #999 !default;
+$select-ios-placeholder-color:   $select-ios-icon-color !default;
 
 
 ion-select {
   padding: $select-ios-padding-top $select-ios-padding-right  $select-ios-padding-bottom $select-ios-padding-left;
 }
 
+.select-placeholder {
+  color: $select-ios-placeholder-color;
+}
+
 .select-icon {
   position: relative;
 

diff --git a/src/components/select/select.md.scss b/src/components/select/select.md.scss
@@ -10,12 +10,17 @@ $select-md-padding-bottom:      $item-md-padding-bottom !default;
 $select-md-padding-left:        $item-md-padding-left !default;
 
 $select-md-icon-color:          #999 !default;
+$select-md-placeholder-color:   $select-md-icon-color !default;
 
 
 ion-select {
   padding: $select-md-padding-top $select-md-padding-right $select-md-padding-bottom $select-md-padding-left;
 }
 
+.select-placeholder {
+  color: $select-md-placeholder-color;
+}
+
 .item-select ion-label {
   margin-left: 0;
 }

diff --git a/src/components/select/select.ts b/src/components/select/select.ts
@@ -116,7 +116,8 @@ const SELECT_VALUE_ACCESSOR = new Provider(
 @Component({
   selector: 'ion-select',
   template:
-    '<div class="select-text">{{_text}}</div>' +
+    '<div *ngIf="!_text" class="select-placeholder select-text">{{placeholder}}</div>' +
+    '<div *ngIf="_text" class="select-text">{{_text}}</div>' +
     '<div class="select-icon">' +
       '<div class="select-icon-inner"></div>' +
     '</div>' +
@@ -159,6 +160,11 @@ export class Select {
    */
   @Input() okText: string = 'OK';
 
+  /**
+   * @input {string} The text to display when the select is empty.
+   */
+  @Input() placeholder: string;
+
   /**
    * @input {any} Any addition options that the alert interface can take.
    * See the [Alert API docs](../../alert/Alert) for the create options.

diff --git a/src/components/select/select.wp.scss b/src/components/select/select.wp.scss
@@ -17,7 +17,9 @@ $select-wp-border-color:        $input-wp-border-color !default;
 
 $select-wp-icon-width:          18px !default;
 $select-wp-icon-arrow-width:    2px !default;
+
 $select-wp-icon-color:          $select-wp-border-color !default;
+$select-wp-placeholder-color:   $select-wp-icon-color !default;
 
 
 ion-select {
@@ -32,6 +34,10 @@ ion-select {
   line-height: 3rem;
 }
 
+.select-placeholder {
+  color: $select-wp-placeholder-color;
+}
+
 .item-select ion-label {
   margin-left: 0;
 }

diff --git a/src/components/select/test/single-value/main.html b/src/components/select/test/single-value/main.html
@@ -49,7 +49,7 @@
 
   <ion-item>
     <ion-label>Music</ion-label>
-    <ion-select [(ngModel)]="music" [alertOptions]="musicAlertOpts">
+    <ion-select [(ngModel)]="music" [alertOptions]="musicAlertOpts" placeholder="Select Music">
       <ion-option>Alice in Chains</ion-option>
       <ion-option>Green Day</ion-option>
       <ion-option>Nirvana</ion-option>