Lightning Aura Components Developer Guide

Introducing Aura Components
Quick Start
Creating Components
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
App Overview
Designing App UI
Creating App Templates
Using the AppCache
Distributing Applications and Components
Styling Apps
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components
Debugging
Performance
Reference
PDF

Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Designing App UI

Design your app's UI by including markup in the .app resource. Each part of your UI corresponds to a component, which can in turn contain nested components. Compose components to create a sophisticated app.

An app’s markup starts with the <aura:application> tag.

Creating a standalone app enables you to host your components outside of Salesforce for Android, iOS, and mobile web or Lightning Experience, such as with Lightning Out or Lightning components in Visualforce pages. To learn more about the <aura:application> tag, see aura:application.

Note

Let's look at a sample.app file, which starts with the <aura:application> tag.

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>

The sample.app file contains HTML tags, such as <h1>, as well as components, such as <lightning:layout>. We won't go into the details for all the components here but note how simple the markup is. The <lightning:layoutItem> component can contain other components or HTML markup.