UNPKG

carbon-components

Version:

The Carbon Design System is IBM’s open-source design system for products and experiences.

60 lines (57 loc) 2.74 kB
<!-- 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" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></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-default" role="tab" aria-selected="true" > <a tabindex="0" id="tab-link-1-default" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-1-default">Tab label 1</a> </li> <li class="bx--tabs__nav-item " data-target=".tab-2-default" role="tab" > <a tabindex="0" id="tab-link-2-default" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-2-default">Tab label 2</a> </li> <li class="bx--tabs__nav-item " data-target=".tab-3-default" role="tab" > <a tabindex="0" id="tab-link-3-default" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-3-default">Tab label 3</a> </li> <li class="bx--tabs__nav-item bx--tabs__nav-item--disabled " data-target=".tab-4-default" role="tab" aria-disabled="true" > <a tabindex="0" id="tab-link-4-default" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-4-default">Tab label 4</a> </li> </ul> </div> <!-- The markup below is for demonstration purposes only --> <div class="bx--tab-content"> <div id="tab-panel-1-default" class="tab-1-default" role="tabpanel" aria-labelledby="tab-link-1-default" aria-hidden="false" > <div>Content for first tab goes here.</div> </div> <div id="tab-panel-2-default" class="tab-2-default" role="tabpanel" aria-labelledby="tab-link-2-default" aria-hidden="true" hidden> <div>Content for second tab goes here.</div> </div> <div id="tab-panel-3-default" class="tab-3-default" role="tabpanel" aria-labelledby="tab-link-3-default" aria-hidden="true" hidden> <div>Content for third tab goes here.</div> </div> <div id="tab-panel-4-default" class="tab-4-default" role="tabpanel" aria-labelledby="tab-link-4-default" aria-hidden="true" hidden> <div>Content for fourth tab goes here.</div> </div> </div>