Creating tab items

Before you add tabbed content to a page, you need to create tab items and assign them to a tab group.

Each tab item should have a title and content, optionally, an icon to show on the tab.

Before creating tab items, you may want to consider creating one or more tab groups.

To create a tab item:

1. From the "Content" perspective, expand "Website Items", then "Tabbed Content".
2. Select "Tabs" below it and click "Add Tab Item" on the toolbar.
3. On the " Tab Item" ill the fields:
   1. Title: The title of the tab.
   2. Icon: The icon to show on the tab.
   3. Group: The group the tab belongs to.
   4. Ordering: The position of the tab within a group.
4. On the "Tab Content" tab, add content for the tab.
5. Save the item.
6. Repeat Steps 2-5 for as many tabs as you need.

Creating tab groups

Each tab should belong to a tab group. At least one tab group must be created before you add a tab item.

To create a tab group:

1. From the "Content" perspective, expand "Website Items", then "Tabbed Content".
2. Select "Tab Groups" below it and click "Add Group" on the toolbar.
3. Specify the title of the tab group in the "Title" field.
4. Save the group.
5. Repeat Steps 2-4 for as many tab groups as you need.

Adding tabs to a page

You add tabbed content to a page as a group of tabs created earlier.

To add tabs with content to a page:

1. From the "Content" perspective, expand "Websites" and locate a page where you want to add the tabs.
2. Edit the page.
3. On the page, insert:
   1. the "Tabbed Content" component (Components | Page Blocks),
   2. or the function "Orckestra.Lists.Tabs" ( Insert | Function),
   3. or the following code:  Expand code

      <f:function name="Orckestra.Lists.Tabs">
      	<f:param name="TabsGroup" value="{GUID OF A TAB GROUP}" />
      	<f:param name="Orientation" value="Horizontal" />
      	<f:param name="Theme" value="light" />
      </f:function>

4. In the "Tab Group" parameter, select the group the tabs of which should be added on the page.
5. If necessary, specify these optional parameters:
   1. Orientation: The orientation of tabs: horizontal (default) or vertical.
   2. Style Theme: The style theme to use with tabs. The "light" style theme is used by default. If no theme is specified, the default Bootstrap style theme will be used. You can use a custom theme, too.

Creating a custom style theme

You can create a custom style theme and use it to style the tabs via the "Style Theme" parameter of the "Composite.Lists.Tabs" function.

To be available for the "Style Theme" parameter, the theme you are creating must comply with the following requirements:

• Each style theme must be created as a separate .LESS file in the folder ~/Frontend/Composite/Lists/Tabs/themes/.
• The theme's name must be used to name both the file and the class for the theme in the file:

.tabs.{your_theme_name} {
...
}

For example, if you want a theme called "dark":

1. In ~/Frontend/Orckestra/Lists/Tabs/themes/ create a file naming it "dark.less".
2. In the file add a class naming it ".dark" like this:
   Expand code

   .tabs.dark {
   
   }

3. Implement the theme by adding styles etc as you need.
4. Save the file.
5. Next, edit a page where the tabs are presented with the "Composite.Lists.Tabs" function.
6. Edit the function's properties and specify the "dark" theme in its " Style Theme" parameter:
   Expand code

   <f:param name="Theme" value="dark" />

7. Save and publish the changes.

When you refresh the page with the tabs, the new theme will be used.

The following is the example of a custom theme called "dark":

@tabs-content-bg: #333;
@tabs-text-color: #fff;
@tabs-border-color: #000;

.tabs.dark {
    .nav-tabs {
        > li {
            > a {
                &:hover {
                    border-color: @tabs-border-color;
                    background-color: @tabs-content-bg;
                    color: @tabs-text-color;
                }
            }

            &.active {
                > a, > a:hover, > a:focus {
                    color: @tabs-text-color;
                    background-color: @tabs-content-bg;
                    border: 1px solid @tabs-border-color;
                    border-bottom-color: transparent;
                }
            }
        }
    }

    .tab-content {
        border: 1px solid @tabs-border-color;
        background-color: @tabs-content-bg;
        color: @tabs-text-color;
        padding: 20px;
    }
}