{% extends "component-demo-base.html" %} {% set TAG_NAME="x-tabbar" %} {% set COMPONENT_NAME="tabbar" %} {% block demoContent %}

<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>

One Two Three Four Five One Two Three Four Five

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>
Top

With <x-slidebox>
(also dynamically assigned tab targets)

A B C D

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];
}
});
Top

With <x-flipbox>

Front Back

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>
Top

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).

NIC CAGE
danceparty override

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!");
});
});
Top
{% endblock %}