Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Creating Components
Component Markup
Component Namespace
Component Bundles
Component IDs
HTML in Components
CSS in Components
Component Attributes
Component Composition
Component Body
Component Facets
Best Practices for Conditional Markup
Component Versioning
Using Expressions
Using Labels
Localization
Providing Component Documentation
Working with UI Components
Supporting Accessibility
Using Components
Communicating with Events
Creating Apps
Debugging
Reference
PDF

Newer Version Available

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

Component Markup

Component resources contain markup and have a .cmp suffix. The markup can contain text or references to other components, and also declares metadata about the component.

Let's start with a simple "Hello, world!" example in a helloWorld.cmp component.

1<aura:component>
2    Hello, world!
3</aura:component>

This is about as simple as a component can get. The "Hello, world!" text is wrapped in the <aura:component> tags, which appear at the beginning and end of every component definition.

Components can contain most HTML tags so you can use markup, such as <div> and <span>. HTML5 tags are also supported.

1<aura:component>
2    <div class="container">
3        <!--Other HTML tags or components here-->
4    </div>
5</aura:component>

Case sensitivity should be respected as your markup interacts with JavaScript, CSS, and Apex.

Note

Use the Developer Console to create components.

aura:component has the following optional attributes.

Attribute Type Description
access String Indicates whether the component can be used outside of its own namespace. Possible values are public (default), and global.
controller String The server-side controller class for the component. The format is namespace.myController.
description String A description of the component.
extends Component The component to be extended, if applicable. For example, extends="ui:input".
extensible Boolean Set to true if the component can be extended. The default is false.
implements String A comma-separated list of interfaces that the component implements.
isTemplate Boolean Set to true if the component is a template. The default is false. A template must have isTemplate="true" set in its <aura:component> tag.
1<aura:component isTemplate="true" extends="aura:template">
template Component The template for this component. A template bootstraps loading of the framework and app. The default template is aura:template. You can customize the template by creating your own component that extends the default template. For example:

<aura:component extends="aura:template" ... >

aura:component also includes a body attribute defined in a <aura:attribute> tag. Attributes usually control the output or behavior of a component, but not the configuration information in system attributes.

Attribute Type Description
body Component[] The body of the component. In markup, this is everything in the body of the tag.