Stripe Apps の TextArea コンポーネント
TextArea を使用して、複数行テキストの入力フィールドを作成します。
TextArea
コンポーネントをアプリに追加するには、以下のようにします。
import {TextArea} from '@stripe/ui-extension-sdk/ui';
<TextArea label="Description" placeholder="Acme Inc was founded in…" defaultValue="Stripe Apps lets you embed custom…" onChange={(e) => { console.log(e.target.value); }} />
TextArea プロパティ
プロパティー | タイプ |
---|---|
| オプション
オートコンプリート動作の 1 つを指定します。 |
| オプション
|
| オプション
|
| オプション
関連タイプ: CSS。 |
| オプション
ユーザーが変更できる初期値を指定します。 |
| オプション
コントロールのラベルの横にレンダリングされる説明テキスト。 |
| オプション
要素を無効化するかどうかを設定します。選択できなくなります。 |
| オプション
コントロールの下に表示されるエラーテキスト。 |
| オプション
この入力が属する |
| オプション
指定した要素を視覚的に非表示にします。非表示の要素は引き続き存在しており、スクリーンリーダーに表示されます。 |
| オプション
要素が無効な状態であるかどうかを設定します。これは、表示専用のプロパティであり、フォーム送信を妨げるものではありません。 |
| オプション
コントロールを説明するテキスト。表示され、クリック可能になります。 |
| オプション
テキストの最大長を指定します。 |
| オプション
テキストの最小長を指定します。 |
| オプション
フォームと共に送信されるこの入力の名前を指定します。 |
| オプション
制御入力に必須です。入力の値をユーザーが変更するとすぐに発生します (たとえば、キーストロークのたびに起動されます)。ブラウザーの入力イベントのように動作します。 |
| オプション
キーが押されると起動します。 |
| オプション
キーを離すと起動します。 |
| オプション
入力値が空の場合は淡色で表示されます。 |
| オプション
|
| オプション
|
| オプション
|
| オプション
|
| オプション
コンポーネントのサイズ。 |
| オプション
|
| オプション
Tab キーのデフォルト動作を上書きします。 |
| オプション
入力のテキストを制御します。このプロパティを渡すときには、渡された値を更新する |
| オプション
|
| オプション非推奨
|
CSS
プロパティー | タイプ |
---|---|
| オプション
コンポーネントの幅。詳細については、サイズ指定をご覧ください。 |
無効
エレメントで invalid
プロパティを設定することにより、TextArea
に無効のマークを付けることができます。これは純粋に視覚的なものです。デフォルトは false
です。
<TextArea label="Favorite word" defaultValue="Stripe Apps lets you embed custom…" invalid />
サイズ変更可能
デフォルトでは、TextArea
は垂直方向のサイズ変更が可能です。この設定は通常、スペースを広げる必要がある場合に向いています。エレメントのサイズを変更できないようにする場合は、resizeable
を false
に設定します。
<TextArea label="Resizable bio" defaultValue="Stripe Apps lets you embed custom…" /> <TextArea label="Unresizable bio" resizeable={false} defaultValue="Stripe Apps lets you embed custom…" />
サイズ
size
を変更すると、デフォルト値より少し大きい、または少し小さいサイズを選択できます。一般に、同一のフォーム内で異なるサイズを組み合わせることはお勧めしません。デフォルト値は medium
です。
<TextArea label="Description (large)" size="large" defaultValue="Stripe Apps lets you embed custom…" /> <TextArea label="Description (medium, default)" size="medium" defaultValue="Stripe Apps lets you embed custom…" /> <TextArea label="Description (small)" size="small" defaultValue="Stripe Apps lets you embed custom…" />
無効と読み取り専用
フィールドに disabled
(無効) のマークを付けることができます。これにより、そのフィールドが使われなくなり、デザインが変わります。無効にすると、フォームの送信時にそのフォームエレメントのデータが送信されなくなります。
フィールドを readOnly
(読み取り専用) にすることもできます。読み取り専用の場合、エレメント内のデータは送信されますが、ユーザーはそのデータを変更できません。
<TextArea label="Disabled" defaultValue="Stripe Apps lets you embed custom…" disabled /> <TextArea label="Readonly" defaultValue="Stripe Apps lets you embed custom…" readOnly />
行
TextArea
の高さは、従来のピクセル単位の高さではなく、通常の <TextArea />
のように行数で制御されます。こうすると、行のピクセル値ではなく、フォントサイズの倍数に基づいて、エレメント自体のサイズを設定できます。これにより、デフォルトでテキストの一部が隠れることがなくなります。
TextArea
コンポーネントの縦方向の高さは、設定するサイズ値によっても変わります。入力範囲のテキストの行の高さが変わるためです。
<TextArea label="Description (3 rows, default)" defaultValue="Stripe Apps lets you embed custom…" /> <TextArea label="Description (6 rows)" rows={6} defaultValue="Stripe Apps lets you embed custom…" />
ステータス管理
TextArea
コンポーネントを非制御の入力として使用します。
<TextArea onChange={(e) => { console.log(e); }} label="About your business" placeholder="Our business is…" />
幅
css
プロパティと使用可能な値を使用して、TexaArea
コンポーネントの幅を設定します。
<TextArea label="App feedback" defaultValue="Stripe Apps lets you embed custom…" css={{width: 'fill'}} />