如何创建一个类似Angular Material 2网站的导航栏？

文章/答案/技术大牛

发布

2回答

html、css、angular、angular-material、navbar

我正在尝试学习与Angular相结合的材料，以便以后可以将材料设计模式应用到我的应用程序中。在浏览之后，我找到了适用于Angular的Material2，并通过NPM将其安装到我的机器上。该网站描述了它拥有的所有组件，我首先尝试从导航组件开始。在摆弄了一下之后，我发现组件没有响应。经过一些研究，我发现flex layout可以使组件与Material2结合使用。我在Mate

浏览 34提问于2019-02-25得票数 3

1回答

Anguar2-Material2:想在工具栏下面设置一个固定的sidenav

angular、angular-material

我正在学习angular2和material2。我试图使小网站，有简单的工具栏和固定的sidenav。我已经创建了工具栏，但是sidenav并没有像预期的那样工作。<md-toolbar color="primary"></md-toolbar&g

浏览 0提问于2016-05-13得票数 3

2回答

md-sidenav-container在角度材质2中不工作

angular、angular-material2

我已经安装了angular-material2 2，这是package.json条目然后在我的app.module.ts中导入import { MaterialModule } from '@angular/material';@NgModule({

浏览 27提问于2017-06-29得票数 1

回答已采纳

1回答

Angular:使用material2创建类似于导航栏的引导

html、twitter-bootstrap、angular、angular-material

我翻阅了material2的文档，想找出如何创建一个像bootstrap提供的那样的导航栏的细节，但是没有找到。有人能分享一下使用material2创建navbar的文档吗？我的bootstrap示例代码如下。我想创建这个导航栏，自动转换为汉堡上的<

浏览 1提问于2017-10-10得票数 0

1回答

Angular Material 2-网站全屏渲染不正确

html、css、angular、angular-material2

我正在尝试略微重写我的应用程序。我过去只使用Sidenavs创建应用程序，但现在我不需要在我正在工作的网站中使用它。问题是，我似乎找不到一种方法来移除sidenav容器，而不破坏背景图像，导航栏粘滞等。我似乎无法在material.angular.io上找到任何类似的东西或可以修复这个问题。如果有人知道如何解决此问题，请告诉我文档/我可以更改哪些内容来解决此问题。使用Mat-Sidenav Containe

浏览 0提问于2018-05-18得票数 1

2回答

Angular Material:将sidenav添加到几页？

angular、angular-material

我想我的网站页面的一个子集，有侧栏导航。因此，主页和其他页面不会有任何侧边栏，但站点的一个部分会有侧边栏。在该部分，用户可以单击侧栏菜单项以导航到该部分中的不同页面。这与Angular Material在其主站点上使用的结构相同。如果你去home page，就没有侧边栏了。但是，如果您转到component

浏览 37提问于2019-12-14得票数 0

回答已采纳

1回答

从整个angular的应用程序创建angular库

angular、angular-material2

我在angular 5应用程序上工作，它使用material模块作为UI界面，我为我所有的项目创建模板，我希望项目使用这个应用程序作为库，我对模板侧边栏的常规部分的更改，导航栏更新库并应用于所有项目。这是一个好的模式吗？如果可能，如何在angular 5中做到这一点呢？

浏览 0提问于2018-05-05得票数 0

1回答

侧边内容栏材料ui

reactjs、user-interface、material-ui

我对创建一个内容导航栏很感兴趣，类似于这个 ? 这张截图是从Material UI的网站上截取的，但我在库中找不到与它相似的组件。有没有办法重新利用App Bar的Drawer来复制它？

浏览 17提问于2020-01-21得票数 0

3回答

无法获取指向路由的角度路由

angular、angular-routing

我正在构建我的angular 7应用程序的模板，但路由并不像预期的那样工作。我在编译或运行时都没有收到错误，但是当我尝试显示我想要路由到的组件的简单内容时，什么也没有显示。地址栏显示它认为它在正确的路线上，但没有显示该组件的我的html。我看过一堆不同的教程，所以我不明白到底是怎么回事。谢谢!

浏览 0提问于2019-02-25得票数 0

1回答

Angular Dart菜单栏

angular-dart

我想实现一个类似于Google Docs中使用的菜单栏。(即:文件、编辑、带下拉菜单的视图、多级、键盘导航、快捷键等)我注意到“菜单栏”是用AngularJS实现的(这里：https://material.angularjs.org/latest/demo/menuBar)在Angular Dart中有类似的东西吗？如果不是，那么让这段代码停下来<e

浏览 16提问于2019-10-15得票数 0

3回答

是否像Bootstrap一样存在物料UI上的默认导航栏？

reactjs、navbar、material-ui、react-bootstrap、appbar

我发现很难在Material UI上创建带有菜单的导航栏。我读过它的AppBar文档。但是，他们似乎没有提供这个功能。1)物料UI AppBar2) React Bootstrap导航条如何像React Bootstrap那样在Material UI上创建导航栏菜单？

浏览 2提问于2017-09-05得票数 12

1回答

使用角材料的SideNav

angular、angular-material、sidenav

我正在创建sideNav的角度应用，我是使用角材料。，问题是， import {MatSidenavModule} from '@angular/material/sidenav'; import {MatButtonModule} from '@an

浏览 1提问于2018-04-09得票数 1

2回答

尝试在角5中以模式显示用户登录

angular、angular5

我想将登录组件html文件显示为主页中的模式：app-⇩ about footeruser login这是我的app.components.html<app-home></app-home> <router-outl

浏览 1提问于2018-02-06得票数 1

回答已采纳

1回答

React Material* Ui响应式抽屉*

reactjs、material-ui

我使用React material UI Appbar组件创建了一个响应式导航栏。如果屏幕较大，则在导航栏中显示选项卡。如果屏幕大小为中等或更小，它将使用material UI responsive抽屉在导航栏的正下方左侧显示导航栏(主页、关于等)。如何将响应材料UI抽屉移到右侧？https://material</

浏览 51提问于2021-06-13得票数 0

回答已采纳

3回答

如何制作角度材质的水平导航栏

angularjs、navbar、angular-material

这是我第一次使用Angular Material，我只是想问你们能不能帮我在使用Angular Material的项目中添加一个水平导航栏？我在找工作时遇到了麻烦。提前谢谢你！保持超赞:)

