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.

To learn more about the <aura:application> tag, see aura:application.

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

1<aura:application>
2    <div>
3      <header>
4          <h1>Sample App</h1>
5      </header>
6      <ui:block class="wrapper" aura:id="block">
7        <aura:set attribute="left">
8             <docsample:sidebar aura:id="sidebar" />
9        </aura:set>
10             <docsample:details aura:id="details" />
11      </ui:block>
12    </div>
13</aura:application>

The sample.app file contains HTML tags, such as <h1> and <div>, as well as components, such as <ui:block>. We won't go into the details for all the components here but note how simple the markup is. The <docsample:sidebar> and <docsample:details> components encapsulate the layout for the page.

For another sample app, see the expenseTracker.app resource created in Create a Standalone Lightning App.

Lightning Components Developer Guide

Designing App UI

See Also: