ion-textarea
textareaコンポーネントは複数行テキストの入力のためのコンポーネントです。ネイティブのtextarea要素がこのコンポーネントの内部に描画されます。ネイティブのtextareaを制御することによって、textareaコンポーネントのユーザ体験と対話性が向上します。
ネイティブのtextarea要素とは異なり、Ionicのtextareaは要素内部のコンテンツからその値を読み込むことをサポートしていません。textareaの値はvalue
属性で設定しなくてはなりません。
textareaコンポーネントはIonicのプロパティに加えてネイティブのtextareaの属性に対応します。
利用方法
<!-- 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 |
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. |
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 |
Attribute | clear-on-edit |
Type | boolean |
Default | false |
color | |
Description | The color to use from your application's color palette.
Default options are: |
Attribute | color |
Type | string | 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 |
debounce | |
Description | Set the amount of time, in milliseconds, to wait to trigger the |
Attribute | debounce |
Type | number |
Default | 0 |
disabled | |
Description | If |
Attribute | disabled |
Type | boolean |
Default | false |
enterkeyhint | |
Description | A hint to the browser for which enter key to display.
Possible values: |
Attribute | enterkeyhint |
Type | "done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined |
inputmode | |
Description | A hint to the browser for which keyboard to display.
Possible values: |
Attribute | inputmode |
Type | "decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined |
maxlength | |
Description | If the value of the type attribute is |
Attribute | maxlength |
Type | number | undefined |
minlength | |
Description | If the value of the type attribute is |
Attribute | minlength |
Type | number | undefined |
mode | |
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
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 | null | string | undefined |
readonly | |
Description | If |
Attribute | readonly |
Type | boolean |
Default | false |
required | |
Description | If |
Attribute | required |
Type | boolean |
Default | false |
rows | |
Description | The number of visible text lines for the control. |
Attribute | rows |
Type | number | undefined |
spellcheck | |
Description | If |
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 |
イベント
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 |
Signature | getInputElement() => Promise<HTMLTextAreaElement> |
setFocus | |
Description | Sets focus on the native |
Signature | setFocus() => Promise<void> |
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 |