この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

Lightning コンポーネント開発者ガイド

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

テキスト項目

テキスト項目には、英数字と特殊文字を含めることができます。テキスト項目は、placeholder、size、共通のキーワードイベントとマウスイベントなど、ui:inputText および ui:input の機能とイベントを継承します。このような項目コンポーネントから出力を表示する場合は、それぞれの ui:output コンポーネントを使用します。たとえば、ui:inputPhone コンポーネントの出力を表示するには、ui:outputPhone を使用します。

テキスト項目は、次のコンポーネントで表されます。

データ型 説明 関連コンポーネント
メール メールアドレスを入力するための入力項目。 ui:inputEmail

ui:outputEmail
電話 電話番号を入力するための入力項目。 ui:inputPhone

ui:outputPhone
テキスト 1 行のテキストを入力するための入力項目。 ui:inputText

ui:outputText

テキスト項目の使用

次に、メール項目の基本設定を示します。

1swfobject.registerObject("clippy.codeblock-0", "9");<ui:inputEmail aura:id="email" label="Email" placeholder="abc@email.com"/>

この例の結果、次の HTML になります。

1<div class="uiInput uiInputText uiInputEmail">
2  <label class="uiLabel-left uiLabel">
3    <span>Email</span>
4  </label>
5<input placeholder="abc@email.com" type="email" class="uiInput uiInputText uiInputEmail">
6</div>

テキスト項目のスタイル設定

テキスト項目および出力の外観のスタイルを設定できます。コンポーネントの CSS ファイルで、対応するクラスセレクタを追加します。

次のクラスセレクタは、テキストの文字列表示のスタイルを指定します。たとえば、ui:inputPhone コンポーネントのスタイルを設定するには、.THIS .uiInputPhone を使用します。

1swfobject.registerObject("clippy.codeblock-2", "9");.THIS.uiInputEmail { //CSS declaration }
2.THIS.uiInputPhone { //CSS declaration }
3.THIS.uiInputText { //CSS declaration }
4

次の例は、myStyle セレクタを使用して ui:inputText コンポーネントにスタイルを設定します。

1swfobject.registerObject("clippy.codeblock-3", "9");<!-- 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}