Versions Compared

Old Version 90

changes.mady.by.user Marin Varvodic

Saved on

compared with

New Version Current

changes.mady.by.user Marin Varvodic

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Tabs are UI elements that allow multiple contents 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.

Tabs macro
summary"Test1232323l2ojkdslkjdslkdsjdslkdsj"
defaultColor#42526e
activeColor#0052CC
width30
hoverColor#0065FF
tabTypeno-icon
stylestyle-1
alignmentleft
[{"label":"Tab 1","id":"1","content":{"version":1,"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Test1232323l2ojkdslkjdslkdsjdslkdsj"}]}]},"icon":""},{"label":"Tab 2","id":"2","content":{"content":[],"type":"doc","version":1},"icon":""}]

Example

Tabs macro
defaultColor#040404ff
activeColor#1117e5ff
width100
hoverColor#1117e5ff
tabTypeno-icon
stylestyle-2
alignmentleft
[{"label":"What are tabs","id":"1","content":{"version":1,"type":"doc","content":[{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"type":"external","url":"https://caelor.atlassian.net/wiki/download/attachments/303366145/Screenshot%202022-08-12%20at%2017.21.16.png?version=1&modificationDate=1660549025122&cacheVersion=1&api=v2"}}]},{"type":"paragraph","content":[{"type":"date","attrs":{"timestamp":"1658448000000"}}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"type":"text","text":"Info"}]}]},{"type":"table","attrs":{"isNumberColumnEnabled":false,"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{},"content":[{"type":"paragraph","content":[{"type":"text","text":"User Story","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{},"content":[{"type":"paragraph","content":[{"type":"text","text":"Requirements"}]}]},{"type":"tableHeader","attrs":{},"content":[{"type":"paragraph","content":[{"type":"text","text":"Scope"}]}]}]},{"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":[]},"icon":"bootstrap/CheckCircle"}]

How to use

To add the Tabs macro to a Confluence page: 

  • Choose “+” in the Confluence editor

  • Search “tabs” and select the MacroSuite - Tabs.

Alternatively, type '/' on the Confluence page to see a list of suggestions and type 'Tabs.' Intuitive configuration dialogue helps users to create and customize tabs fast and easily.

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.

Note

Due to Atlassian limitations, it is not possible to insert and show third party macros within tabs.

Supported macros:

  • Text formatting

  • Content alignment

  • Bullets and numbering

  • Links

  • Images

  • Code snippet

  • Info panel

  • Date

  • Quote

  • Status

  • Table

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
    colourGreen
    titleRELEASED!

  • Tabs width

    Status
    colourGreen
    titleRELEASED!

  • Preview mode with configuration options

    Status
    colourGreen
    titleRELEASED!

  • 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
buttonTextSuggest new feature
isButtonShadowOntrue
buttonColor#0252cc
buttonBorderColor
buttonNewTabtrue
buttonFontColor#ffffff
buttonSizemedium
buttonWidthDetection260
buttonIconColor#ffffff
buttonHoverColor#0252cc
buttonIconfas/angle-right
buttonTypeicon_right
buttonNewLink
buttonLinkhttps://caelor.atlassian.net/servicedesk/customer/portal/1/group/1/create/8
buttonRadius20
buttonShadow0
buttonWidth260

Tabs with Easy HTML

