Skip to content




<ptcs-page-select> displays one or none of its child elements. The component works well with a <ptcs-tabs> component, where the tab control selects a page and the page selector displays the selected page.

The <ptcs-page-select> can support animations. When the component wants to show or hide an sub-element, it first checks if the element has a property named opened. If so it assigns opened to true (show) or false (hide). The element (component) can watch this propery and animate any changes to it. If no such property exists <ptcs-page-select> sets the CSS display property to "none" to hide to page.

Usage Examples

Basic Usage

<ptcs-page-select selected="0">
  <div>Page One</div>
  <div>Page Two</div>
  <div>Page Three</div>

Show Page One initially. Another element can be made visible by reassigning the selected property or by using the corresponding methods of the component.

Select Page via Attribute

<ptcs-page-select attr-for-selected="page" selected="page2" fallback-selection="fallback">
  <div page="fallback">Invalid page value</div>
  <div page="page1">Page One</div>
  <div page="page2">Page Two</div>
  <div page="page3">Page Three</div>

Show Page Two initially. If the selected property is assigned a value that doesn't have a corresponding page, the Invalid page value element displayed.

Component API


Property Type Description
selected Number or String The sub-element that should be visible.
attrForSelected String If null then selected is interpreted as a zero-based index. Otherwise attrForSelected specifies an attribute name: the first sub-element that has the same value on the attribute as selected is visible.
fallbackSelection String Specifies the sub-element that should be visible in case no element matches selected. This property is only used when attrForSelected is non-null.


Name Data Description
selected-changed { selected } When the selected value changes


Signature Description
indexOf(el) Returns the index of the page that contains el
select(value) Set the selected propery. value is either a string or a number.


<ptcs-page-select> is a pure layout component. It does not have any parts nor any CSS variable styling.


N/A (?)


To be decided