Lightning コンポーネント開発者ガイド
jテキスト項目
テキスト項目には、英数字と特殊文字を含めることができます。共通のキーボードイベントとマウスイベントを使用できます。このような項目コンポーネントから出力を表示する場合は、それぞれの ui:output コンポーネントを使用します。たとえば、ui:inputPhone コンポーネントの出力を表示するには、ui:outputPhone を使用します。
テキスト項目は、次のコンポーネントで表されます。
| 型 | 関連コンポーネント | 説明 |
|---|---|---|
| メール | ui:inputEmail | メールアドレスを入力するための入力項目 |
| ui:outputEmail | クリック可能なメールアドレスを表示します | |
| パスワード | ui:inputSecret | 秘密のテキストを入力するための入力項目 |
| 電話番号 | ui:inputPhone | 電話番号を入力するための入力項目 |
| ui:outputPhone | クリック可能な電話番号を表示します | |
| リッチテキスト | ui:inputRichText | リッチテキストを入力するための入力項目 |
|
ui:outputRichText |
リッチテキストを表示します | |
| テキスト | ui:inputText | 1 行のテキストを入力するための入力項目 |
| ui:outputText | テキストを表示します | |
| テキストエリア | ui:inputTextArea | 複数行のテキストを入力するための入力項目 |
| ui:outputTextArea | 参照のみのテキストエリアを表示します | |
| URL | ui:inputURL | URL を入力するための入力項目 |
| ui:outputURL | クリック可能な URL を表示します |
テキスト項目の使用
通常、テキスト項目はフォームで使用されます。たとえば、次の例はメール項目の基本設定です。
1<ui:inputEmail aura:id="email" label="Email" placeholder="abc@email.com"/>この例の結果、次の HTML になります。
1<div class="uiInput uiInputEmail uiInput--default uiInput--input">
2 <label class="uiLabel-left form-element__label uiLabel">
3 <span>Email</span>
4 </label>
5 <input placeholder="abc@email.com" type="email" class="input">
6</div>項目値のバインド
{!v.myAttribute.Name} または {!v.myAttribute.namespace__MyField__c} などの式を使用し、Apex コントローラで入力値を保存することで、オブジェクトの項目に項目値をバインドできます。「スタンドアロン Lightning アプリケーションを作成する」の例を参照してください。
テキスト項目のスタイル設定
テキスト項目および出力の外観のスタイルを設定できます。コンポーネントの CSS ファイルで、対応するクラスセレクタを追加します。
たとえば、ui:inputPhone コンポーネントのスタイルを設定するには、.THIS .uiInputPhone を使用するか、最上位要素の場合は .THIS.uiInputPhone を使用します。
次の例は、myStyle セレクタを使用して ui:inputText コンポーネントにスタイルを設定します。
1<!-- Component markup-->
2<ui:inputText class="myStyle" label="Name"/>
3
4/* CSS */
5.THIS .myStyle {
6 border: 1px solid #dce4ec;
7 border-radius: 4px;
8}