浏览 0提问于2015-08-06得票数 14

回答已采纳

1回答

角材质导航条未对齐

angular

我遵循这些文章来设置我的环境：然后，我用新的导航组件替换了默认app.component.html文件的内容。@import "~@angular/material/prebuilt-theme

浏览 0提问于2018-07-10得票数 1

回答已采纳

2回答

我应该如何在MatDrawer和MatDrawerContainer中导入app.module.ts？角9

html、angular、typescript、web、angular-material

当我点击工具栏图标时，我正试图使用棱角的材料来打开侧导航。在我试着打开导航栏之前，一切都很好，我得到了错误："@angular/material": &

浏览 2提问于2020-07-05得票数 5

回答已采纳

2回答

角度材质导航栏未渲染

javascript、angularjs、web、material-design、angular-material

我正在尝试使用角度材料设计，目前正在导航工作。我在官方网站上尝试了这些示例，但是导航栏没有渲染。我也试着寻找解决方案，但没有一个有帮助。device-width, initial-scale=1"> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material

浏览 20提问于2016-08-15得票数 0

2回答

带angular* 2和bootstrap 4的响应式导航栏*

twitter-bootstrap、angular、responsive-design

我正在尝试建立一个web应用程序与顶部的导航栏与一些选项。然而，当在移动设备上查看网站时，导航栏缩小，并出现一个图标，供用户按下以显示选项。与本网站中显示的行为完全相同我试过bootstrap 4的例子，但是它们在angular 2上似乎不能很好地工作(

浏览 4提问于2017-01-19得票数 3

2回答

material.angular.io (网站)的存储库在哪里？

angular、angular-material2

在的官方网站上，它说但是存储库在哪里(我指的是网站的源代码)？我想是在吉顿，但没能找到。

浏览 3提问于2017-07-09得票数 3

回答已采纳

点击加载更多