我尝试了以下HTML代码来制作标签集:
<section id="dynamic-demo-toolbar">
<nav id="dynamic-tab-bar" class="mdc-tab-bar" role="tablist">
<a role="tab" aria-controls="panel-1"
class="mdc-tab mdc-tab--active" href="#panel-1">Item One</a>
<a role="tab" aria-controls="panel-2"
class="mdc-tab" href="#panel-2">Item Two</a>
<a role="tab" aria-controls="panel-3"
class="mdc-tab" href="#panel-3">Item Three</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</section>
<section>
<div class="panels">
<p class="panel active" id="panel-1" role="tabpanel" aria-hidden="false">Item One</p>
<p class="panel" id="panel-2" role="tabpanel" aria-hidden="true">Item Two</p>
<p class="panel" id="panel-3" role="tabpanel" aria-hidden="true">Item Three</p>
</div>
<div class="dots">
<a class="dot active" data-trigger="panel-1" href="#panel-1"></a>
<a class="dot" data-trigger="panel-2" href="#panel-2"></a>
<a class="dot" data-trigger="panel-3" href="#panel-3"></a>
</div>
</section>
JavaScript是:
<script>
var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));
var dots = document.querySelector('.dots');
var panels = document.querySelector('.panels');
dynamicTabBar.tabs.forEach(function(tab) {?
tab.preventDefaultOnClick = true;
});
function updateDot(index) {
var activeDot = dots.querySelector('.dot.active');
if (activeDot) {
activeDot.classList.remove('active');
}
var newActiveDot = dots.querySelector('.dot:nth-child(' + (index + 1) + ')');
if (newActiveDot) {
newActiveDot.classList.add('active');
}
}
function updatePanel(index) {
var activePanel = panels.querySelector('.panel.active');
if (activePanel) {
activePanel.classList.remove('active');
}
var newActivePanel = panels.querySelector('.panel:nth-child(' + (index + 1) + ')');
if (newActivePanel) {
newActivePanel.classList.add('active');
}
}
dynamicTabBar.listen('MDCTabBar:change', function ({detail: tabs}) {
var nthChildIndex = tabs.activeTabIndex;
updatePanel(nthChildIndex);
updateDot(nthChildIndex);
});
dots.addEventListener('click', function (evt) {
if (!evt.target.classList.contains('dot')) {
return;
}
evt.preventDefault();
var dotIndex = [].slice.call(dots.querySelectorAll('.dot')).indexOf(evt.target);
if (dotIndex >= 0) {
dynamicTabBar.activeTabIndex = dotIndex;
}
updatePanel(dotIndex);
updateDot(dotIndex);
});
const MDCTab = mdc.tabs.MDCTab;
const MDCTabFoundation = mdc.tabs.MDCTabFoundation;
const MDCTabBar = mdc.tabs.MDCTabBar;
const MDCTabBarFoundation = mdc.tabs.MDCTabBarFoundation;
mdc.tabs.MDCTabBar.attachTo(document.querySelector('#my-mdc-tab-bar'));
</script>
请帮我...
问题在哪里,如何解决?
实际上,Material.io不提供任何组件的完整示例代码。这就是为什么我完全感到困惑。
我正在制作一个聊天应用,并且在那里需要标签。所以,我想你们可以帮助我。如果可能,请提供任何codepend或jsfiddle演示代码...
最佳答案
删除此行中的?
登录:
dynamicTabBar.tabs.forEach(function(tab) {?
并添加一些CSS以默认隐藏非活动
panel
块:var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));
var dots = document.querySelector('.dots');
var panels = document.querySelector('.panels');
dynamicTabBar.tabs.forEach(function(tab) {
tab.preventDefaultOnClick = true;
});
function updateDot(index) {
var activeDot = dots.querySelector('.dot.active');
if (activeDot) {
activeDot.classList.remove('active');
}
var newActiveDot = dots.querySelector('.dot:nth-child(' + (index + 1) + ')');
if (newActiveDot) {
newActiveDot.classList.add('active');
}
}
function updatePanel(index) {
var activePanel = panels.querySelector('.panel.active');
if (activePanel) {
activePanel.classList.remove('active');
}
var newActivePanel = panels.querySelector('.panel:nth-child(' + (index + 1) + ')');
if (newActivePanel) {
newActivePanel.classList.add('active');
}
}
dynamicTabBar.listen('MDCTabBar:change', function ({detail: tabs}) {
var nthChildIndex = tabs.activeTabIndex;
updatePanel(nthChildIndex);
updateDot(nthChildIndex);
});
dots.addEventListener('click', function (evt) {
if (!evt.target.classList.contains('dot')) {
return;
}
evt.preventDefault();
var dotIndex = [].slice.call(dots.querySelectorAll('.dot')).indexOf(evt.target);
if (dotIndex >= 0) {
dynamicTabBar.activeTabIndex = dotIndex;
}
updatePanel(dotIndex);
updateDot(dotIndex);
});
const MDCTab = mdc.tabs.MDCTab;
const MDCTabFoundation = mdc.tabs.MDCTabFoundation;
const MDCTabBar = mdc.tabs.MDCTabBar;
const MDCTabBarFoundation = mdc.tabs.MDCTabBarFoundation;
mdc.tabs.MDCTabBar.attachTo(document.querySelector('#my-mdc-tab-bar'));
.panel {
display: none;
}
.panel.active {
display: block
}
.dot {
width: 10px;
height: 10px;
display: inline-block;
background: black;
padding: 5px;
}
.dots {
text-align: center;
}
.dot.active {
background: red;
}
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet"/>
<section id="dynamic-demo-toolbar">
<nav id="dynamic-tab-bar" class="mdc-tab-bar" role="tablist">
<a role="tab" aria-controls="panel-1"
class="mdc-tab mdc-tab--active" href="#panel-1">Item One</a>
<a role="tab" aria-controls="panel-2"
class="mdc-tab" href="#panel-2">Item Two</a>
<a role="tab" aria-controls="panel-3"
class="mdc-tab" href="#panel-3">Item Three</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</section>
<section>
<div class="panels">
<p class="panel active" id="panel-1" role="tabpanel" aria-hidden="false">Item One</p>
<p class="panel" id="panel-2" role="tabpanel" aria-hidden="true">Item Two</p>
<p class="panel" id="panel-3" role="tabpanel" aria-hidden="true">Item Three</p>
</div>
<div class="dots">
<a class="dot active" data-trigger="panel-1" href="#panel-1"></a>
<a class="dot" data-trigger="panel-2" href="#panel-2"></a>
<a class="dot" data-trigger="panel-3" href="#panel-3"></a>
</div>
</section>
关于javascript - 如何使用Unpkg作为MDC CSS文件和S文件的存储在Web应用程序上添加Material Design选项卡,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51565721/