Fatal编程技术网
  • tabs/
  • Tabs 材质设计lite导航选项卡自动滑动

Tabs 材质设计lite导航选项卡自动滑动

tabs

Tabs 材质设计lite导航选项卡自动滑动,tabs,material-design,material-design-lite,Tabs,Material Design,Material Design Lite,我使用这个库来显示“滚动标签”。 我的问题是，当我选择一个位于箭头（右或左）下的选项卡时，该选项卡选择得很好，但我们无法读取所有单词。在本机应用程序上，我看到选项卡栏会自动滚动以显示完整的选定选项卡。 你知道用那个图书馆做这件事的方法吗 您可以在此处看到一个示例： 谢谢你我不认为有一个自动滚动功能，用于在视口之外的选项卡（你可能已经在选项卡演示中看到了这一功能，开发人员现在正专注于此，将MDL置于“有限支持”中） 也就是说，当使用一些js单击部分位于视口之外的选项卡时，可以在MDL中实现一些

我使用这个库来显示“滚动标签”。 我的问题是，当我选择一个位于箭头（右或左）下的选项卡时，该选项卡选择得很好，但我们无法读取所有单词。在本机应用程序上，我看到选项卡栏会自动滚动以显示完整的选定选项卡。 你知道用那个图书馆做这件事的方法吗

您可以在此处看到一个示例：
谢谢你

我不认为有一个自动滚动功能，用于在视口之外的选项卡（你可能已经在选项卡演示中看到了这一功能，开发人员现在正专注于此，将MDL置于“有限支持”中）

也就是说，当使用一些js单击部分位于视口之外的选项卡时，可以在MDL中实现一些简单的自动滚动，以检查单击的选项卡是否部分位于视口之外，然后只触发单击相应的MDL滚动按钮（因此不必重新创建滚动行为）。请记住，MDL动态创建一些html元素，因此在选择这些元素之前，您必须先侦听
MDL componentupgraded
事件。以下是一个工作示例：

const tabs=document.queryselectoral（'.mdl-layout__tab'））
让左，右；
document.addEventListener（'mdl-componentupgraded'，函数（事件）{
left=document.querySelector（'.mdl-layout_uu-tab-bar-left-button'）；
右=document.querySelector（“.mdl-layout_uu选项卡栏-右键”）；
});
对于（让选项卡中的选项卡）{
tab.addEventListener（'click'，函数（事件）{
让bounding=event.target.getBoundingClientRect（）；
if（bounding.left<0）{
左键单击（）；
}else if（bounding.right>window.innerWidth）{
右键。单击（）
}
});
}


<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>