Lightning Aura Components Developer Guide
jNote: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.
Component Facets
To define your own facet, add an aura:attribute tag of type Aura.Component[], which is an array of components, to your component. For example, let's create a component called facetHeader.cmp.
1<!--c:facetHeader-->
2<aura:component>
3 <aura:attribute name="header" type="Aura.Component[]"/>
4
5 <div>
6 <span class="headerClass">{!v.header}</span><br/>
7 <span class="bodyClass">{!v.body}</span>
8 </div>
9</aura:component>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. Let’s create another component, helloFacets.cmp, that sets these attributes.
1<!--c:helloFacets-->
2<aura:component>
3 See how we set the header facet.<br/>
4
5 <c:facetHeader>
6
7 This is the component body for facetHeader.
8
9 <aura:set attribute="header">
10 Hello Header!
11 </aura:set>
12 </c:facetHeader>
13
14</aura:component>The aura:set tag sets the value of the header attribute of facetHeader.cmp.
The body attribute is special. You don’t need to use aura:set if you’re setting the body attribute. Any free markup that’s 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.
If you use c:helloFacets in an app, the output is:
1See how we set the header facet.
2Hello Header!
3This is the component body for facetHeader.