材料.io标签:标签内容放在哪里?

Question

我正在尝试使用材料。项目中的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>

我应该把标签正文内容放在哪里?似乎他们只展示了如何建立一个标签栏，而不是整个功能?

Answer 1

首先，你应该在一个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');
});