ptcs-tab-set¶

Visual¶

Overview¶

The <ptcs-tab-set> is a layout component that contains a set of tabs. Each tab can display a different set of items. Only one tab can be selected at a time. The selected tab is indicated with a selection bar that is typically a line under the tab. The tab name width will auto-size to accommodate the name length, but can optionally be assigned a maximum width; a tab name that exceeds the maximum width is truncated with horizontal ellipsis suffix to indicate the overflow.

The layout mode is either horizontal, where the tabs are laid out along a line at the top or bottom, or vertical, where the tabs are laid out along the left or right edge. On overflow a dropdown menu button appears, for tabs that are not being shown. Selecting a tab from the dropdown menu will display it as last visible tab.

Usage Examples¶

Basic Usage¶

function func()
  {
    const bind = document.getElementById('tabSet');

    bind.tabs = [
      { name: "Tab One Title"},
      { name: "Another Tab"}
    ];
  }

<ptcs-tab-set selected="0" id="tabSet" items="{{tabs}}">
<div>something in the first tab</div>
</ptcs-tab-set>

Creates a two-column tab set with a div element that is shown when the first tab is selected.

Vertical layout¶

<ptcs-tab-set selected="0" tab-style="contained-tabs" orientation="vertical-left" id="tabSet" items="{{tabs}}">
</ptcs-tab-set>
Creates a vertical tab set, with tabs appearing along the left edge.

NOTE: * Each DOM inside the tab set becomes the pages body of its index corresponding column.

Component API¶

Properties¶

Property	Type	Description	Default	Triggers a changed event?
defaultTabNumber	Number	The one-based index number of the selected tab when the tab set is loaded	1	Yes
disabled	Boolean	Disables the tabs	false	No
items	Array	The array that holds the tab data. It includes the properties: name, value (String), icon, visible, and disabled		No
selected	Number	The zero-based index of the selected tab	0	Yes
selectedTabName	String	The name of the selected tab		Yes
selectedTabValue	String	The value of the selected tab		Yes
tabHeight	Number	The height of page that the tab is showing, unless the page is stretched by flex CSS		No
tabNameMaxWidth	Number	The maximum width for the tab name (by default no limit)		No
tabStyle	String	`open-tabs` or `contained-tabs`	`open-tabs`	No

Only relevant when tabStyle is contained-tabs:

Property	Type	Description	Default	Triggers a changed event?
iconPlacement	String	Icon placement visavi the tab label (`left`, `right`, `top`, or `bottom`)	`left`	No
iconSize	Number	Size of the icon inside the tab item (in pixels). Allowed range: 16-64	24	No
iconType	String	The property name of the icon in individual tabs (in `items` array)	`iconType`	No
mode	String	Icon and/or label combinations (`label`, `icon`, or `icon+label`)	`label`	No
tabOrientation	String	The tab group orientation vs. the content area (`horizontal-top`, `horizontal-bottom`, `vertical-left`, or `vertical-right`)	`horizontal-top`	No
tabWidth	Number	Sets the width of the tab (in pixels)		No
hideContentAreaBorder	Boolean	If true, the borders of the content area are not visible	`false`	No

Methods¶

No methods.

Styling¶

The Parts of a Component¶

Part	Description
tabs-header	The tabs container. This does not include the page on the selected tab.
divider	A divider between the tabs and the page display
pages	The page that shows when you select a tab

State attributes¶

Attribute	Description	Part
disabled	Is tab set disabled?	:host, tabs-header, pages
selected	The zero-based index of the selected tab	:host
tabHeight	The height of page the tab is showing	:host