Material Design Lite 互动版

头部 - 选项卡/Tabs

在布局的头部可以嵌入选项栏/tab-bar,内容区域可以嵌入选项面板/tab-panel。当用户点击 选项栏中的链接/tab*时,自动显示对应的选项面板:

mdl-layout__tab

在布局头部声明选项栏,需要遵循特定的HTML结构:

<header class="mdl-layout__header">
    <!--声明选项栏-->
    <div class="mdl-layout__tab-bar">
        <!--声明选项,通过href绑定对应的面板,对要激活的选项声明is-active-->
        <a href="#panel-1" class="mdl-layout__tab is-active">tab-1</a>
        <a href="#panel-2" class="mdl-layout__tab">tab-2</a>
        <a href="#panel-3" class="mdl-layout__tab">tab-3</a>
    </div>
</header>

在布局的内容区域声明选项面板,也依赖于特定的HTML结构:

<main class="mdl-layout__content">
    <!--声明选项面板,使用id属性指定锚点,对要初始显示的面板声明is-active-->
    <div class="mdl-layout__tab-panel is-active" id="panel-1">...</div>
    <div class="mdl-layout__tab-panel" id="panel-2">...</div>
    <div class="mdl-layout__tab-panel" id="panel-3">...</div>
</main>


配置选项


MDL class 说明
mdl-layout__tab-bar 声明元素为选项栏
mdl-layout__tab 声明锚点元素为选项链接
mdl-layout__tab-panel 声明元素为选项面板
is-active 将选项链接/tab或选项面板/tab-panel声明为激活
mdl-layout--fixed-tabs 将头部tab条声明为固定式
将示例代码中头部选项卡声明为fixed-tabs,看看有什么区别?