Material Design 你没见过的 4 种玩法-JavaScript中文网-JavaScript教程资源分享门户

Material Design 你没见过的 4 种玩法

Material Design 是 Google 推出的一种设计语言，它提供了一套优秀的视觉和交互设计规范，旨在创建具有吸引力、可用性和连贯性的 Web 和移动应用程序界面。在我们日常的前端开发工作中，Material Design 是一个非常值得探索和学习的主题。除了了解其基本设计原则和组件，我们还可以通过一些高级的技巧来实现更加炫酷的效果。在本文中，我们将介绍 4 种 Material Design 玩法，它们的效果华丽且有趣，能够提升我们的设计和开发技能。

一、卡片式导航

卡片式导航是一种很流行的页面设计风格，它将页面主体内容拆分成多个不同大小的卡片，用户可以通过点击卡片来跳转到不同的页面。在 Material Design 中，我们可以通过使用 Card 和 Navigation Drawer 两个组件来实现这种风格。比如下面的代码：

// www.javascriptcn.com code example
<md-card>
  <md-navigation-drawer>
    <md-nav-list>
      <md-list-item>主页</md-list-item>
      <md-list-item>分类</md-list-item>
      <md-list-item>关于我们</md-list-item>
    </md-nav-list>
  </md-navigation-drawer>
  <div layout="row" layout-wrap>
    <md-card flex="25" ng-repeat="item in items">
      <img ng-src="{{item.img}}" class="md-card-image">
      <md-card-title>
        <md-card-title-text>
          <span class="md-headline">{{item.title}}</span>
          <span class="md-subhead">{{item.subtitle}}</span>
        </md-card-title-text>
      </md-card-title>
      <md-card-content>
        {{item.content}}
      </md-card-content>
      <md-card-actions>
        <md-button>查看详情</md-button>
      </md-card-actions>
    </md-card>
  </div>
</md-card>

在这个例子中，我们使用了 md-card、md-navigation-drawer 和 md-nav-list 三个组件来实现卡片式导航的基本效果。通过设置 layout 属性和 flex 属性，我们可以实现卡片位置和大小的布局。此外，我们还可以针对不同的卡片设置不同的样式和动画效果，来增强卡片的可交互性和用户体验。

二、响应式列表

响应式列表与卡片式导航类似，也是通过排列多个元素来构建页面。不同之处在于，响应式列表需要对不同分辨率的设备进行适配，以保证页面布局的完美展示。在 Material Design 中，我们可以使用 Flex Layout 库来实现响应式列表的效果。Flex Layout 是一个强大的用于 Angular 应用程序的 CSS Flexbox 布局库，它支持各种屏幕大小和设备方向，并提供了多种样式和布局选项。

// www.javascriptcn.com code example
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap fxFlexFill>
  <div fxFlex.gt-sm="50" fxFlex.gt-md="33.33" fxFlex.gt-lg="25" fxFlex.lt-md="50" *ngFor="let item of items">
    <md-card>
      <img md-card-image src="{{item.img}}">
      <md-card-title>
        <md-card-title-text>
          <span class="md-headline">{{item.title}}</span>
        </md-card-title-text>
      </md-card-title>
      <md-card-content>
        {{item.content}}
      </md-card-content>
      <md-card-actions>
        <md-button>查看详情</md-button>
      </md-card-actions>
    </md-card>
  </div>
</div>

在这个例子中，我们使用了 Flex Layout 的 fxLayout、fxLayoutAlign 和 fxLayoutWrap 属性来设置列表的布局。通过设置 fxFlex 属性，我们可以控制列表元素的大小和位置。最后，我们使用了 *ngFor 指令和 items 数组来动态生成元素。

三、滑动抽屉

滑动抽屉是一种在移动设备上非常流行的交互模式，它可以让用户方便地访问菜单、设置和其他页面元素。在 Material Design 中，我们可以使用 Sidenav 组件来实现滑动抽屉的效果。Sidenav 组件具有一些有用的属性，如 opened、closed、mode 和 position，它们可以帮助我们调整抽屉的位置和大小。

// www.javascriptcn.com code example
<md-sidenav-container>
  <md-sidenav #sidenav mode="side" position="start">
    <h2>菜单</h2>
    <md-nav-list>
      <md-list-item>主页</md-list-item>
      <md-list-item>分类</md-list-item>
      <md-list-item>关于我们</md-list-item>
    </md-nav-list>
  </md-sidenav>
  <md-toolbar color="primary">
    <button md-icon-button (click)="sidenav.toggle()">
      <md-icon>menu</md-icon>
    </button>
    <span>Material Design 技巧</span>
  </md-toolbar>
  <div class="main-content">
    <!-- 主要内容 -->
  </div>
</md-sidenav-container>

在这个例子中，我们使用了 #sidenav 模板引用变量来引用 Sidenav 组件。通过设置 mode 属性和 position 属性，我们可以控制抽屉的位置和大小。在主要内容部分，我们可以放置任何我们需要的元素。此外，我们还使用了 md-toolbar 组件来增加页面的标题和菜单按钮。

四、滑动标签页

滑动标签页是一种常见的页面导航模式，它可以让用户方便地访问多个页面。在 Material Design 中，我们可以使用 Tabs 组件来实现滑动标签页的效果。Tabs 组件具有一些可配置的属性，如 selectedIndex、dynamicHeight、headerPosition 等，它们可以帮助我们调整标签页的样式和行为。此外，我们还可以通过使用 Icon 和 Badge 组件来增强标签页的可读性和可交互性。

<md-tabs md-dynamic-height md-border-bottom md-stretch-tabs md-center-tabs md-selected="selectedIndex">
  <md-tab label="主页" icon="home"></md-tab>
  <md-tab label="分类" icon="list"></md-tab>
  <md-tab label="设置" icon="settings"></md-tab>
  <md-tab label="消息" icon="notifications" md-badge="messages.length">{{messages.length}}</md-tab>
  <md-tab label="个人中心" icon="account_circle"></md-tab>
</md-tabs>

在这个例子中，我们使用了 md-tabs、md-tab、Icon 和 Badge 等组件来实现滑动标签页的效果。通过设置 md-dynamic-height、md-stretch-tabs、md-center-tabs 等属性，我们可以控制标签页的布局和行为。通过设置 icon 属性和 md-badge 属性，我们可以增加图标和徽章来提高标签页的可交互性和可读性。最后，我们通过 selectedIndex 属性来控制默认选中的标签页。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d6bc28a941bf7134c970f2

Material Design 你没见过的 4 种玩法

接着读