Lightning Components Developer’s Guide
jNewer Version Available
Component Body
The <aura:component> tag can contain tags, such as <aura:attribute>, <aura:registerEvent>, <aura:handler>, <aura:set>, and so on. Any free markup that is not enclosed in one of the tags allowed in a component is assumed to be part of the body and is set in the body attribute.
The body attribute has type Aura.Component[]. It can be an array of one component, or an empty array, but it's always an array.
In a component, use “v” to access the collection of attributes. For example, {!v.body} outputs the body of the component.
Setting the Body Content
To set the body attribute in a component, add free markup within the <aura:component> tag. For example:
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18 <!--START BODY-->
19 <div>Body part</div>
20 <ui:button label="Push Me/>
21 <!--END BODY-->
22</aura:component>
23To set the value of an inherited attribute, use the <aura:set> tag. Setting the body content is equivalent to wrapping that free markup inside <aura:set attribute="body">. Since the body attribute has this special behavior, you can omit <aura:set attribute="body">.
The previous sample is a shortcut for this markup. We recommend the less verbose syntax in the previous sample.
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18 <aura:set attribute="body>
19 <!--START BODY-->
20 <div>Body part</div>
21 <ui:button label="Push Me/>
22 <!--END BODY-->
23 </aura:set>
24</aura:component>
25The same logic applies when you use any component that has a body attribute, not just <aura:component>. For example:
1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<ui:panel>
18 Hello world!
19</ui:panel>
20This is a shortcut for:
1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<ui:panel>
18 <aura:set attribute="body">
19 Hello World!
20 </aura:set>
21</ui:panel>
22Accessing the Component Body
To access a component body in JavaScript, use component.get("v.body").