Material design lite 导航标签自动滑动
Material design lite navigation tabs autoslide
我使用这个库 https://getmdl.io/components/index.html#layout-section/tabs 来显示 "scrollables tabs"。
我的问题是,当我 select 一个位于箭头(向右或向左)下方的选项卡时,该选项卡 select 很好,但我们无法阅读所有单词。在本机应用程序中,我看到选项卡栏自动滚动以显示完整的 selected 选项卡。
您知道使用该库执行此操作的方法吗?
您可以在此处查看示例:http://jsfiddle.net/fzngbjcw/2/
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">My tab label 1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">My tabulation label 2</a>
<a href="#scroll-tab-3" class="mdl-layout__tab">My tabulation label 3</a>
<a href="#scroll-tab-4" class="mdl-layout__tab">My tabulation label 4</a>
<a href="#scroll-tab-5" class="mdl-layout__tab">My tabulation label 5</a>
<a href="#scroll-tab-6" class="mdl-layout__tab">My tabulation label 6</a>
</div>
</header>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel" id="scroll-tab-1">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-4">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-5">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-6">
<div class="page-content">
</div>
</section>
</main>
</div>
</body>
</html>
谢谢
我不认为 Material Design Lite has an auto-scrolling function for tabs that are outside the viewport (you may have seen that feature in a tabs demo for Material Components for the web 开发人员现在关注的是将 MDL 放入 "limited support")。
就是说,您可以在 MDL 中实现一些简单的自动滚动,当点击部分位于视口之外的选项卡时,使用一些 js 来检查点击的选项卡是否部分位于视口之外,然后触发点击适当的 MDL 滚动按钮(因此您不必重新发明滚动行为)。请记住,MDL 会动态创建一些 html 元素,因此您必须在选择这些元素之前侦听 mdl-componentupgraded
事件。以下是一个工作示例:
const tabs = document.querySelectorAll('.mdl-layout__tab')
let left, right;
document.addEventListener('mdl-componentupgraded', function(event) {
left = document.querySelector('.mdl-layout__tab-bar-left-button');
right = document.querySelector('.mdl-layout__tab-bar-right-button');
});
for (let tab of tabs) {
tab.addEventListener('click', function(event) {
let bounding = event.target.getBoundingClientRect();
if (bounding.left < 0) {
left.click();
} else if (bounding.right > window.innerWidth) {
right.click()
}
});
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">My tab label 1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">My tabulation label 2</a>
<a href="#scroll-tab-3" class="mdl-layout__tab">My tabulation label 3</a>
<a href="#scroll-tab-4" class="mdl-layout__tab">My tabulation label 4</a>
<a href="#scroll-tab-5" class="mdl-layout__tab">My tabulation label 5</a>
<a href="#scroll-tab-6" class="mdl-layout__tab">My tabulation label 6</a>
</div>
</header>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel" id="scroll-tab-1">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-4">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-5">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-6">
<div class="page-content">
</div>
</section>
</main>
</div>
</body>
</html>
我使用这个库 https://getmdl.io/components/index.html#layout-section/tabs 来显示 "scrollables tabs"。 我的问题是,当我 select 一个位于箭头(向右或向左)下方的选项卡时,该选项卡 select 很好,但我们无法阅读所有单词。在本机应用程序中,我看到选项卡栏自动滚动以显示完整的 selected 选项卡。 您知道使用该库执行此操作的方法吗?
您可以在此处查看示例:http://jsfiddle.net/fzngbjcw/2/
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">My tab label 1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">My tabulation label 2</a>
<a href="#scroll-tab-3" class="mdl-layout__tab">My tabulation label 3</a>
<a href="#scroll-tab-4" class="mdl-layout__tab">My tabulation label 4</a>
<a href="#scroll-tab-5" class="mdl-layout__tab">My tabulation label 5</a>
<a href="#scroll-tab-6" class="mdl-layout__tab">My tabulation label 6</a>
</div>
</header>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel" id="scroll-tab-1">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-4">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-5">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-6">
<div class="page-content">
</div>
</section>
</main>
</div>
</body>
</html>
谢谢
我不认为 Material Design Lite has an auto-scrolling function for tabs that are outside the viewport (you may have seen that feature in a tabs demo for Material Components for the web 开发人员现在关注的是将 MDL 放入 "limited support")。
就是说,您可以在 MDL 中实现一些简单的自动滚动,当点击部分位于视口之外的选项卡时,使用一些 js 来检查点击的选项卡是否部分位于视口之外,然后触发点击适当的 MDL 滚动按钮(因此您不必重新发明滚动行为)。请记住,MDL 会动态创建一些 html 元素,因此您必须在选择这些元素之前侦听 mdl-componentupgraded
事件。以下是一个工作示例:
const tabs = document.querySelectorAll('.mdl-layout__tab')
let left, right;
document.addEventListener('mdl-componentupgraded', function(event) {
left = document.querySelector('.mdl-layout__tab-bar-left-button');
right = document.querySelector('.mdl-layout__tab-bar-right-button');
});
for (let tab of tabs) {
tab.addEventListener('click', function(event) {
let bounding = event.target.getBoundingClientRect();
if (bounding.left < 0) {
left.click();
} else if (bounding.right > window.innerWidth) {
right.click()
}
});
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">My tab label 1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">My tabulation label 2</a>
<a href="#scroll-tab-3" class="mdl-layout__tab">My tabulation label 3</a>
<a href="#scroll-tab-4" class="mdl-layout__tab">My tabulation label 4</a>
<a href="#scroll-tab-5" class="mdl-layout__tab">My tabulation label 5</a>
<a href="#scroll-tab-6" class="mdl-layout__tab">My tabulation label 6</a>
</div>
</header>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel" id="scroll-tab-1">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-4">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-5">
<div class="page-content">
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-6">
<div class="page-content">
</div>
</section>
</main>
</div>
</body>
</html>