角材料-主题(1) - 芒果文档

📌 相关文章

📜 角材料-主题(1)

📅 最后修改于: 2023-12-03 15:27:55.784000 🧑 作者: Mango

角材料-主题

简介

角材料（Material Design Lite）是一个基于谷歌的 Material Design 设计体系的前端框架，用纯 HTML、CSS 和 JS 实现了 Material Design 的效果，简单易用，可以快速构建符合 Material Design 风格的前端界面。

特点

与原生 Material Design 设计风格完全一致
支持响应式布局，可适应不同分辨率设备
提供丰富的 UI 组件和样式，使用起来非常方便
支持大部分现代浏览器，包括 IE9 及以上版本
文档和示例十分详细，易于上手

使用方法

Angle 简单易用，只需在 HTML 文件中引入相关的 CSS 和 JS 文件，即可使用 Angle 中提供的 UI 组件和样式。具体使用方法可参见官方文档：https://getmdl.io/

引入 CSS 和 JS 文件

<!-- Angle 样式文件 -->
<link rel="stylesheet" href="path/to/angle.min.css">

<!-- Angle JS 文件 -->
<script src="path/to/angle.min.js"></script>

使用 UI 组件

Angle 提供了丰富的 UI 组件和样式，包括：

Button：按钮
FAB：浮动操作按钮
Icon：图标
Layout：布局
Input：输入框
Snackbar：消息提示框
Progress：进度条
Spinner：加载动画
Table：表格
Tooltip：提示框
...

<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  Click
</button>

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="sample1">
  <label class="mdl-textfield__label" for="sample1">Text...</label>
</div>

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Title</span>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

示例

以下是一个使用 Angle 构建的简单示例，包括产品列表、侧边栏和消息提示框等组件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angle Demo</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.green-light_green.min.css">
  <link rel="stylesheet" href="path/to/angle.min.css">
</head>
<body>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <span class="mdl-layout-title">Angle Demo</span>
        <div class="mdl-layout-spacer"></div>
        <button class="mdl-button mdl-js-button mdl-button--icon">
          <i class="material-icons">notifications</i>
        </button>
        <button id="demo-menu-lower-right"
                class="mdl-button mdl-js-button mdl-button--icon">
          <i class="material-icons">more_vert</i>
        </button>
        <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
            for="demo-menu-lower-right">
          <li class="mdl-menu__item">Settings</li>
          <li class="mdl-menu__item">Help</li>
        </ul>
      </div>
    </header>

    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Products</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Product 1</a>
        <a class="mdl-navigation__link" href="#">Product 2</a>
        <a class="mdl-navigation__link" href="#">Product 3</a>
        <a class="mdl-navigation__link" href="#">Product 4</a>
      </nav>
    </div>

    <main class="mdl-layout__content">
      <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--3-col">
          <div class="mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title">
              <h2 class="mdl-card__title-text">Product 1</h2>
            </div>
            <div class="mdl-card__media">
              <img src="images/product1.png" alt="Product 1">
            </div>
            <div class="mdl-card__supporting-text">
              Description of Product 1.
            </div>
            <div class="mdl-card__actions mdl-card--border">
              <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                Buy now
              </a>
            </div>
          </div>
        </div>
        <div class="mdl-cell mdl-cell--3-col">
          <div class="mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title">
              <h2 class="mdl-card__title-text">Product 2</h2>
            </div>
            <div class="mdl-card__media">
              <img src="images/product2.png" alt="Product 2">
            </div>
            <div class="mdl-card__supporting-text">
              Description of Product 2.
            </div>
            <div class="mdl-card__actions mdl-card--border">
              <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                Buy now
              </a>
            </div>
          </div>
        </div>
        <div class="mdl-cell mdl-cell--3-col">
          <div class="mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title">
              <h2 class="mdl-card__title-text">Product 3</h2>
            </div>
            <div class="mdl-card__media">
              <img src="images/product3.png" alt="Product 3">
            </div>
            <div class="mdl-card__supporting-text">
              Description of Product 3.
            </div>
            <div class="mdl-card__actions mdl-card--border">
              <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                Buy now
              </a>
            </div>
          </div>
        </div>
        <div class="mdl-cell mdl-cell--3-col">
          <div class="mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title">
              <h2 class="mdl-card__title-text">Product 4</h2>
            </div>
            <div class="mdl-card__media">
              <img src="images/product4.png" alt="Product 4">
            </div>
            <div class="mdl-card__supporting-text">
              Description of Product 4.
            </div>
            <div class="mdl-card__actions mdl-card--border">
              <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                Buy now
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="mdl-js-snackbar mdl-snackbar">
        <div class="mdl-snackbar__text"></div>
        <button class="mdl-snackbar__action" type="button"></button>
      </div>
    </main>
  </div>

  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <script src="path/to/angle.min.js"></script>
  <script>
    /* Snackbar */
    function showSnackbar(text) {
      var snackbarContainer = document.querySelector('.mdl-js-snackbar');
      var data = {
        message: text,
        timeout: 5000
      };
      snackbarContainer.MaterialSnackbar.showSnackbar(data);
    }

    /* Card hover effect */
    var cardEls = document.querySelectorAll('.mdl-card__media');
    Array.prototype.forEach.call(cardEls, function(cardEl) {
      cardEl.addEventListener('mouseover', function() {
        this.classList.add('mdl-shadow--8dp');
      });
      cardEl.addEventListener('mouseout', function() {
        this.classList.remove('mdl-shadow--8dp');
      });
    });
  </script>
</body>
</html>

总结

Angle 是一个非常优秀的前端框架，它的学习成本低、使用简单，可以快速构建出符合 Material Design 风格的前端界面。如果你想使用 Material Design 设计风格来搭建 Web 应用程序，Angle 绝对是一个不错的选择！