javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(input): add color support for ion-input

Browse Source 
fixes #14864
This commit is contained in:
Manu Mtz.-Almeida
2018-07-28 16:47:56 +02:00
parent 4f9cbfe73c
commit f676f98628
9 changed files with 144 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
core/src/components/textarea/readme.md
View File

@ -41,6 +41,15 @@ boolean
If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
#### color
string
The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](/docs/theming/basics).
#### cols
number
@ -76,6 +85,14 @@ number
If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
#### name
string
@ -162,6 +179,15 @@ boolean
If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
#### color
string
The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information on colors, see [theming](/docs/theming/basics).
#### cols
number
@ -197,6 +223,14 @@ number
If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
#### mode
string
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
#### name
string

10
core/src/components/textarea/textarea.scss
View File

@ -19,6 +19,10 @@
box-sizing: border-box;
}
:host(.ion-color) {
color: #{current-color(base)};
}
// Textarea Within An Item
// --------------------------------------------------
@ -31,6 +35,7 @@
// --------------------------------------------------
.native-textarea {
@include text-inherit();
@include border-radius(var(--border-radius));
@include placeholder(var(--placeholder-color));
@include margin(0);
@ -47,11 +52,6 @@
background: transparent;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
box-sizing: border-box;
resize: none;
appearance: none;

16
core/src/components/textarea/textarea.tsx
View File

@ -17,9 +17,6 @@ export class Textarea implements TextareaComponent {
private inputEl?: HTMLTextAreaElement;
private inputId = `ion-input-${textareaIds++}`;
mode!: Mode;
color?: Color;
didBlurAfterEdit = false;
@Element() el!: HTMLElement;
@ -51,6 +48,19 @@ export class Textarea implements TextareaComponent {
*/
@Event() ionFocus!: EventEmitter<void>;
/**
* The color to use from your application's color palette.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information on colors, see [theming](/docs/theming/basics).
*/
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
/**
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`.
*/