@@ -63,4 +63,26 @@
+
+
+ Email
+
+
+
+
+ Username
+
+
+
+
+ Password
+
+
+
+
+ Comments
+
+
+
+
diff --git a/ionic/components/text-input/text-input.ios.scss b/ionic/components/text-input/text-input.ios.scss
index 65a74e438c..f16eddfd79 100644
--- a/ionic/components/text-input/text-input.ios.scss
+++ b/ionic/components/text-input/text-input.ios.scss
@@ -4,7 +4,12 @@
// iOS Text Input
// --------------------------------------------------
-$text-input-ios-background-color: $list-ios-background-color !default;
+$text-input-ios-background-color: $list-ios-background-color !default;
+
+$text-input-ios-input-clear-icon-width: 30px !default;
+$text-input-ios-input-clear-icon-color: rgba(0, 0, 0, 0.5) !default;
+$text-input-ios-input-clear-icon-svg: "
" !default;
+$text-input-ios-input-clear-icon-size: 18px !default;
// Default Input
@@ -34,3 +39,23 @@ $text-input-ios-background-color: $list-ios-background-color !default;
margin-top: 8px;
margin-bottom: 8px;
}
+
+// Clear Input Icon
+// --------------------------------------------------
+
+ion-input[clearInput] {
+ position: relative;
+
+ .text-input {
+ padding-right: $text-input-ios-input-clear-icon-width;
+ }
+}
+
+.text-input-clear-icon {
+ width: $text-input-ios-input-clear-icon-width;
+
+ @include svg-background-image($text-input-ios-input-clear-icon-svg);
+ background-size: $text-input-ios-input-clear-icon-size;
+ right: ($item-ios-padding-right / 2);
+ bottom: 0;
+}
diff --git a/ionic/components/text-input/text-input.md.scss b/ionic/components/text-input/text-input.md.scss
index f090bfc143..99f96198a7 100644
--- a/ionic/components/text-input/text-input.md.scss
+++ b/ionic/components/text-input/text-input.md.scss
@@ -9,6 +9,12 @@ $text-input-md-highlight-color: map-get($colors-md, primary) !defaul
$text-input-md-hightlight-color-valid: map-get($colors-md, secondary) !default;
$text-input-md-hightlight-color-invalid: map-get($colors-md, danger) !default;
+$text-input-md-input-clear-icon-width: 30px !default;
+$text-input-md-input-clear-icon-color: #5B5B5B !default;
+$text-input-md-input-clear-icon-svg: "
" !default;
+$text-input-md-input-clear-icon-size: 22px !default;
+
+
// Default Input
// --------------------------------------------------
@@ -65,3 +71,24 @@ ion-input.ng-invalid.ng-touched:after {
margin-top: 8px;
margin-bottom: 8px;
}
+
+
+// Clear Input Icon
+// --------------------------------------------------
+
+ion-input[clearInput] {
+ position: relative;
+
+ .text-input {
+ padding-right: $text-input-md-input-clear-icon-width;
+ }
+}
+
+.text-input-clear-icon {
+ width: $text-input-md-input-clear-icon-width;
+
+ @include svg-background-image($text-input-md-input-clear-icon-svg);
+ background-size: $text-input-md-input-clear-icon-size;
+ right: ($item-md-padding-right / 2);
+ bottom: 2px;
+}
diff --git a/ionic/components/text-input/text-input.scss b/ionic/components/text-input/text-input.scss
index 4ddcc82d3e..23cc93ae54 100644
--- a/ionic/components/text-input/text-input.scss
+++ b/ionic/components/text-input/text-input.scss
@@ -61,3 +61,15 @@ input,
textarea {
@include placeholder();
}
+
+// Clear Input Icon
+// --------------------------------------------------
+
+.text-input-clear-icon {
+ margin: 0;
+ padding: 0;
+
+ background-repeat: no-repeat;
+ background-position: center;
+ position: absolute;
+}
diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts
index 78cc86fc9f..22cf6f3988 100644
--- a/ionic/components/text-input/text-input.ts
+++ b/ionic/components/text-input/text-input.ts
@@ -1,24 +1,30 @@
-import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer} from 'angular2/core';
+import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer, Input} from 'angular2/core';
import {NgIf} from 'angular2/common';
import {NavController} from '../nav/nav-controller';
import {Config} from '../../config/config';
import {Form} from '../../util/form';
-import {Label} from './label';
+import {Label} from '../label/label';
import {IonicApp} from '../app/app';
import {Content} from '../content/content';
import * as dom from '../../util/dom';
import {Platform} from '../../platform/platform';
+import {Button} from '../button/button';
/**
* @name Input
* @module ionic
* @description
- * `ionInput` is a generic wrapper for both inputs and textareas. You can give `ion-input` to tell it how to handle a chile `ion-label` component
- * @property [fixed-labels] - a persistant label that sits next the the input
- * @property [floating-labels] - a label that will float about the input if the input is empty of looses focus
- * @property [stacked-labels] - A stacked label will always appear on top of the input
+ *
+ * `ion-input` is a generic wrapper for both inputs and textareas. You can give `ion-input` attributes to tell it how to handle a child `ion-label` component.
+ *
+ * @property [fixed-label] - a persistant label that sits next the the input
+ * @property [floating-label] - a label that will float about the input if the input is empty of looses focus
+ * @property [stacked-label] - A stacked label will always appear on top of the input
+ * @property [inset] - The input will be inset
+ * @property [clearInput] - A clear icon will appear in the input which clears it
+ *
* @usage
* ```html
*
@@ -26,7 +32,7 @@ import {Platform} from '../../platform/platform';
*
*
*
- *
+ *
*
*
*
@@ -61,10 +67,15 @@ import {Platform} from '../../platform/platform';
'' +
'' +
'' +
+ '' +
'
',
- directives: [NgIf, forwardRef(() => InputScrollAssist)]
+ directives: [NgIf, forwardRef(() => InputScrollAssist), Button]
})
export class TextInput {
+ /**
+ * @private
+ */
+ @Input() clearInput: any;
constructor(
form: Form,
@@ -109,6 +120,13 @@ export class TextInput {
this.input && this.input.elementRef.nativeElement.classList.contains(className);
}
+ /**
+ * @private
+ */
+ clearTextInput() {
+ console.log("Should clear input");
+ }
+
/**
* @private
*/
@@ -130,6 +148,17 @@ export class TextInput {
this.label = label;
}
+ /**
+ * @private
+ * On Initialization check for attributes
+ */
+ ngOnInit() {
+ let clearInput = this.clearInput;
+ if (typeof clearInput === 'string') {
+ this.clearInput = (clearInput === '' || clearInput === 'true');
+ }
+ }
+
/**
* @private
*/