Component Facets

To define your own facet, add an aura:attribute tag of type Aura.Component[] to your component. For example, let's create a new component called facetHeader.cmp.

Component source

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    <aura:attribute name="header" type="Aura.Component[]"/>
19
20    <div>
21        <span class="header">{!v.header}</span><br/>
22        <span class="body">{!v.body}</span>
23    </div>
24</aura:component>
25
26

This component has a header facet. Note how we position the output of the header using the v.header expression.

The component doesn't have any output when you access it directly as the header and body attributes aren't set. The following component, helloFacets.cmp, sets these attributes.

Component source

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    See how we set the header facet.<br/>
19
20    <auradocs:facetHeader>
21
22        Nice body!
23
24        <aura:set attribute="header">
25            Hello Header!
26        </aura:set>
27    </auradocs:facetHeader>
28
29</aura:component>
30
31

Note that aura:set sets the value of an attribute inherited from the super component, but you don’t need to use aura:set if you’re setting the value of v.body.