Browsed by
分类:导航

Sidenav

Sidenav

[toc] 概述 OVERVIEW Angular Material提供了两组组件,用来添加在主内容旁边的可折叠的侧边内容(通常用于导航)。这些是侧边导航和抽屉组件。 Angular Material provides two sets of components designed to add collapsible side content (often navigation, though it can be any content) alongside some primary content. These are the sidenav and drawer components. 侧边导航组件用于添加全屏应用的侧边内容。设置侧边导航需要使用三个组件:内容和侧边导航的结构化容器<mat-sidenav-container>,表示主要内容的<mat-sidenav-content>,表示已添加的侧边内容的<mat-sidenav>。 The sidenav components are designed to add side content to a fullscreen app. To set up a sidenav we use three components: <mat-sidenav-container> which acts as a structural container for our content and sidena…

阅读全文 Read More

Toolbar

Toolbar

[toc] 概述 OVERVIEW <mat-toolbar>是头部,标题,或者动作的一个容器。 <mat-toolbar> is a container for headers, titles, or actions. 单行 Single row 在大多数情况下,工具栏位于你应用的顶部,包括应用标题在内只有一行。 In the most situations, a toolbar will be placed at the top of your application and will only have a single row that includes the title of your application. <mat-toolbar> <span>My Application</span> </mat-toolbar> 多行 Multiple rows Material Design规范描述了工具栏也可以有多行。在<mat-toolbar>中使用<mat-toolbar-row>元素,可以在在Angular Material创建多行的工具栏。 The Material Design specifications describe that toolbars can also have multiple rows. Creating toolbars with multiple rows i…

阅读全文 Read More

Menu

Menu

[toc] 概述 OVERVIEW <mat-menu>是一个包含选项列表的浮动面板。 <mat-menu> is a floating panel containing list of options. <mat-menu>元素本身不渲染任何东西。菜单通过matMenuTriggerFor指令添加到应用中并打开。 By itself, the <mat-menu> element does not render anything. The menu is attached to and opened via application of the matMenuTriggerFor directive: <mat-menu #appMenu=”matMenu”> <button mat-menu-item> Settings </button> <button mat-menu-item> Help </button> </mat-menu> <button mat-icon-button [matMenuTriggerFor]=”appMenu”> <mat-icon>more_vert</mat-icon> </button> 编码切换菜单 Toggling the menu programmatically menu暴露了一个打…

阅读全文 Read More