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

アプリケーションの UI の設計

アプリケーションの UI を設計するには、.app リソースにマークアップを挿入します。UI の各部分がコンポーネントに対応し、コンポーネントにはネストされたコンポーネントを含めることができます。高度なアプリケーションを作成するには、複数のコンポーネントを構成します。

アプリケーションのマークアップは <aura:application> タグで開始します。

スタンドアロンアプリケーションを作成すると、Lightning Out や Visualforce ページの Lightning コンポーネントなどを使用して、Salesforce for Android、Salesforce for iOS、Salesforce モバイル Web、Lightning Experience 外でコンポーネントをホストできます。<aura:application> タグについての詳細は、「aura:application」を参照してください。

メモ

sample.app ファイルを見てみましょう。<aura:application> タグで開始しています。

1<aura:application extends="force:slds">
2    <lightning:layout>
3        <lightning:layoutItem padding="around-large">
4            <h1 class="slds-text-heading_large">Sample App</h1>
5        </lightning:layoutItem>
6    </lightning:layout>
7    <lightning:layout>
8        <lightning:layoutItem padding="around-small">
9            Sidebar
10            <!-- Other component markup here -->
11        </lightning:layoutItem>
12        <lightning:layoutItem padding="around-small">
13            Content
14            <!-- Other component markup here -->
15        </lightning:layoutItem>
16    </lightning:layout>
17    
18</aura:application>

sample.app ファイルには HTML タグ (<h1> など) とコンポーネント (<lightning:layout> など) が含まれています。ここでは各コンポーネントの詳細な説明は省きますが、マークアップがいかに簡単かを確認してください。<lightning:layoutItem> コンポーネントには、他のコンポーネントまたは HTML マークアップを含めることができます。

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

アプリケーションの UI の設計

関連項目: