文章/答案/技术大牛

发布

社区首页 >问答首页 >材料设计顶层应用栏Javascript不起作用

问材料设计顶层应用栏Javascript不起作用
EN

Stack Overflow用户

提问于 2019-07-19 03:40:55

回答 1查看 291关注 0票数 0

我不熟悉javascript导入，也不熟悉像webpack和巴别塔这样的东西。所以，如果我的术语是错误的，我道歉。

我正在尝试让Google的Material Design在一个测试项目中工作，但我似乎无法让它工作。

css工作起来很简单，但是实例化就是不需要。

我有一个按钮，只是为了确保它是工作的，我可以让它工作，只是没有顶部应用程序栏。

import {MDCTopAppBar} from '@material/top-app-bar';

import {MDCRipple} from '@material/ripple';

const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));

// Instantiation
const topAppBarElement = document.querySelector('.mdc-top-app-bar');
const topAppBar = new MDCTopAppBar(topAppBarElement);

<header class="mdc-top-app-bar mdc-top-app-bar--fixed">
        <div class="mdc-top-app-bar__row">
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
            <span class="mdc-top-app-bar__title">Project</span>
            </section>
        </div>
    </header>

我的代码是直接从documentation复制的，但是菜单图标下面有一条线，并且动画没有显示出来。

有没有人能让它正常工作？如果是这样的话，是怎么做的？

我知道我不能从codepen上的本地文件导入东西，但是this is what my Top App Bar looks like

javascript

webpack

material-design

babeljs

回答 1

Stack Overflow用户

发布于 2019-07-19 22:35:56

如果有人发现了这一点，并想知道该怎么做。google文档中的代码正在使用而不是。

在他们的演示页面上，他们有正确的代码。

更改此设置：

<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>

如下所示：

<button class="mdc-icon-button material-icons mdc-top-app-bar__navigation-icon">menu</button>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57101605

复制

相似问题

问材料设计顶层应用栏Javascript不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问材料设计顶层应用栏Javascript不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问材料设计顶层应用栏Javascript不起作用
EN