ptcs-page-select¶
Visual¶
Overview¶
<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>
</ptcs-page-select>
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>
</ptcs-page-select>
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¶
Properties¶
| 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. |
Events¶
| Name | Data | Description |
|---|---|---|
| selected-changed | { selected } | When the selected value changes |
Methods¶
| 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. |
Styling¶
<ptcs-page-select> is a pure layout component. It does not have any parts nor any CSS variable styling.
RTL¶
N/A (?)
ARIA¶
To be decided