Content Layout system for the content area within the Page component. It divides up the content area into combinations like navigation+content, content+sidebar, etc. Note this component can only be used once per document, within the #content element; and it cannot be nested. If you need generic layouts further down the DOM, use group+item.
| API status: | general |
|---|---|
| Included in AUI core? | Yes. You do not need to explicitly require the web resource key. |
| Web resource key: |
com.atlassian.auiplugin:aui-page-layout
|
| AMD Module key: | N/A |
| Experimental API: | 5 |
| General API: | 5.1 |
The core layout requires the page panel, a page panel inner and at least one panel - usually a content panel. The extra elements are used across layout variations so do not omit them.
For a simple content area with no divisions:
<div class="aui-page-panel"> <div class="aui-page-panel-inner"> <section class="aui-page-panel-content"> <h2>Page content heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </section> </div></div>Navigation (aui-page-panel-nav), sidebar (aui-page-panel-sidebar) and generic items (aui-page-panel-item) can be added as siblings of content (aui-page-panel-content). By default the items are rendered
as columns.
A three-column layout:
<section id="content" role="main"> <div class="aui-page-panel"> <div class="aui-page-panel-inner"> <div class="aui-page-panel-nav"> <!-- content such as a vertical nav --> </div> <section class="aui-page-panel-content"> <!-- main area for content --> </section> <aside class="aui-page-panel-sidebar"> <!-- tangental content here --> </aside> </div> </div></section>The generic item is relatively unstyled - it allows custom extensions to content layouts where required:
<div class="aui-page-panel"> <div class="aui-page-panel-inner"> <section class="aui-page-panel-item someclass"> <!-- content --> </section> <section class="aui-page-panel-item someotherclass"> <!-- content --> </section> </div></div>Called with JavaScript:
atlassian.page.pagePanel({ tagName: 'section', content: atlassian.page.pagePanelNav({ tagName: 'section', content: '...' }) + atlassian.page.pagePanelContent({ tagName: 'aside', content: '...' }) + atlassian.page.pagePanelSidebar({ tagName: 'nav', content: '...' })});Server-side Soy:
{call aui.page.pagePanel} {param content} {call aui.page.pagePanelNav} {param content} <p>content</p> {/param} {/call} {call aui.page.pagePanelContent} {param content} <p>content</p> {/param} {/call} {call aui.page.pagePanelSidebar} {param content} <p>content</p> {/param} {/call} {/param}{/call}