Untitled
unknown
plain_text
a year ago
2.9 kB
4
Indexable
<div class="adopt-a-pup-top-navigation"> <div class="mdc-tab-bar" role="tablist"> <div class="mdc-tab-scroller"> <div class="mdc-tab-scroller__scroll-area"> <div class="mdc-tab-scroller__scroll-content"> <button class="mdc-tab mdc-tab--active adopt-a-pup-tab" role="tab" aria-selected="true" tabindex="0"> <span class="mdc-tab__content"> <span class="mdc-tab__text-label">Puppers</span> </span> <span class="mdc-tab-indicator mdc-tab-indicator--active adopt-a-pup-tab-indicator"> <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span> </span> <span class="mdc-tab__ripple"></span> </button> <button class="mdc-tab adopt-a-pup-tab" role="tab" aria-selected="false" tabindex="-1"> <span class="mdc-tab__content"> <span class="mdc-tab__text-label">Doggos</span> </span> <span class="mdc-tab-indicator adopt-a-pup-tab-indicator"> <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span> </span> <span class="mdc-tab__ripple"></span> </button> <button class="mdc-tab adopt-a-pup-tab" role="tab" aria-selected="false" tabindex="-1"> <span class="mdc-tab__content"> <span class="mdc-tab__text-label">Woofers</span> </span> <span class="mdc-tab-indicator adopt-a-pup-tab-indicator"> <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span> </span> <span class="mdc-tab__ripple"></span> </button> </div> </div> </div> </div> </div> //// css .adopt-a-pup-top-navigation { display: flex; position: relative; box-sizing: border-box; width: 100%; } .adopt-a-pup-tab { @include mdc-tab-text-label-color(white); @include mdc-tab-icon-color(white); .mdc-tab__ripple { @include mdc-states(white); } } .adopt-a-pup-tab-indicator { @include mdc-tab-indicator-underline-color(white); } //// javascript const topAppBar = new MDCTopAppBar(document.querySelector('.mdc-top-app-bar')); const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar')); tabBar.listen('MDCTabBar:activated', (activatedEvent) => { document.querySelectorAll('.adopt-a-pup-body').forEach((element, index) => { if (index === activatedEvent.detail.index) { element.classList.remove('adopt-a-pup-body--hidden'); } else { element.classList.add('adopt-a-pup-body--hidden'); } }); });
Editor is loading...
Leave a Comment