ion-textarea
コンテンツ
textareaコンポーネントは複数行テキストの入力のためのコンポーネントです。ネイティブのtextarea要素がこのコンポーネントの内部に描画されます。ネイティブのtextareaを制御することによって、textareaコンポーネントのユーザ体験と対話性が向上します。
ネイティブのtextarea要素とは異なり、Ionicのtextareaは要素内部のコンテンツからその値を読み込むことをサポートしていません。textareaの値はvalue
属性で設定しなくてはなりません。
textareaコンポーネントはIonicのプロパティに加えて ネイティブのtextareaの属性 に対応します。
Interfaces
TextareaChangeEventDetail
interface TextareaChangeEventDetail {
value?: string | null;
}
TextareaCustomEvent
必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent
インターフェースの代わりにこのインターフェースを使用することが可能です。
interface TextareaCustomEvent extends CustomEvent {
detail: TextareaChangeEventDetail;
target: HTMLIonTextareaElement;
}
使い方
- Angular
- Javascript
- React
- Stencil
- Vue
<!-- Default textarea -->
<ion-textarea></ion-textarea>
<!-- Textarea in an item with a placeholder -->
<ion-item>
<ion-textarea placeholder="Enter more information here..."></ion-textarea>
</ion-item>
<!-- Textarea in an item with a floating label -->
<ion-item>
<ion-label position="floating">Description</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<!-- Disabled and readonly textarea in an item with a stacked label -->
<ion-item>
<ion-label position="stacked">Summary</ion-label>
<ion-textarea
disabled
readonly
value="Ionic enables developers to build performant, high-quality mobile apps.">
</ion-textarea>
</ion-item>
<!-- Textarea that clears the value on edit -->
<ion-item>
<ion-label>Comment</ion-label>
<ion-textarea clearOnEdit="true"></ion-textarea>
</ion-item>
<!-- Textarea with custom number of rows and cols -->
<ion-item>
<ion-label>Notes</ion-label>
<ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
</ion-item>
<!-- Default textarea -->
<ion-textarea></ion-textarea>
<!-- Textarea in an item with a placeholder -->
<ion-item>
<ion-textarea placeholder="Enter more information here..."></ion-textarea>
</ion-item>
<!-- Textarea in an item with a floating label -->
<ion-item>
<ion-label position="floating">Description</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<!-- Disabled and readonly textarea in an item with a stacked label -->
<ion-item>
<ion-label position="stacked">Summary</ion-label>
<ion-textarea
disabled
readonly
value="Ionic enables developers to build performant, high-quality mobile apps.">
</ion-textarea>
</ion-item>
<!-- Textarea that clears the value on edit -->
<ion-item>
<ion-label>Comment</ion-label>
<ion-textarea clear-on-edit="true"></ion-textarea>
</ion-item>
<!-- Textarea with custom number of rows and cols -->
<ion-item>
<ion-label>Notes</ion-label>
<ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
</ion-item>
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonTextarea, IonItem, IonLabel, IonItemDivider, IonList } from '@ionic/react';
export const TextAreaExamples: React.FC = () => {
const [text, setText] = useState<string>();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>TextArea Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonItemDivider>Default textarea</IonItemDivider>
<IonItem>
<IonTextarea value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
</IonItem>
<IonItemDivider>Textarea in an item with a placeholder</IonItemDivider>
<IonItem>
<IonTextarea placeholder="Enter more information here..." value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
</IonItem>
<IonItemDivider>Textarea in an item with a floating label</IonItemDivider>
<IonItem>
<IonLabel position="floating">Description</IonLabel>
<IonTextarea value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
</IonItem>
<IonItemDivider>Disabled and readonly textarea in an item with a stacked label</IonItemDivider>
<IonItem>
<IonLabel position="stacked">Summary</IonLabel>
<IonTextarea
disabled
readonly
value={text} onIonChange={e => setText(e.detail.value!)}>
</IonTextarea>
</IonItem>
<IonItemDivider>Textarea that clears the value on edit</IonItemDivider>
<IonItem>
<IonLabel>Comment</IonLabel>
<IonTextarea clearOnEdit={true} value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
</IonItem>
<IonItemDivider>Textarea with custom number of rows and cols</IonItemDivider>
<IonItem>
<IonLabel>Notes</IonLabel>
<IonTextarea rows={6} cols={20} placeholder="Enter any notes here..." value={text} onIonChange={e => setText(e.detail.value!)}></IonTextarea>
</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
import { Component, h } from '@stencil/core';
@Component({
tag: 'textarea-example',
styleUrl: 'textarea-example.css'
})
export class TextareaExample {
render() {
return [
// Default textarea
<ion-textarea></ion-textarea>,
// Textarea in an item with a placeholder
<ion-item>
<ion-textarea placeholder="Enter more information here..."></ion-textarea>
</ion-item>,
// Textarea in an item with a floating label
<ion-item>
<ion-label position="floating">Description</ion-label>
<ion-textarea></ion-textarea>
</ion-item>,
// Disabled and readonly textarea in an item with a stacked label
<ion-item>
<ion-label position="stacked">Summary</ion-label>
<ion-textarea
disabled
readonly
value="Ionic enables developers to build performant, high-quality mobile apps.">
</ion-textarea>
</ion-item>,
// Textarea that clears the value on edit
<ion-item>
<ion-label>Comment</ion-label>
<ion-textarea clearOnEdit={true}></ion-textarea>
</ion-item>,
// Textarea with custom number of rows and cols
<ion-item>
<ion-label>Notes</ion-label>
<ion-textarea rows={6} cols={20} placeholder="Enter any notes here..."></ion-textarea>
</ion-item>
];
}
}
<template>
<!-- Default textarea -->
<ion-textarea></ion-textarea>
<!-- Textarea in an item with a placeholder -->
<ion-item>
<ion-textarea placeholder="Enter more information here..."></ion-textarea>
</ion-item>
<!-- Textarea in an item with a floating label -->
<ion-item>
<ion-label position="floating">Description</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<!-- Disabled and readonly textarea in an item with a stacked label -->
<ion-item>
<ion-label position="stacked">Summary</ion-label>
<ion-textarea
disabled
readonly
value="Ionic enables developers to build performant, high-quality mobile apps.">
</ion-textarea>
</ion-item>
<!-- Textarea that clears the value on edit -->
<ion-item>
<ion-label>Comment</ion-label>
<ion-textarea clear-on-edit="true"></ion-textarea>
</ion-item>
<!-- Textarea with custom number of rows and cols -->
<ion-item>
<ion-label>Notes</ion-label>
<ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
</ion-item>
</template>
<script>
import { IonItem, IonLabel, IonTextarea } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonItem, IonLabel, IonTextarea }
});
</script>
プロパティ
autoGrow
Description | If true , the textarea container will grow and shrink based on the contents of the textarea. |
Attribute | auto-grow |
Type | boolean |
Default | false |
autocapitalize
Description | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: "off" , "none" , "on" , "sentences" , "words" , "characters" . |
Attribute | autocapitalize |
Type | string |
Default | 'none' |
autofocus
Description | This Boolean attribute lets you specify that a form control should have input focus when the page loads. |
Attribute | autofocus |
Type | boolean |
Default | false |
clearOnEdit
Description | If true , the value will be cleared after focus upon edit. Defaults to true when type is "password" , false for all other types. |
Attribute | clear-on-edit |
Type | boolean |
Default | false |
color
Description | 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. |
Attribute | color |
Type | "danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined |
Default | undefined |
cols
Description | The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. |
Attribute | cols |
Type | number | undefined |
Default | undefined |
debounce
Description | Set the amount of time, in milliseconds, to wait to trigger the ionChange event after each keystroke. This also impacts form bindings such as ngModel or v-model . |
Attribute | debounce |
Type | number |
Default | 0 |
disabled
Description | If true , the user cannot interact with the textarea. |
Attribute | disabled |
Type | boolean |
Default | false |
enterkeyhint
Description | A hint to the browser for which enter key to display. Possible values: "enter" , "done" , "go" , "next" , "previous" , "search" , and "send" . |
Attribute | enterkeyhint |
Type | "done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined |
Default | undefined |
inputmode
Description | A hint to the browser for which keyboard to display. Possible values: "none" , "text" , "tel" , "url" , "email" , "numeric" , "decimal" , and "search" . |
Attribute | inputmode |
Type | "decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined |
Default | undefined |
maxlength
Description | If the value of the type attribute is text , email , search , password , tel , or url , this attribute specifies the maximum number of characters that the user can enter. |
Attribute | maxlength |
Type | number | undefined |
Default | undefined |
minlength
Description | 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. |
Attribute | minlength |
Type | number | undefined |
Default | undefined |
mode
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
Default | undefined |
name
Description | The name of the control, which is submitted with the form data. |
Attribute | name |
Type | string |
Default | this.inputId |
placeholder
Description | Instructional text that shows before the input has a value. |
Attribute | placeholder |
Type | string | undefined |
Default | undefined |
readonly
Description | If true , the user cannot modify the value. |
Attribute | readonly |
Type | boolean |
Default | false |
required
Description | If true , the user must fill in a value before submitting a form. |
Attribute | required |
Type | boolean |
Default | false |
rows
Description | The number of visible text lines for the control. |
Attribute | rows |
Type | number | undefined |
Default | undefined |
spellcheck
Description | If true , the element will have its spelling and grammar checked. |
Attribute | spellcheck |
Type | boolean |
Default | false |
value
Description | The value of the textarea. |
Attribute | value |
Type | null | string | undefined |
Default | '' |
wrap
Description | Indicates how the control wraps text. |
Attribute | wrap |
Type | "hard" | "off" | "soft" | undefined |
Default | undefined |
イベント
Name | Description |
---|---|
ionBlur | Emitted when the input loses focus. |
ionChange | Emitted when the input value has changed. |
ionFocus | Emitted when the input has focus. |
ionInput | Emitted when a keyboard input occurred. |
メソッド
getInputElement
Description | Returns the native <textarea> element used under the hood. |
Signature | getInputElement() => Promise<HTMLTextAreaElement> |
setFocus
Description | Sets focus on the native textarea in ion-textarea . Use this method instead of the global textarea.focus() . |
Signature | setFocus() => Promise<void> |
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
Name | Description |
---|---|
--background | Background of the textarea |
--border-radius | Border radius of the textarea |
--color | Color of the text |
--padding-bottom | Bottom padding of the textarea |
--padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea |
--padding-top | Top padding of the textarea |
--placeholder-color | Color of the placeholder text |
--placeholder-font-style | Style of the placeholder text |
--placeholder-font-weight | Weight of the placeholder text |
--placeholder-opacity | Opacity of the placeholder text |
Slots
No slots available for this component.