Lightning Aura Components Developer Guide

What Is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service (Beta)
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 with Lightning Testing Service
Debugging
Performance
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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.