UNPKG

1.69 kBtext/x-handlebars-templateView Raw
1<!--
2 Copyright IBM Corp. 2016, 2018
3
4 This source code is licensed under the Apache-2.0 license found in the
5 LICENSE file in the root directory of this source tree.
6-->
7
8<nav data-tabs class="{{@root.prefix}}--tabs" role="navigation">
9 <div class="{{@root.prefix}}--tabs-trigger" tabindex="0">
10 <a href="javascript:void(0)" class="{{@root.prefix}}--tabs-trigger-text" tabindex="-1"></a>
11 {{#if featureFlags.componentsX}}
12 {{ carbon-icon 'ChevronDownGlyph' }}
13 {{else}}
14 <svg class="{{@root.prefix}}--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
15 <path d="M10 0L5 5 0 0z"></path>
16 </svg>
17 {{/if}}
18 </div>
19 <ul class="{{@root.prefix}}--tabs__nav {{@root.prefix}}--tabs__nav--hidden" role="tablist">
20 {{#each items}}
21 <li class="{{@root.prefix}}--tabs__nav-item{{#if selected}} {{@root.prefix}}--tabs__nav-item--selected{{/if}} {{#if disabled}} {{@root.prefix}}--tabs__nav-item--disabled {{/if}}" data-target=".{{panelClass}}" role="presentation" {{#if ../featureFlags.componentsX}}{{/if}}>
22 <a tabindex="0" id="{{linkId}}" class="{{@root.prefix}}--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="{{panelId}}"{{#if selected}} aria-selected="true"{{/if}}>{{label}}</a>
23 </li>
24 {{/each}}
25 </ul>
26</nav>
27<!-- The markup below is for demonstration purposes only -->
28<div>
29 {{#each items}}
30 <div id="{{panelId}}" class="{{panelClass}}" role="tabpanel" aria-labelledby="{{linkId}}" aria-hidden="{{not selected}}"{{#if (not selected)}} hidden{{/if}}>
31 <p style="padding: 0 1rem; font-size: 14px; font-weight: 600;">{{panelContent}}</p>
32 </div>
33 {{/each}}
34</div>
35
\No newline at end of file