Add a tabbed content pane to a web page, in which users can click titled tabs to reveal different content.
Internet Explorer 7+, Firefox 3+, Safari 4+
Options: General Appearance & Dimensions
- Unique Element ID
- The value for the id attribute assigned to the inserted root HTML tag for the component. This value is used to uniquely identify the component.
- Tab Transition Effect
- When switching tabs, there can either be no effect or a fade-in effect.
- Animation Duration
- The time required for the tab transition effect, in milliseconds. This is applicable only if Tab Transition Effect is set to "Fade".
- Reserve Space for Tallest Tab
- If this is the selected, the content below the Tabbed Content component will stay in a fixed position. If tabs have content with varying heights, then the content below will leave enough space above it for the tallest tab to fit. If this option is not selected, then the content below will remain immediately below the content of the current tab, and it will move as different tabs are selected.
- Tab Width
- The width of each tab. This can be set to "Default", so that each tab will fit its text contents, or it can be set to a fixed value, in pixels.
- Tab Height
- The height of each tab. This can be set to "Default", so that each tab will fit its text contents, or it can be set to a fixed value, in pixels. If Tab Width is set to a fixed value, then it is recommended that you also set Tab Height to a fixed value. Otherwise, tabs will not appear correctly if there is a tab with a title that wraps onto a second line.
- Tab Bar Left Margin
- The space between the left edge of the first tab and the left edge of the content, in pixels.
- Inter-Tab Spacing
- The space between adjacent tabs, in pixels.
- Tab Top Padding
- The padding between the tab title text and the top of the tab, in pixels.
- Tab Bottom Padding
- The padding between the tab title text and the bottom of the tab, in pixels.
- Tab Left/Right Padding
- The padding between the tab title text and the left and right sides of the tab, in pixels.
- Tab Content Width
- The width of the content sections for each tab. This may be specified as "Default" to indicate that the section will size to fit whatever content is placed in it, or it may be specified as a percentage or pixel measurement.
- Tab Content Height
- The height of the content sections for each tab. This may be specified as "Default" to indicate that the section will size to fit whatever content is placed in it, or it may be specified as a pixel measurement.
- Content Top Padding
- The padding between the tab's content and the top of the content box.
- Content Bottom Padding
- The padding between the tab's content and the bottom of the content box.
- Content Left/Right Padding
- The padding between the tab's content and the left and right sides of the content box.
Options: Tab Style & Colors
- Document BG Color
- The background color of the document. It is important that this option is set to match the background color of the region where the Tabbed Content component will be inserted. This color is used for some of the generated images for the tab's rounded corners.
- Tab Style
- The style of the tabs. Includes options related to the shape of tab corners and whether or not there is a border around tabs.
- Selected Tab BG Color
- The background color of the currently selected tab.
- Selected Tab Border Color
- The color of the border of the currently selected tab and the tab contents. This is applicable only if Tab Style specifies a bordered style.
- Selected Tab Font Color
- The color of title text for the currently selected tab.
- Unselected Tab BG Color
- The background color of tabs that are not currently selected.
- Unselected Tab Border Color
- The color of the border of tabs that are not currently selected. This is applicable only if Tab Style specifies a bordered style.
- Unselected Tab Font Color
- The color of title text for tabs that are not currently selected.
- Tab Content Font Color
- The color of text in the tab content section.
- Underline Titles
- Should tab titles be underlined?
- Title Font
- The font for tab titles.
- Number of Tabs
- The total number of tabs.
- Initially Selected Tab
- The index (starting with 1) of the tab that should be selected when the page initially loads.
- Tab Titles
- The titles for the tabs.