What is UI Tabs?

UI Tabs is a macro that allows you to contain content in different tabs on a page.

Live Example

UI Tabs looks like this on a page.


The latest release of RefinedTheme for Jira Service Desk introduced Site and Category structure. There are many different ways you can use this feature to your advantage. To get you started we have collected 5 alternative structures to suit various use cases. Learn more here: 5 Ways to Structure Jira Service Desk using RefinedTheme Sites and Categories

Bring structure to JSD

RefinedWiki’s apps come with many handy content modules to give teams the tools to display useful content well.

By well, we mean displaying content in a way that users can engage, navigate to find the answers they are searching for, while not get buried in information along the way. For agents and administrators of Atlassian platforms, configuring the content to be readily available requires no coding, just drag, drop and select with our smart and simple editors. For users, it’s a simple matter of fetching answers from a visual and easy to navigate interface.

Learn more here: 10 essential content modules to help Confluence and Jira Service Desk users find useful information

Homes

Using UI Tabs


In the Confluence editor, choose Insert > Other Macros.

Find and select the UI Tabs macro.

Within the UI Tabs macro, insert a UI Tab macro, one for each tab you want.

Add a title for each tab, and content.

Speeding up macro entry with autocomplete: Type { and the beginning of the macro name, to see a list of suggested macros.

To edit an existing macro

Click the macro placeholder and choose Edit.

A macro dialog window will open, where you can edit the parameters of the macro.


UI Tab macros need to be contained by a UI Tabs macro.

Link to a tabbed item

When navigating to a tab, the URL will be updated with a hash reference. This URL can be used to link directly to a tab located on a page. The item will be automatically highlighted and scrolled down to.

Parameters UI Tab

ParameterDefaultDescriptionVersion
Title (title) The title of the expandable item2.0

 

Examples

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Google.com

Expanded item

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Expanded item

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 

 


  • No labels