使用 Material Design 中的标签栏 html/css/js
[英]Use the tab bar html/css/js from Material Design
问题描述
I'm trying to use get this tab bar from Material Components: https://material.io/develop/web/components/tabs/tab-bar/
我正在尝试使用从 Material Components 获取这个标签栏： https : //material.io/develop/web/components/tabs/tab-bar/
I'm having trouble following the installation steps.我在执行安装步骤时遇到问题。 This is what I have so far:这是我到目前为止：
tab.html: tab.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>
tab.css: tab.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'));
I want it to look like the demo, but right now it looks like something completely different.我希望它看起来像演示，但现在它看起来完全不同。 I was wondering if someone could break down these steps more for me as I'm extremely confused.我想知道是否有人可以为我分解这些步骤，因为我非常困惑。 Thanks.谢谢。 All help is appreciated.感谢所有帮助。
This is what it looks like: enter image description here这是它的样子：在此处输入图像描述
I wanted it to look like this: enter image description here我希望它看起来像这样：在此处输入图像描述
2 个解决方案
解决方案1
0 2019-03-15 17:17:53
Are you trying to run SCSS in the browser?你想在浏览器中运行 SCSS 吗？ If so, this is the problem.如果是这样，这就是问题所在。 The "CSS" portion of your code is actually SCSS, a nested syntax that needs to be compiled down to regular CSS in order for the browser to be able to read it.代码的“CSS”部分实际上是 SCSS，它是一种嵌套语法，需要将其编译为常规 CSS，以便浏览器能够读取它。 For example:例如：
SCSS (Browser cannot read) SCSS（浏览器无法读取）
#app {
main {
margin-top: 65px;
}
}
CSS (Works fine) CSS（工作正常）
#app main {
margin-top: 65px;
}
Material should provide plain CSS version for you, otherwise you will need to use a compiler. Material 应该为您提供纯 CSS 版本，否则您将需要使用编译器。
解决方案2
0 2019-03-19 15:29:30
To add on Simran his answer:添加 Simran 他的回答：
I see no <script src="app.js"></script> in your HTML.我在您的 HTML 中没有看到<script src="app.js"></script> 。
You need to compile the code below using babel and include the output file in your HTML.您需要使用 babel 编译以下代码并将输出文件包含在您的 HTML 中。
import {MDCTabBar} from '@material/tab-bar';
const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));
If it is unclear how you do this re-read the Getting started如果不清楚如何执行此操作，请重新阅读入门
Step 3: Webpack with ES2015 is about compiling JavaScript using Babel第 3 步：Webpack with ES2015 是关于使用 Babel 编译 JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.