To provide a DocDef, click DOCUMENTATION in the component sidebar of the Developer Console. The following example shows the DocDef for c:myComponent.
DocDef is supported for components and applications. Events and interfaces support inline descriptions only.
<aura:documentation> <aura:description> <p>An <code>c:myComponent</code> component represents an element that executes an action defined by a controller.</p> <!--More markup here, such as <pre> for code samples--> </aura:description> <aura:example name="myComponentExample" ref="c:myComponentExample" label="Using the c:myComponent Component"> <p>This example shows a simple setup of <code>myComponent</code>.</p> </aura:example> <aura:example name="mySecondExample" ref="c:mySecondExample" label="Customizing the c:myComponent Component"> <p>This example shows how you can customize <code>myComponent</code>.</p> </aura:example> </aura:documentation>
A documentation definition contains these tags.
Tag | Description |
---|---|
<aura:documentation> | The top-level definition of the DocDef |
<aura:description> | Describes the component using extensive HTML markup. To include code samples in the description, use the <pre> tag, which renders as a code block. Code entered in the <pre> tag must be escaped. For example, escape <aura:component> by entering <aura:component>. |
<aura:example> | References an example that demonstrates how the component is used. Supports
extensive HTML markup, which displays as text preceding the visual output and example
component source. The example is displayed as interactive output. Multiple examples
are supported and should be wrapped in individual <aura:example> tags.
|
Recall that the DocDef includes a reference to an example component. The example component is rendered as an interactive demo in the component reference documentation when it’s wired up using aura:example.
<aura:example name="myComponentExample" ref="c:myComponentExample" label="Using the c:myComponent Component">
The following is an example component that demonstrates how c:myComponent can be used.
<!--The c:myComponentExample example component--> <aura:component> <c:myComponent> <aura:set attribute=”myAttribute”>This sets the attribute on the c:myComponent component.</aura:set> <!--More markup that demonstrates the usage of c:myComponent--> </c:myComponent> </aura:component>
Some HTML tags are unsafe or unnecessary. The framework doesn’t support these tags in document definitions.
The SUPPORTED_HTML_TAGS key in this open-source Aura file lists the supported HTML tags. The SUPPORTED_ATTRS key lists the supported HTML tag attributes.
The linked file is in the master branch of the open-source Aura project. The master branch is our current development branch and is ahead of the current release of the Lightning Component framework. However, this file changes infrequently and is the best place to see if a tag is supported now or in the near future.
Inline descriptions provide a brief overview of what an element is about. HTML markup is not supported in inline descriptions. These tags support inline descriptions via the description attribute.
Tag | Example |
---|---|
<aura:component> | <aura:component description="Represents a button element"> |
<aura:attribute> | <aura:attribute name="label" type="String" description="The text to be displayed inside the button."/> |
<aura:event> | <aura:event type="COMPONENT" description="Indicates that a keyboard key has been pressed and released"/> |
<aura:interface> | <aura:interface description="A common interface for date components"/> |
<aura:registerEvent> | <aura:registerEvent name="keydown" type="ui:keydown" description="Indicates that a key is pressed"/> |
The documentation you create will be available at https://<myDomain>.lightning.force.com/auradocs/reference.app, where <myDomain> is the name of your custom Salesforce domain and in the Component Library (Beta) at https://<myDomain>.lightning.force.com/componentReference/suite.app where <myDomain> is the name of your custom Salesforce domain.