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.

    The Macro Browser with the Tabs Container macro available.
  5. Complete the desired fields.

    ParameterDescriptionTypeDefaultRequired

    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.

    The placeholder for a Tabs Container macro.
  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.

      ParameterDescriptionTypeDefaultRequired

      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.

    A Tabs Container macro with example Tabs Page macros within.
  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

A rendered Tabs Page macro with a horizontal configuration.

Vertical Tabs

A rendered Tabs Page macro with a vertical configuration.