1.0.7 • Published 2 months ago
custom-tab v1.0.7
Custom Tab
Props
| Name | Type | Description |
|---|---|---|
| expression | string | Query expression to be applied when button is toggled |
| label | string | Renders a title for the custom tab |
| tab-id | string | A unique identifier for the tab. The value will be used as the originLevel2 when the tab is active. |
| is-active | boolean | Defines whether the custom tab is active on render. There should only be one active tab on render, if there are multiple, the last rendered active tab will be active |
| excluded-facets | string | comma separated list of facetid or facet fields that should be excluded from the tab. |
Shadow Parts
| Part | Description |
|---|---|
"tab-anchor" | part for the tab button styling |
"tab-label" | part for the label styling |
This component provides a custom tab that allows isolating the search interface into multiple use cases. For example, in one tab you might want to show only youtube sources and in another tab you want to show all your sources and would like to easily switch between these two tabs, this component allows you to do that. This component can be placed anywhere but it is recommended that it is placed above the <atomic-search-layout> div so that it is on top of the page.
<div class="tab-container">
<custom-tab expression="" label="All" tab-id="all" is-active="true"></custom-tab>
<custom-tab expression="@source==(YouTube)" label="Youtube Sources" tab-id="youtube" is-active="false" excluded-facets="source,filetype"></custom-tab>
</div>