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; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等

文本倾斜:<em></em> <i></i> <!-- 工作里尽量使用em,原因同strong -->

44720
来自专栏ytkah

微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现

先来看看今天的整体思路: 进入分组管理页面-->点击新建分组新建 进入到未分组页面基本操作 进入到已建分组里面底部菜单栏操作-->从名片夹中添加进行操作。 ? ...

38140
来自专栏非著名程序员

基础篇章:关于 React Native 之 Touchable 系列组件的讲解

? 提示:前天文章,重发,不想看的请略过,上次失误忘了加效果图 (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经...

22590
来自专栏一个小程序员的成长笔记

HTML5新增属性学习笔记

1、form属性 表单内的从属元素,可以写在表单外部。可以通过指定元素的form属性来声明元素所属表单。form的属性值为表单的id。 1 <form id="...

46290
来自专栏Guangdong Qi

# 微信小程序开发之-事件触发控件

26730
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:自定义 C1WijMenu

C1Wijmo 全部的控件是完全可定制的,并且可以根据你自己的需求定制他们的界面外观。 我准备使用C1Menu演示这一点。 让我们从向控件应用自定义主题开始。 ...

18850
来自专栏张戈的专栏

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

换成 Begin 主题之后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果。 与之配套的是 font awesome 4 menus 这个...

46450
来自专栏coding for love

CSS入门4-引入CSS

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

9030
来自专栏大数据钻研

能用HTML/CSS解决的问题就不要使用JS

为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例...

44440
来自专栏24K纯开源

Qt Style Sheet实践(二):组合框QComboBox的定制

导读      组合框是一个重要且应用广泛的组件,一般由两个子组件组成:文本下拉单部分和按钮部分。在许多既需要用户选择、又需要用户手动输入的应用场景下,组合框能...

75070

扫码关注云+社区

领取腾讯云代金券