时间戳

首页 > 解决方案 > 使用 Material Design 中的标签栏 html/css/js

javascript - 使用 Material Design 中的标签栏 html/css/js

问题描述

我正在尝试使用从 Material Components 获取此标签栏：https ://material.io/develop/web/components/tabs/tab-bar/

我在执行安装步骤时遇到问题。这是我到目前为止所拥有的：

选项卡.html：

<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="tab.css">

  </head>
  <body>
    <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 class="mdc-tab__text-label">Favorites2</span>
                <span class="mdc-tab__text-label">Favorites3</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>

  </body>
</html>

选项卡.css：

<style lang="scss"> 

@import "@material/tab-bar/mdc-tab-bar";
@import "@material/tab-scroller/mdc-tab-scroller";
@import "@material/tab-indicator/mdc-tab-indicator";
@import "@material/tab/mdc-tab";
body{ 
  background-color: blue; 
}
#app 
{ 
main 
{ 
margin-top:65px; 
} 
div.mdc-layout-app--main-container{ display: block !important;} 
div.mdc-layout-app 
{ 
max-width: 1000px; 
background-color: white !important; 
margin: 0 auto; 
} 
header.mdc-top-app-bar 
{ 
max-width: 1000px; 
} 
} 
</style>

import {MDCTabBar} from '@material/tab-bar';

const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));

我希望它看起来像演示，但现在它看起来完全不同。我想知道是否有人可以为我分解这些步骤，因为我非常困惑。谢谢。感谢所有帮助。

这是它的样子：在此处输入图像描述

我希望它看起来像这样：在此处输入图像描述

标签： javascripthtmlcssmaterial-design

解决方案

要添加 Simran 他的答案：

我<script src="app.js"></script>在你的 HTML 中没有看到。

您需要使用 babel 编译下面的代码并将输出文件包含在您的 HTML 中。

import {MDCTabBar} from '@material/tab-bar';

const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));

如果不清楚您是如何做到这一点的，请重新阅读入门指南

第 3 步：使用 ES2015 的 Webpack 是关于使用 Babel 编译 JavaScript

推荐阅读