Tabs

Tabs is a pair of macros allowing you to add AUI-styled Tabs which provide interactive and categorized information to the page.

Usage

1. Go to the form you wish to edit.

2. Click Edit.

3. Click Insert More Content, and select Other Macros.

4. Select the Tabs Container macro from the provided list.

   

5. Complete the desired fields.

   Parameter	Description	Type	Default	Required
   Tab Direction	Defines whether the tabs appear either: Horizontal (across the top of the tabs container) Vertically (down the left of the container)	string	none
   ID	Specifies a CSS ID to be added	string	none
   CSS Class	Specifies a CSS Class to be added	string	none
   Title	Text to display in a tool tip	string	none

6. The macro will then appear on the page.

   

7. Place the Tabs Page macro inside the Tabs Container macro.

8. Click Insert More Content, and select Other Macros.

9. Select the Tabs Page macro.

10. 

    Lazy Loading limitations:

    • Inline comments in tabbed content do not work with Lazy Loading enabled.

    • Lazy Loading does not work with the Jira Macro.

    • Lazy Loading does not work with MS Word Macro.

      Complete the desired fields.

      Parameter	Description	Type	Default	Required
      Title	The title being attached to this tab	string	none
      ID	Specifies a CSS ID to be added	string	none
      CSS Class	Specifies a CSS Class to be added	string	none
      Lazy loading	Allows the lazy loading of tabbed content. It gets triggered when the tab is activated	boolean	false

11. The macro will then appear on the page.

    

12. Continue adding Tabs Page macros to the Tabs Container macro for each tab required. When saved, an AUI-styled Horizontal Navigation bar will appear on the page.

    

    Anchor to tab:

    Please define individual ID’s for tabs. Once the Tab macro is inserted, the ID should be defined, which will act as an anchor tag. There’s no need to insert the Anchor macro explicitly to the body content of the Tab page macro.

    On the page being linked to the Tabs page, please click Insert > Link > Advanced > Paste the full link of the page containing TABS followed by "#" and the ID of the tab to be linked.

Style Reference

Horizontal Tabs

Vertical Tabs