Tabs are UI elements that allow multiple contents to be contained within a single window. Tabs are used as a navigation for switching between sets of content. With tabs, it is possible to keep a large amount of data in a much smaller area than you usually need.
Example
Tabs macro | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||
[{"label":"What are tabs","id":"1","content":{"version":1,"type":"doc","content":[{"type":"paragraph","content":[{"type":"date","attrs":{"timestamp":"1658448000000"}},{"type":"text","text":" "}]},{"type":"codeBlock","attrs":{}},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"type":"text","text":"Info"}]}]},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"type":"text","text":"NOte"}]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[]}]},{"type":"table","attrs":{"isNumberColumnEnabled":false,"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{},"content":[{"type":"blockquote","content":[{"type":"paragraph","content":[{"type":"date","attrs":{"timestamp":"1657670400000"}},{"type":"text","text":" "}]}]}]},{"type":"tableHeader","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableHeader","attrs":{},"content":[{"type":"paragraph","content":[]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]}]}]},{"type":"paragraph","content":[]}]},"icon":"atlaskit/ArrowRightIcon"},{"label":"When we use tabs","id":"2","content":{"version":1,"type":"doc","content":[{"type":"table","attrs":{"isNumberColumnEnabled":false,"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{},"content":[{"type":"paragraph","content":[{"type":"text","text":"Table","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableHeader","attrs":{},"content":[{"type":"paragraph","content":[]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]},{"type":"tableCell","attrs":{},"content":[{"type":"paragraph","content":[]}]}]}]},{"type":"paragraph","content":[]},{"type":"codeBlock","attrs":{},"content":[{"type":"text","text":"Code"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bullets"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"sasaassasa"}]}]},"icon":"material-design/AccessTime"},{"label":"Why we use tabs","id":"l7qpmpzgp","content":{"version":1,"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","content":[{"type":"text","text":"Quote"}]}]},{"type":"paragraph","content":[]},{"type":"paragraph","content":[{"type":"date","attrs":{"timestamp":"1656028800000"}},{"type":"text","text":" "}]},{"type":"paragraph","content":[]},{"type":"paragraph","content":[{"type":"text","text":"sasasasasasa"}]}]},"icon":"bootstrap/CheckCircle"},{"label":"Tab 4 - Page Loaded","id":"1d3gfm0jh","content":{"type":"doc","content":[{""}] |
How to use
To add the Tabs macro to a Confluence page:
Choose “+” in the Confluence editor
Search “tabs” and select the MacroSuite - Tabs.
type":"layoutSection","marks":[{"type":"breakout","attrs":{"mode":"full-width"}}],"content":[{"type":"layoutColumn","attrs":{"width":66.66},"content":[{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Shared with your team. Learn about ","type":"text"},{"text":"space permissions","type":"text","marks":[{"type":"link","attrs":{"href":"https://confluence.atlassian.com/confcloud/assign-space-permissions-724764762.html"}}]},{"text":" and ","type":"text"},{"text":"restrictions","type":"text","marks":[{"type":"link","attrs":{"href":"https://confluence.atlassian.com/confcloud/add-or-remove-page-restrictions-724764891.html"}}]},{"text":". ","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"emoji","attrs":{"id":"1f44b","text":"👋","shortName":":wave:"}},{"text":" Greetings!","type":"text"}]},{"type":"paragraph","content":[{"text":"Think of your personal space as a folder of storing all the documents that don't currently belong anywhere else. It's all yours. ","type":"text"},{"text":"Customize","type":"text","marks":[{"type":"strong"}]},{"text":" this page by clicking the edit button ","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-external-image","parameters":{"src":"https://confluence.atlassian.com/images/icons/edit_pencil.png","width":"","height":""}}},{"text":" on top.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"What's inside this space?","type":"text"}]},{"type":"paragraph","content":[{"text":"Sample Pages","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/~62ded5934913d0b73488d71a/pages/631603381/Sample+Pages"}}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Meeting notes","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/~62ded5934913d0b73488d71a/pages/631603380/Meeting+notes"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Decision","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/~62ded5934913d0b73488d71a/pages/631603389/Decision"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Product requirements","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/~62ded5934913d0b73488d71a/pages/631603396/Product+requirements"}}]}]}]}]}]},{"type":"layoutColumn","attrs":{"width":33.33},"content":[{"type":"paragraph"},{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"livesearch","parameters":{"macroParams":{"spaceKey":{"value":"@self"},"_parentId":{"value":"631603382"},"placeholder":{"value":"Search in this space"}},"macroMetadata":{"macroId":{"value":"b31ebe7d-404f-4e88-9bdd-65ccd143cf18"},"schemaVersion":{"value":"1"},"placeholder":[{"type":"icon","data":{"url":"https://caelor.atlassian.net/wiki/download/resources/confluence.extra.livesearch/images/search.png"}}],"title":"Livesearch"}}}}]},{"type":"paragraph"},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"recently-updated","parameters":{"macroParams":{"_parentId":{"value":"631603382"},"theme":{"value":"sidebar"}},"macroMetadata":{"macroId":{"value":"52a90acf-8307-4563-bc2b-79e5448ef44d"},"schemaVersion":{"value":"1"},"title":"Recently Updated"}}}}]}]}],"version":1},"pageId":"631603382"}] |
How to use
Tabs alignment | Select tabs alignment. By default, tabs are left aligned. | ||
Tabs styles | Choose from three different tabs styles. | ||
Create tabs | Use dropdown to create tabs. To change the icon and text, use inline editing option. | ||
Icon | Click on icon and choose from more than 5000 icons available and attract even more attention. To change the icon position or remove label, use the “Icon” dropdown in the macro configuration. | ||
Editor | Most of the native Confluence macros are available within the tabs editor.
Supported macros:
| ||
Import Confluence pages | Use the option to add and edit whole Confluence pages within the tabs macro. |
Roadmap
The Tabs macro will receive updates to improve performance and user experience. We will introduce the following features soon:
Colour and font configuration (active, inactive, and hover)
Status colour Green title RELEASED! Tabs width
Status colour Green title RELEASED! Preview mode with configuration options
Status colour Green title RELEASED! Add and manage action points and decisions in tabs
If you have any questions, need more detailed information, or want to share feature suggestions, please feel free to contact us via our service desk.
Button macro | ||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Tabs with Easy HTML
Tab headers
Easy html macro | ||||
---|---|---|---|---|
| ||||
Hover Tabs
Easy html macro | ||||
---|---|---|---|---|
| ||||
MacroSuite News
Cp content card macro | ||
---|---|---|
|
Tabs macro | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||
[{"label":"Tab 1","id":"1","content":{"type":"doc","content":[{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Click ","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-external-image","parameters":{"src":"https://confluence.atlassian.com/images/icons/edit_pencil.png","width":"","height":""}}},{"text":" to edit this page. To delete, open the ","type":"text"},{"text":"···","type":"text","marks":[{"type":"strong"}]},{"text":" menu and select ","type":"text"},{"text":"Delete","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"emoji","attrs":{"id":"atlassian-blue_star","text":":blue_star:","shortName":":blue_star:"}},{"text":" Date","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"type":"emoji","attrs":{"id":"atlassian-blue_star","text":":blue_star:","shortName":":blue_star:"}},{"text":" Participants","type":"text"}]},{"type":"paragraph","content":[{"text":"List meeting participants using their @ mention names","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"@ mention a person to add them as an attendee and they will be notified.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"emoji","attrs":{"id":"atlassian-blue_star","text":":blue_star:","shortName":":blue_star:"}},{"text":" Goals","type":"text"}]},{"type":"paragraph","content":[{"text":"List goals for this meeting (e.g., Set design priorities for FY19)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"emoji","attrs":{"id":"atlassian-blue_star","text":":blue_star:","shortName":":blue_star:"}},{"text":" Discussion topics","type":"text"}]},{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"background":"#deebff","rowspan":1,"colwidth":[120]},"content":[{"type":"paragraph","content":[{"text":"Time","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"background":"#deebff","rowspan":1,"colwidth":[120]},"content":[{"type":"paragraph","content":[{"text":"Item","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"background":"#deebff","rowspan":1,"colwidth":[127]},"content":[{"type":"paragraph","content":[{"text":"Presenter","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"background":"#deebff","rowspan":1,"colwidth":[392]},"content":[{"type":"paragraph","content":[{"text":"Notes","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[120]},"content":[{"type":"paragraph"}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[120]},"content":[{"type":"paragraph"}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[127]},"content":[{"type":"paragraph"}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[392]},"content":[{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add notes for each discussion topic","type":"text"}]}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[120]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[120]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[127]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[392]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"emoji","attrs":{"id":"atlassian-blue_star","text":":blue_star:","shortName":":blue_star:"}},{"text":" Action items","type":"text"}]},{"type":"paragraph","content":[{"text":"Add action items to close the loop on open questions or discussion topics:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"emoji","attrs":{"id":"atlassian-blue_star","text":":blue_star:","shortName":":blue_star:"}},{"text":" Decisions","type":"text"}]},{"type":"paragraph","content":[{"text":"Type /decision to record the decisions you make in this meeting:","type":"text"}]},{"type":"decisionList","attrs":{"localId":"c12e20ae-3629-4cc4-98e7-7e01fd45d565"},"content":[{"type":"decisionItem","attrs":{"state":"DECIDED","localId":"fea5946d-12c1-4174-9ef8-d3e222b33608"}}]}],"version":1},"icon":"","loadOrImport":"load","pageId":"631603380"},{"label":"Tab 2","id":"2","content":{"content":[{"type":"paragraph","content":[]}],"type":"doc","version":1},"icon":""}] |