Блог

Я пытаюсь использовать material.io вкладки в проекте, в любом случае структура html недостаточно хорошо документирована:

https://material.io/components/tabs/web#design-api-documentation

 <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" role="tab" aria-selected="true" tabindex="0">
          <span class="mdc-tab__content">
            <span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
            <span class="mdc-tab__text-label">Favorites</span>
          </span>
          <span class="mdc-tab-indicator mdc-tab-indicator--active">
            <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, а затем содержимое в другом div дополнительно использовать javascript, чтобы указать, когда содержимое должно измениться. Я надеюсь, что этот ответ помог. Я думаю, что мой ответ не должен быть очень ясным, но когда вы пройдете через код, вы поймете, что я имею в виду

 <div class="svelte4" style="flex:1;" id="tim">
     <div class="mdc-tab-bar" role="tablist" style="background-color:rgb(34, 34, 34);">
      <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" role="tab" aria-selected="true" tabindex="0">
              <span class="mdc-tab__content">
                <span class="mdc-tab__text-label">1</span>
              </span>
              <span class="mdc-tab-indicator mdc-tab-indicator--active">
                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
              </span>
              <span class="mdc-tab__ripple"></span>
            </button>
    
    
    
            <button class="mdc-tab mdc-tab" role="tab" aria-selected="true" tabindex="0">
              <span class="mdc-tab__content">
                <span class="mdc-tab__text-label">2</span>
              </span>
              <span class="mdc-tab-indicator mdc-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 mdc-tab" role="tab" aria-selected="true" tabindex="0">
              <span class="mdc-tab__content">
                <span class="mdc-tab__text-label">3</span>
              </span>
              <span class="mdc-tab-indicator mdc-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 class="content content--active">
    <p>1</p>
    </div>
    
    <div class="content">
    <p>2</p>
    </div>
    
    <div class="content"> 
    <p>3</p>
    </div>  
    </div>
 

 var tabBar = new mdc.tabBar.MDCTabBar(document.querySelector('.mdc-tab-bar'));
var contentEls = document.querySelectorAll('.content');

tabBar.listen('MDCTabBar:activated', function (event) {
  // Hide currently-active content
  document.querySelector('.content--active').classList.remove('content--active');
  // Show content for newly-activated tab
  contentEls[event.detail.index].classList.add('content--active');
});