如何使用unpkg作为MDC CSS文件和%s文件的存储区在web应用程序上添加材料设计选项卡
unpkg是一个开源的前端资源加载器，可以用于在web应用程序中添加材料设计选项卡的MDC CSS文件和%s文件的存储区。下面是如何使用unpkg的步骤：
- 首先，确保你的web应用程序中已经引入了Material Components for the Web（MDC）的库文件。你可以通过以下方式引入：
<link rel="stylesheet" href="https://unpkg.com/@material/tab-bar/dist/mdc.tab-bar.css">
<script src="https://unpkg.com/@material/tab-bar/dist/mdc.tab-bar.js"></script>- 接下来，你需要在HTML文件中创建一个容器来放置选项卡。例如：
<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">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Tab 1</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>
<button class="mdc-tab" role="tab" aria-selected="false">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Tab 2</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="false">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Tab 3</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>- 然后，你需要初始化MDC选项卡组件。在JavaScript文件中添加以下代码：
const tabBar = new mdc.tabBar.MDCTabBar(document.querySelector('.mdc-tab-bar'));- 最后，你可以根据需要添加事件监听器来处理选项卡的切换等操作。例如：
tabBar.listen('MDCTabBar:activated', function(event) {
const tabs = document.querySelectorAll('.mdc-tab');
tabs.forEach(function(tab) {
tab.classList.remove('mdc-tab--active');
});
event.detail.tab.classList.add('mdc-tab--active');
});这样，你就成功地在web应用程序上添加了材料设计选项卡。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云对象存储（COS）：用于存储和管理静态资源文件，如CSS和JS文件。了解更多信息，请访问：腾讯云对象存储（COS）
请注意，以上答案中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商，以遵守问题要求。
相关·内容
1回答
材料设计web MDCTab:交互事件在activateTab之后不会发出
javascript、html、material-design、material-components、material-components-web
我正在用这个
创建选项卡栏
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script sr
浏览 0提问于2018-10-14得票数 2
2回答
材料组件网络- MDCTab -如何在javascript中设置活动选项卡
material-components-web
我有两个标签(TAB1和TAB2)。活动选项卡是TAB1 (mdc- tab --活动)。我希望使用javascript将active选项卡设置为TAB2。
谢谢。
我的代码：
<div class='mdc-tab-bar' role='tablist' data-mdc-auto-init='MDCTabBar'>
<div class='mdc-tab-scroller'>
<div class='mdc-tab-scroller__scro
浏览 0提问于2018-10-08得票数 3
回答已采纳
1回答
Material.io选项卡:选项卡内容放在哪里？
javascript、html、css、material-design
我试图在一个项目中使用material.io选项卡，无论如何，html结构并没有很好的文档化：
<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">
<
浏览 7提问于2021-08-04得票数 3
回答已采纳
2回答
如何使用javascript在实质性用户界面中取消注册/取消事件绑定
javascript、jquery、material-design
嗨，我对un-registering/unbinding材料部件有问题
注意:在我的实际项目中，每次动态加载数据后，我就调用initializeMaterialComponents
问题：I需要对以前的事件进行un-registering/unbind，这样才不会触发3次(+)，从而提供更好的解决方案
下面是我的问题selection triggered 3 times
function initializeMaterialComponents(){
// console.log(mdc);
var selectBox = new mdc.select.MDCSelect
浏览 0提问于2021-02-13得票数 5
1回答
如何在输入聚焦时删除标记
javascript、jquery、tags
我想删除基于backspace keypress的标记
输入字段需要始终关注它，所以我不能从容器中移除输入字段。
问题：我想根据每个backspace keypress删除标记，但是焦点总是input元素
$(function(){
$('#input').focus();
})
#tagsWrapper{
width: 400px;
height: auto;
border: 1px solid #989898;
padding: 3px;
}
#tagsWrapper input{
width:100%;
border:
浏览 0提问于2021-03-06得票数 1
回答已采纳
2回答
Material Design Web1.0:如何在卡片中居中显示(--full-bleed)按钮文本？
html、css、button、material-design
我正在尝试2019年3月的Material Design Web 1.0。
在使用和时，当按钮被设置为mdc-card__actions--full-bleed时，我发现没有办法使按钮文本居中。所以我的问题是：
在本例中，如何正确地将按钮文本居中？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Security-Policy" content
浏览 0提问于2019-05-03得票数 1
2回答
如何在非Node.js应用程序中包含Material.io概述的文本字段
javascript、html、material-design、material-components-web、mdc-components
我在我的非Node.js应用程序中使用了材料设计。我需要在我的项目中使用。Material.io网站显示了一些组件的JavaScript代码，但没有为其他组件显示。如何在HTML项目中添加概述的textfield组件？
下面是我的代码：
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" />
浏览 1提问于2018-06-26得票数 4
回答已采纳
2回答
材料设计Web1.0卡内网格布局挂在左边
html、css、material-design
我正在试验具有以下代码的材料设计Web1.0：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com; script-src 'unsafe-inline' https:
浏览 0提问于2019-05-03得票数 1
回答已采纳
1回答
为什么MDCSelect:变更不适用于材料设计的javascript
javascript、html、jquery、material-design、mdc-components
为什么在追加所有选项之前调用MDCSelect:change不起作用？
MDCSelect:change正在工作，当我将它放在列表之后时，但是 UI看起来不太好。
问题：如何使MDCSelect:change在不损害ui外观的情况下工作。
当我洗牌这两行的代码时，它工作得很好。
$('#select_dropdown').html(usersStr);
initializeSelect();
使用上面的代码，当您在任何地方或简单地单击外部时，select UI看起来都不太好。
为了获得更好的视图，我在这里创建了代码：
var selectBoxMap = {};
func
浏览 2提问于2021-03-18得票数 7
1回答
为什么物料组件中的第二个输入文本字段不起作用？
angular、material-design、material-components-web
我已经在我的网站中使用了材料组件输入。我创建了两个相同的输入。以下是我的所有代码： <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<body>
<div class="information">
<label class="mdc-text-field mdc-text-field--o
浏览 21提问于2020-12-23得票数 0
回答已采纳
1回答
材料组件菜单的` `setAbsolutePosition()`没有正常工作？
drop-down-menu、material-design、absolute、material-components-web、mdc-components
我试图使用中的menu.setAbsolutePosition(0, 100);方法，将"mdc-menu“相对(下面)定位到我的顶部栏上的一个溢出按钮，但它似乎没有做太多事情(实际上使元素停留在屏幕之外)，不管我设置了什么值。
我创建了一个代码片段来说明这个问题：
<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"&g
浏览 1提问于2018-11-26得票数 2
5回答
如何激活材料设计JS？
javascript、material-design、cdn
import {MDCTextField} from '@material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
@import "@material/textfield/mdc-text-field";
<head>
<link href="https://unpkg.com/material-components-web@latest/dist/material-c
浏览 7提问于2019-12-29得票数 7
1回答
Material.io -一些材料设计库的组件没有正确地呈现
javascript、css、material-design
我导入了库的css和js文件，但由于某种原因，即使下面的按钮组件显示正确，文本字段也不能正常工作。
看起来JS根本没有被应用
Codepen:
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<style>@import url("https://unpkg.com/material-components-web@latest/dist/material-compo
浏览 2提问于2018-06-23得票数 1
回答已采纳
1回答
MDC:如何对一个细胞中心？
html、css、mdc-components
它是用写的，“默认情况下网格是对齐的。”
但是，下面的代码不对单元格进行居中：
<html>
<head>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-w
浏览 0提问于2019-05-05得票数 0
回答已采纳
1回答
Flex项不会缩小小于其内容。
html、css、flexbox、ellipsis
我有一个元素列表，我给用户展示了一个图标和两个按钮。到目前为止还不错，但我希望这个列表能够扩展到移动设备，并在必要时缩小。
当列表中的文本太长时，它会阻止页面收缩，并强制显示水平滚动条。我试图实现的是，长的描述文本被缩小，显示在结尾的3个点(省略号)。
容器元素显示为flex，而文本容器具有flex-收缩1，但它仍然拒绝收缩和溢出。
有人能指点我这里做错了什么吗？为什么.mdc-list-item拒绝收缩？是否有任何方法迫使它缩小时，必要时只使用CSS？
.mdc-list-item {
flex-shrink: 1;
min-width: 0;
overflow: hidde
浏览 2提问于2017-11-23得票数 6
回答已采纳
1回答
我的div文本隐藏在英雄形象后面
html、css、material-design
const topAppBarElement = document.querySelector('#head');
const topAppBar = new MDCTopAppBar(topAppBarElement);
const tabBar = new MDCTabBar(document.querySelector('#list'));
$(function() {
$('a[href*=#]').on('click', function(e)
浏览 0提问于2018-11-05得票数 0
回答已采纳
1回答
MDC -无法初始化文本输入
javascript、material-components、mdc-components、material-components-web
我正在用MDC设置一个文本输入，但是当我用JS初始化时，它出现了这个错误： ? 这是我的代码： // MDC
const mdc = window.mdc;
// Auto init
mdc.autoInit();
$('.mdc-text-fields').each((index, element) => {
const textField = mdc.textField.MDCTextField.attachTo($(element)[0]);
}); <script src="https://cdnjs.cloudflare.com/
浏览 41提问于2019-12-12得票数 0
回答已采纳
2回答
在HTMLButtonElement错误时显示不是函数
javascript、html、mdc
我正在跟踪，它工作得很好。我从中提取了代码，并将其放入本地HTML文件中，并添加了JS。但是，当我在本地运行它时，它不起作用。控制台输出以下消息：
Uncaught TypeError: dialogLogin.show is not a function at HTMLButtonElement.<anonymous>
我的HTML和JS代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<m
浏览 1提问于2019-02-22得票数 0
回答已采纳
2回答
如何使用CDN创建可弃用的Web抽屉？
javascript、material-design
我正试图在Material Design中创建一个利用CDN的网页可解雇抽屉，我认为我只是一个小的JavaScript问题，远离它工作。
我在JavaScript中尝试了很多东西，但都不是很到位。下面是我最好的尝试。我只是在我电脑的本地存储器上测试了一下，我不认为这有什么不同。
<head>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<
浏览 20提问于2019-07-08得票数 3
回答已采纳
2回答
永久抽屉旁边的MDC不能正常工作
html、css、mdc-components
我正在尝试有一个永久的抽屉(而不是在顶部应用程序栏下面)，以及网站的可滚动部分，在顶部有一个标准的顶部应用程序栏，就像。
这一切都很好，直到我开始滚动页面，顶部的应用程序栏根本不会移动，不像我期望它基于演示所做的那样。
(我在没有本地托管任何内容的情况下完成了所有这些工作，所以它应该可以在没有任何本地文件的情况下工作。)
以下是我的代码，简化后保存在一个html文件中：
<!DOCTYPE html>
<html lang="en">
<head>
<title style="display: none"&g
浏览 52提问于2020-11-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