Tab headers

Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<div id=\"London\" class=\"tabcontent\">\n <h1>London</h1>\n <p>London is the capital city of England.</p>\n</div>\n\n<div id=\"Paris\" class=\"tabcontent\">\n <h1>Paris</h1>\n <p>Paris is the capital of France.</p>\n</div>\n\n<div id=\"Tokyo\" class=\"tabcontent\">\n <h1>Tokyo</h1>\n <p>Tokyo is the capital of Japan.</p>\n</div>\n\n<div id=\"Oslo\" class=\"tabcontent\">\n <h1>Oslo</h1>\n <p>Oslo is the capital of Norway.</p>\n</div>\n\n<button class=\"tablink\" onclick=\"openCity('London', this, 'red')\" id=\"defaultOpen\">London</button>\n<button class=\"tablink\" onclick=\"openCity('Paris', this, 'green')\">Paris</button>\n<button class=\"tablink\" onclick=\"openCity('Tokyo', this, 'blue')\">Tokyo</button>\n<button class=\"tablink\" onclick=\"openCity('Oslo', this, 'orange')\">Oslo</button>\n<br>\n<br>\n<br><br>\n<br>\n\n","javascript":"function openCity(cityName, elmnt, color) {\n // Hide all elements with class=\"tabcontent\" by default */\n var i, tabcontent, tablinks;\n tabcontent = document.getElementsByClassName(\"tabcontent\");\n for (i = 0; i < tabcontent.length; i++) {\n tabcontent[i].style.display = \"none\";\n }\n\n // Remove the background color of all tablinks/buttons\n tablinks = document.getElementsByClassName(\"tablink\");\n for (i = 0; i < tablinks.length; i++) {\n tablinks[i].style.backgroundColor = \"\";\n }\n\n // Show the specific tab content\n document.getElementById(cityName).style.display = \"block\";\n\n // Add the specific color to the button used to open the tab content\n elmnt.style.backgroundColor = color;\n}\n\n// Get the element with id=\"defaultOpen\" and click on it\ndocument.getElementById(\"defaultOpen\").click();","css":"/* Style the tab buttons */\n.tablink {\n background-color: #555;\n color: white;\n float: left;\n border: none;\n outline: none;\n cursor: pointer;\n padding: 14px 16px;\n font-size: 17px;\n width: 25%;\n}\n\n/* Change background color of buttons on hover */\n.tablink:hover {\n background-color: #777;\n}\n\n/* Set default styles for tab content */\n.tabcontent {\n color: white;\n display: none;\n padding: 50px;\n text-align: center;\n}\n\n/* Style each tab content individually */\n#London {background-color:red;}\n#Paris {background-color:green;}\n#Tokyo {background-color:blue;}\n#Oslo {background-color:orange;}"}
Hover Tabs
 Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<!-- Tab links -->\n<div class=\"tab\">\n <button class=\"tablinks\" onclick=\"openCity(event, 'London')\">London</button>\n <button class=\"tablinks\" onclick=\"openCity(event, 'Paris')\">Paris</button>\n <button class=\"tablinks\" onclick=\"openCity(event, 'Tokyo')\">Tokyo</button>\n</div>\n\n<!-- Tab content -->\n<div id=\"London\" class=\"tabcontent\">\n <h3>London</h3>\n <p>London is the capital city of England.</p>\n</div>\n\n<div id=\"Paris\" class=\"tabcontent\">\n <h3>Paris</h3>\n <p>Paris is the capital of France.</p>\n</div>\n\n<div id=\"Tokyo\" class=\"tabcontent\">\n <h3>Tokyo</h3>\n <p>Tokyo is the capital of Japan.</p>\n<br>\n<br>\n\n<br>\n<br>\n<br>\n<br>\n<br>\n<br>\n<br>\n","javascript":"function openCity(evt, cityName) {\n // Declare all variables\n var i, tabcontent, tablinks;\n\n // Get all elements with class=\"tabcontent\" and hide them\n tabcontent = document.getElementsByClassName(\"tabcontent\");\n for (i = 0; i < tabcontent.length; i++) {\n tabcontent[i].style.display = \"none\";\n }\n\n // Get all elements with class=\"tablinks\" and remove the class \"active\"\n tablinks = document.getElementsByClassName(\"tablinks\");\n for (i = 0; i < tablinks.length; i++) {\n tablinks[i].className = tablinks[i].className.replace(\" active\", \"\");\n }\n\n // Show the current tab, and add an \"active\" class to the button that opened the tab\n document.getElementById(cityName).style.display = \"block\";\n evt.currentTarget.className += \" active\";\n}","css":"/* Style the tab */\n.tab {\n overflow: hidden;\n border: 1px solid #ccc;\n background-color: #f1f1f1;\n}\n\n/* Style the buttons that are used to open the tab content */\n.tab button {\n background-color: inherit;\n float: left;\n border: none;\n outline: none;\n cursor: pointer;\n padding: 14px 16px;\n transition: 0.3s;\n}\n\n/* Change background color of buttons on hover */\n.tab button:hover {\n background-color: #ddd;\n}\n\n/* Create an active/current tablink class */\n.tab button.active {\n background-color: #ccc;\n}\n\n/* Style the tab content */\n.tabcontent {\n display: none;\n padding: 6px 12px;\n border: 1px solid #ccc;\n border-top: none;\n}"}