Lightning Aura Components Developer Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
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

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.

<aura:application extends="force:slds">
    <lightning:layout>
        <lightning:layoutItem padding="around-large">
            <h1 class="slds-text-heading_large">Sample App</h1>
        </lightning:layoutItem>
    </lightning:layout>
    <lightning:layout>
        <lightning:layoutItem padding="around-small">
            Sidebar
            <!-- Other component markup here -->
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small">
            Content
            <!-- Other component markup here -->
        </lightning:layoutItem>
    </lightning:layout>
    
</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.