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 show
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 show
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-slidebox>
(also dynamically assigned tab targets)




HTML markup
<x-slidebox class="component-demo" orientation="x">
<x-slides>
<x-slide><!-- content unimportant --></x-slide>
<x-slide><!-- content unimportant --></x-slide>
<x-slide><!-- content unimportant --></x-slide>
<x-slide><!-- content unimportant --></x-slide>
</x-slides>
</x-slidebox>
<!-- see javascript to see demo of dynamically assigning targets -->
<x-tabbar id="slide-box-tabbar">
<x-tabbar-tab><!-- content unimportant --></x-tabbar-tab>
<x-tabbar-tab><!-- content unimportant --></x-tabbar-tab>
<x-tabbar-tab><!-- content unimportant --></x-tabbar-tab>
<x-tabbar-tab><!-- content unimportant --></x-tabbar-tab>
</x-tabbar>
JavaScript
document.addEventListener('DOMComponentsLoaded', function(){
// demonstrate dynamic tab-target handling in slidebox demo
var slideBox = document.querySelector('x-slidebox');
var slideBoxTabbar = document.getElementById("slide-box-tabbar");
// assign each tab to its respective slide in the slidebox
var tabs = slideBoxTabbar.tabs;
var slides = xtag.query(slideBox, 'x-slide');
for(var i=0; i < slides.length && i < tabs.length; i++){
var tab = tabs[i];
var slide = slides[i];
// assign each slide to its respective tabbar tab
tab.targetElems = [slide];
}
});
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>
Fire custom event types (using target-event
attributes)
Although tabbar tabs are set to fire show
events by default, we can change what kind of event fires by editing the target-event
attribute on the <x-tabbar>
(to change the event fired by all contained tabs), or on individual <x-tabbar-tab>
's (to the change the event fired by a specific tab).
HTML markup
<!-- the element we want to target -->
<div id="color-box" class="component-demo">
<span>NIC CAGE</span>
<img src="http://placecage.com/c/300/325"/>
</div>
<!-- The tabbar itself -->
<x-tabbar target-event="danceparty">
<!-- this tab will fire a 'danceparty' event on the
selected element, due to inheriting it from the tabbar -->
<x-tabbar-tab target-selector="#color-box > span">
<!-- tab 1 content -->
</x-tabbar-tab>
<!-- this tab will fire a 'override' event on the
selected element, due to having an override specified on the tab -->
<x-tabbar-tab target-selector="#color-box > img" target-event="override">
<!-- tab 2 content -->
</x-tabbar-tab>
</x-tabbar>
JavaScript
document.addEventListener('DOMComponentsLoaded', function(){
// demonstrate that events specified by the tabbar are fired
document.querySelector("#color-box > span").addEventListener("danceparty", function(e){
alert("The text received danceparty!");
});
document.querySelector("#color-box > img").addEventListener("danceparty", function(e){
alert("The image received danceparty!");
});
document.querySelector("#color-box > img").addEventListener("override", function(e){
alert("The image received override!");
});
});