x-tabbar
<x-tabbar>
elements are essentially containers for <x-tabbar-tab>
elements.
By default, whenever an <x-tabbar-tab>
element is clicked, it will fire a reveal
event on its targeted elements. It is up to the element to respond to this event, but some components bundled in Brick have built in responses to reveal
events.
Users can specify target elements by modifying the target-selector
attribute or the .targetSelector
property of the tabbar's tab with a document-relative CSS selector. This will essentially act as a delegation, so any elements matching the selector at the time of clicking the tab will be receive the event.
However, we can also provide an unchanging list of elements to target by editing the .targetElems
propery of the tabbar's tab.
With <x-deck>





Markup
<x-deck class="component-demo" transition-type="coverDown">
<x-card><!-- content unimportant --></x-card>
<x-card><!-- content unimportant --></x-card>
<x-card><!-- content unimportant --></x-card>
<x-card><!-- content unimportant --></x-card>
<x-card><!-- content unimportant --></x-card>
</x-deck>
<x-tabbar>
<x-tabbar-tab target-selector="x-deck x-card:first-child"><!-- content unimportant --></x-tabbar-tab>
<x-tabbar-tab target-selector="x-deck x-card:nth-child(2)"><!-- content unimportant --></x-tabbar-tab>
<x-tabbar-tab target-selector="x-deck x-card:nth-child(3)"><!-- content unimportant --></x-tabbar-tab>
<x-tabbar-tab target-selector="x-deck x-card:nth-child(4)"><!-- content unimportant --></x-tabbar-tab>
<x-tabbar-tab target-selector="x-deck x-card:nth-child(5)"><!-- content unimportant --></x-tabbar-tab>
</x-tabbar>
With <x-flipbox>


HTML markup
<!-- the target element; the actual structure is unimportant and is
only provided to demo what the tabbar's tabs are targeting -->
<x-flipbox class="component-demo">
<div>
<img src="Card_front.png"/>
</div>
<div>
<img src="Card_back.png"/>
</div>
</x-flipbox>
<!-- the tabbar itself -->
<x-tabbar>
<x-tabbar-tab target-selector="x-flipbox > *:first-child">
<!-- tab content is unimportant -->
</x-tabbar-tab>
<x-tabbar-tab target-selector="x-flipbox > *:last-child">
<!-- tab content is unimportant -->
</x-tabbar-tab>
</x-tabbar>