AngularDart Material Design 应用布局 顶
AngularDart Material Design 应用布局 顶
自述
应用布局 应用程序布局是一个样式，指令和组件系统，当它们一起使用时，可以提供材质外观和感知应用程序的层叠关系。 它根据材料规格提供应用栏，抽屉和导航样式。
构建
样式由包提供：angular_components/app_layout / layout.scss.css。 要在Angular组件中使用这些样式，只需将其添加为Component注解中的styleUrls值即可。 建议在任何特定于组件的样式之前添加样式，以便您可以根据需要轻松覆盖样式值。
@Component(
selector: 'my-component',
templateUrl: 'my_component.html',
styleUrls: const [
'package:angular_components/app_layout/layout.scss.css',
'my_component.scss.css'])
class MyComponent {}应用栏
应用栏具有以下类，可以一起使用来创建标题：
class | 描述 |
|---|---|
material-header | 头部标题的容器元素。 |
shadow | 材质标题上的修饰符可以将阴影应用于标题。 |
dense-header | 使主要使用鼠标和键盘界面的应用栏更加密集。 |
material-header-row | 标题中的一行。 |
material-drawer-button | 行中的一个按钮位于左侧，用于导航。 |
material-header-title | 头部的标题。 |
material-spacer | 占用标题和任何导航链接之间的空间。 需要在标题之后和任何导航元素之前放置。 |
material-navigation | 导航元素将显示在头部的左侧。 仅使用锚标签，material-button内置自己的样式。 |
这是一个例子：
<header class="material-header">
<div class="material-header-row">
<material-button icon
class="material-drawer-button" (trigger)="drawer.toggle()">
<material-icon icon="menu"></material-icon>
</material-button>
<span class="material-header-title">Simple Layout</span>
<div class="material-spacer"></div>
<nav class="material-navigation">
<a>Link 1</a>
</nav>
<nav class="material-navigation">
<a>Link 2</a>
</nav>
<nav class="material-navigation">
<a>Link 3</a>
</nav>
</div>
</header>抽屉
有三种抽屉可供选择：固定性，持久性和临时性。所有抽屉都由material-drawer元件实例化。这些抽屉的实现方式不同，为每种抽屉提供最佳性能。对于抽屉外部的主要内容，将其包装在material-content元件中或具有material-content样式类的元素中。
固定性抽屉
固定性抽屉是不能关闭的抽屉。 它们完全由CSS提供。 要具有固定性抽屉，请将material属性添加到material-drawer元件。 例：
<material-drawer permanent>
<!-- Drawer content here -->
</material-drawer>
<material-content>
<!-- Content goes here -->
</material-content>持久性抽屉
持久抽屉是可以通过动作打开和关闭的抽屉，例如按钮触发器。这些抽屉重新定位内容以适应抽屉的流动。要使用持久性抽屉，请将persistent 属性添加到material-drawer元素，并将MaterialPersistentDrawerDirective添加到父级的指令列表中。
最后，将打开/关闭抽屉动作连系到抽屉。使用引用变量语法最容易完成。持久抽屉指令将其自身导出为抽屉，这允许其它操作可以轻松使用它。toggle()可用于打开/关闭抽屉。抽屉支持deferredConent指令，允许开发人员在抽屉不可见（关闭）时从页面添加/删除内容。这是一个完整的示例：
<material-drawer persistent #drawer="drawer">
<div *deferredContent>
<!-- Drawer content goes here -->
</div>
</material-drawer>
<material-content>
<header class="material-header shadow">
<div class="material-header-row">
<!-- This button will toggle (open/close) the drawer -->
<material-button icon
class="material-drawer-button" (trigger)="drawer.toggle()">
<material-icon icon="menu"></material-icon>
</material-button>
<!-- Other header info goes here -->
</div>
</header>
<div>
Content goes here.
</div>
</material-content>临时抽屉
临时抽屉是居住内容顶部的抽屉。它们由MaterialTemporaryDrawerComponent提供，它具有与其他抽屉类似的外观。要使用临时抽屉，请将temporary属性添加到material-drawer元素，并将MaterialTemporaryDrawerComponent添加到父级的指令列表中。
临时抽屉具有可选的overlay属性，可用于在抽屉打开时在非抽屉内容上方显示透明覆盖。
这是一个例子：
<material-drawer temporary #drawer="drawer" overlay>
<div *deferredContent>
Here is some drawer content.
</div>
</material-drawer>
<material-content>
<header class="material-header shadow">
<div class="material-header-row">
<material-button class="material-drawer-button" icon
(trigger)="drawer.toggle()">
<material-icon icon="menu"></material-icon>
</material-button>
<span class="material-header-title">Mobile Layout</span>
<div class="material-spacer"></div>
</div>
</header>
<!-- Content goes here -->
</material-content>在另一侧显示抽屉
所有抽屉都有一个HTML属性end，它将抽屉定位在页面的另一侧，正常（LTR的右侧，RTL的左侧）。
例子：
<material-drawer temporary end>
<!-- This drawer is going to be on the right side in LTR,
left side in RTL. -->
</material-drawer>应用栏和抽屉交互
应用栏和抽屉协同工作，为应用程序提供全面的应用布局。应用栏可以存在于material-content之内或之外。如果它在material-content之内，它将与内容一起使用，并且如果适用，则与内容重新定位。如果它位于material-content之上，则抽屉和内容将位于应用栏下方，用于固定性和持久性抽屉。
例：
<header class="material-header shadow">
<div class="material-header-row">
<material-button icon
class="material-drawer-button" (trigger)="drawer.toggle()">
<material-icon icon="menu"></material-icon>
</material-button>
<span class="material-header-title">Simple Layout</span>
<div class="material-spacer"></div>
<nav class="material-navigation">
<a>Link 1</a>
</nav>
</div>
</header>
<material-drawer persistent #drawer="drawer">
<!-- Drawer content here -->
</material-drawer>
<material-content>
<!-- Content here -->
</material-content>导航样式
抽屉中的导航元素样式也由app_layout提供。 这是使用标准material-list组件和一些特殊的CSS类来完成的。
顶级抽屉内容应该是具有可选组元素的MaterialListComponent，这些元素由元素上的group属性指定。
mat-drawer-spacer CSS类是可选的，并确保如果标题位于material-content内，则抽屉内容将从标题的底部开始。
将MaterialListItemComponents用于抽屉中的条目。对于每个组，如果您需要组上的标签，请在组元素内直接使用块元素上的label属性。
这是一个例子：
<material-drawer permanent>
<material-list *deferredContent>
<!-- Position the start of the drawer content correctly -->
<div group class="mat-drawer-spacer"></div>
<!-- Here is a group without a label -->
<div group>
<material-list-item>
<material-icon icon="inbox"></material-icon>Inbox
</material-list-item>
<material-list-item>
<material-icon icon="star"></material-icon>Star
</material-list-item>
<material-list-item>
<material-icon icon="send"></material-icon>Sent Mail
</material-list-item>
<material-list-item>
<material-icon icon="drafts"></material-icon>Drafts
</material-list-item>
</div>
<!-- This group has a label -->
<div group>
<div label>Tags</div>
<material-list-item>
<material-icon icon="star"></material-icon>Favorites
</material-list-item>
</div>
</material-list>
</material-drawer>由于样式封装，如果列表内容不是直接在抽屉中（也就是说，它包含在另一个组件中），则必须使用mixin提供上面的样式。
示例scss抽屉内容组件：
@import 'third_party/dart_src/acx/app_layout/lib/mixins';
:host {
@include mat-drawer-list-items;
}MaterialPersistentDrawerDirective
Selector: <material-drawer[persistent]>
Exported as: drawer
可以固定打开或关闭的持久抽屉。
需要在包含组件的styleUrls列表中包含packages：angular_components/app_layout / layout.scss.css。
适用于延期内容。
Inputs:
- visible bool 抽屉的可见性。
Outputs:
- visibleChange Stream<bool> 抽屉的可见性发生变化时触发事件。 注意：直到动画完成后才会触发。
MaterialTemporaryDrawerComponent
Selector: <material-drawer[temporary]>
Exported as: drawer
可以打开和关闭的临时抽屉。
适用于延期内容。
Inputs:
- visible bool 抽屉的可见性。
Outputs:
- visibleChange Stream<bool> 抽屉的可见性发生变化时触发事件。 注意：直到动画完成后才会触发。
MaterialStackableDrawerComponent
Selector: <material-drawer[stackable]>
可堆叠的临时抽屉，可以打开和关闭。
当可堆叠抽屉打开时，任何现有的可堆叠抽屉将被展开以填充背景中的屏幕。
适用于延期内容。
Inputs:
- visible bool 抽屉的可见性。
- isExpanded bool 当抽屉扩展到全屏时，“True”。
Outputs:
- visibleChange Stream<bool> 抽屉的可见性发生变化时触发事件。 注意：直到动画完成后才会触发。
MaterialDrawerExample
MaterialDrawerMobileExample
MaterialStackingDrawerExample
(adsbygoogle = window.adsbygoogle || []).push({}); function googleAdJSAtOnload() { var element = document.createElement("script"); element.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; element.async = true; document.body.appendChild(element); } if (window.addEventListener) { window.addEventListener("load", googleAdJSAtOnload, false); } else if (window.attachEvent) { window.attachEvent("onload", googleAdJSAtOnload); } else { window.onload = googleAdJSAtOnload; }