@carbon/charts
Version:
Carbon charting components
59 lines (56 loc) • 2.75 kB
HTML
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div data-tabs class="bx--tabs">
<div class="bx--tabs-trigger" tabindex="0">
<a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1"></a>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
</div>
<ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
<li
class="bx--tabs__nav-item bx--tabs__nav-item--selected "
data-target=".tab-1" role="presentation">
<a tabindex="0" id="tab-link-1" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab"
aria-controls="tab-panel-1" aria-selected="true" >Tab label 1</a>
</li>
<li
class="bx--tabs__nav-item "
data-target=".tab-2" role="presentation">
<a tabindex="0" id="tab-link-2" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab"
aria-controls="tab-panel-2" >Tab label 2</a>
</li>
<li
class="bx--tabs__nav-item "
data-target=".tab-3" role="presentation">
<a tabindex="0" id="tab-link-3" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab"
aria-controls="tab-panel-3" >Tab label 3</a>
</li>
<li
class="bx--tabs__nav-item bx--tabs__nav-item--disabled "
data-target=".tab-4" role="presentation">
<a tabindex="0" id="tab-link-4" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab"
aria-controls="tab-panel-4" >Tab label 4</a>
</li>
</ul>
</div>
<!-- The markup below is for demonstration purposes only -->
<div>
<div id="tab-panel-1" class="tab-1" role="tabpanel" aria-labelledby="tab-link-1"
aria-hidden="false" >
<p style="padding: 0 1rem; font-size: 14px; font-weight: 600;">Content for first tab goes here.</p>
</div>
<div id="tab-panel-2" class="tab-2" role="tabpanel" aria-labelledby="tab-link-2"
aria-hidden="true" hidden>
<p style="padding: 0 1rem; font-size: 14px; font-weight: 600;">Content for second tab goes here.</p>
</div>
<div id="tab-panel-3" class="tab-3" role="tabpanel" aria-labelledby="tab-link-3"
aria-hidden="true" hidden>
<p style="padding: 0 1rem; font-size: 14px; font-weight: 600;">Content for third tab goes here.</p>
</div>
<div id="tab-panel-4" class="tab-4" role="tabpanel" aria-labelledby="tab-link-4"
aria-hidden="true" hidden>
<p style="padding: 0 1rem; font-size: 14px; font-weight: 600;">Content for fourth tab goes here.</p>
</div>
</div>