纸质材料 UI 的 Javascript 模块介绍

概览

纸质材料 UI 是一种基于响应式设计的前端框架。它属于 Google 旗下的 Material Design 框架，为开发人员提供了丰富的 UI 组件和风格以及具有高度一致性的设计语言。

Javascript 是纸质材料 UI 的核心之一，它为纸质材料提供了交互和表现的能力。Javascript 模块主要包括纸质材料的各种 UI 组件，配合 Javascript 的事件监听和动画效果可以提供更加灵活多样的用户体验。

本文将为开发人员介绍纸质材料 UI Javascript 模块，并提供相应的代码示例和使用说明。

纸质材料 UI Javascript 模块

纸质材料 UI Javascript 模块主要包括以下部分：

• 按钮（Button）
• 卡片（Card）
• 图标（Icons）
• 输入框（Input）
• 菜单（Menu）
• 对话框（Dialog）
• 底部菜单（Bottom Sheet）
• 抽屉（Drawer）
• 表格（Table）
• 标签（Tabs）
• 滚动条（Scrollbar）
• 多媒体（Media）
• 进度指示器（Progress）

按钮

按钮是一个纸质材料 UI 的重要组件，它用于响应用户动作。按钮可以是标准按钮、图标按钮、或者悬浮按钮。纸质材料 UI 提供了三种主题样式的按钮：扁平、凸起和轮廓式。

示例代码

<button class="mdc-button mdc-button--raised">
  Raised Button
</button>

示例效果

卡片

卡片是一个常用于展示内容的 UI 元素。它通常包括图片、标题、文本和操作按钮等元素。纸质材料 UI 的卡片组件提供了多种排版样式和主题色彩。

示例代码

<div class="mdc-card">
  <img src="image.jpg" class="mdc-card__media" alt="sample image">
  <div class="mdc-card__primary-action">
    <div class="mdc-card__headline">Title</div>
    <div class="mdc-card__body">Content</div>
  </div>
  <div class="mdc-card__actions">
    <button class="mdc-button mdc-button--raised">Button 1</button>
    <button class="mdc-button">Button 2</button>
  </div>
</div>

示例效果

图标

图标是纸质材料 UI 的一个核心组件，它用于表达状态，指示方向，或者作为一个链接。纸质材料 UI 的图标组件提供了一组标准的图标，同时也支持自定义 SVG 图标。

示例代码

<i class="material-icons">shopping_cart</i>

示例效果

输入框

输入框用于用户输入文本，它可以是单行或者多行的文本框。纸质材料 UI 的输入框组件支持多种文本验证和格式化，同时也支持和图标、标签等组件一起使用。

示例代码

<label class="mdc-text-field mdc-text-field--outlined">
  <input type="text" class="mdc-text-field__input" required>
  <span class="mdc-notched-outline">
    <span class="mdc-notched-outline__leading"></span>
    <span class="mdc-notched-outline__notch">
      <span class="mdc-floating-label">Label</span>
    </span>
    <span class="mdc-notched-outline__trailing"></span>
  </span>
</label>

示例效果

菜单

菜单是一个常用的 UI 元素，它用于展示多个操作选项。纸质材料 UI 的菜单组件支持多种排版样式和主题色彩。它可以是一个简单的下拉菜单，或者支持分组的复杂菜单。

示例代码

<button class="mdc-button mdc-button--outlined" id="demo-menu">
  Show Menu
</button>

<div class="mdc-menu mdc-menu-surface" aria-hidden="true">
  <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="verticle">
    <li class="mdc-list-item" role="menuitem" tabindex="0">
      Option 1
    </li>
    <li class="mdc-list-item" role="menuitem" tabindex="0">
      Option 2
    </li>
    <li class="mdc-list-item" role="menuitem" tabindex="0">
      Option 3
    </li>
  </ul>
</div>

<script>
  const menu = new mdc.menu.MDCMenu(document.querySelector('.mdc-menu'));
  const button = document.querySelector('#demo-menu');
  button.addEventListener('click', () => menu.open = true);
  menu.listen('MDCMenu:selected', (event) => {
    console.log(`Selected option at index ${event.detail.index}`);
  });
</script>

示例效果

对话框

对话框用于向用户展示重要的内容或者接收用户反馈等操作。纸质材料 UI 的对话框组件支持多种排版样式和主题色彩。它可以是简单的模态窗口，或者支持额外操作的复杂对话框。

示例代码

<button class="mdc-button mdc-button--outlined" id="demo-dialog">
  Show Dialog
</button>

<div class="mdc-dialog" role="alertdialog" aria-modal="true" aria-labelledby="demo-dialog-title" aria-describedby="demo-dialog-description">
  <div class="mdc-dialog__container">
    <div class="mdc-dialog__surface">
      <h2 class="mdc-dialog__title" id="demo-dialog-title">Title</h2>
      <div class="mdc-dialog__content" id="demo-dialog-content">
        Content
      </div>
      <footer class="mdc-dialog__actions">
        <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
          Cancel
        </button>
        <button type="button" class="mdc-button mdc-dialog__button mdc-dialog__button--default" data-mdc-dialog-action="confirm">
          Confirm
        </button>
      </footer>
    </div>
  </div>
  <div class="mdc-dialog__scrim"></div>
</div>

<script>
  const dialog = new mdc.dialog.MDCDialog(document.querySelector('.mdc-dialog'));
  const button = document.querySelector('#demo-dialog');
  button.addEventListener('click', () => dialog.open());
  dialog.listen('MDCDialog:opened', () => console.log('Dialog opened'));
  dialog.listen('MDCDialog:closing', (event) => console.log(`Dialog closing due to ${event.detail.action}`));
</script>

示例效果

底部菜单

底部菜单用于展示底部固定的操作按钮。纸质材料 UI 的底部菜单组件支持多种排版样式和主题色彩。它可以是一个简单的固定按钮，或者支持多个操作的复杂菜单。

示例代码

<div class="mdc-menu-surface--fixed">
  <div class="mdc-bottom-navigation">
    <nav class="mdc-bottom-navigation__items">
      <a class="mdc-bottom-navigation__item mdc-bottom-navigation__item--active" href="#">
        <i class="material-icons mdc-bottom-navigation__icon">home</i>
        <span class="mdc-bottom-navigation__label">Home</span>
      </a>
      <a class="mdc-bottom-navigation__item" href="#">
        <i class="material-icons mdc-bottom-navigation__icon">favorite_border</i>
        <span class="mdc-bottom-navigation__label">Favorites</span>
      </a>
      <a class="mdc-bottom-navigation__item" href="#">
        <i class="material-icons mdc-bottom-navigation__icon">bookmark_border</i>
        <span class="mdc-bottom-navigation__label">Bookmarks</span>
      </a>
      <a class="mdc-bottom-navigation__item" href="#">
        <i class="material-icons mdc-bottom-navigation__icon">settings</i>
        <span class="mdc-bottom-navigation__label">Settings</span>
      </a>
    </nav>
  </div>
</div>

示例效果

抽屉

抽屉用于从屏幕边缘滑动到中间，展示额外的操作按钮或者面板等内容。纸质材料 UI 的抽屉组件支持多种排版样式和主题色彩。它可以是简单的操作按钮，或者支持面板的复杂抽屉。

示例代码

<div class="mdc-drawer">
  <div class="mdc-drawer__content">
    Main content
  </div>
  <nav class="mdc-drawer__drawer">
    <header class="mdc-drawer__header">
      <div class="mdc-drawer__header-content">
        Header
      </div>
    </header>
    <nav class="mdc-drawer__nav">
      <a class="mdc-list-item mdc-list-item--activated" href="#">
        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
      </a>
      <a class="mdc-list-item" href="#">
        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star
      </a>
    </nav>
  </nav>
</div>

<script>
  const drawer = new mdc.drawer.MDCDrawer(document.querySelector('.mdc-drawer'));
  const button = document.querySelector('#demo-drawer');
  button.addEventListener('click', () => drawer.open = true);
  drawer.listen('MDCDrawer:opened', () => console.log('Drawer opened'));
  drawer.listen('MDCDrawer:closing', () => console.log('Drawer closing'));
</script>

示例效果

表格

表格用于展示数据，它可以是简单的单元格，也可以是带有分页、排序、或者过滤功能的滚动表格。纸质材料 UI 的表格支持多种排版样式和主题色彩。

示例代码

<table class="mdc-data-table">
  <thead>
    <tr class="mdc-data-table__header-row">
      <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Column 1</th>
      <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Column 2</th>
      <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Column 3</th>
    </tr>
  </thead>
  <tbody class="mdc-data-table__content">
    <tr class="mdc-data-table__row">
      <td class="mdc-data-table__cell">Cell 1</td>
      <td class="mdc-data-table__cell">Cell 2</td>
      <td class="mdc-data-table__cell">Cell 3</td>
    </tr>
    <tr class="mdc-data-table__row">
      <td class="mdc-data-table__cell">Cell 4</td>
      <td class="mdc-data-table__cell">Cell 5</td>
      <td class="mdc-data-table__cell">Cell 6</td>
    </tr>
  </tbody>
</table>

示例效果

标签

标签用于展示文本的分类和筛选。纸质材料 UI 的标签支持多种排版样式和主题色彩。

示例代码

<div class="mdc-chip-set">
  <div class="mdc-chip" tabindex="0">
    <div class="mdc-chip__ripple"></div>
    <span class="mdc-chip__text">Tag 1</span>
  </div>
  <div class="mdc-chip" tabindex="0">
    <div class="mdc-chip__ripple"></div>
    <span class="mdc-chip__text">Tag 2</span>
  </div>
</div>

示例效果

滚动条

滚动条用于展示内容的滚动情况。纸质材料 UI 的滚动条支持多种排版样式和主题色彩。

示例代码

<div class="mdc-card__content" style="height: 120px; overflow: auto" id="demo-scrollbar">
  <p>Scroll content ... </p>
</div>

<script>
  const scrollBar = new mdc.scrollbar.MDCScrollBar(document.querySelector('#demo-scrollbar'));
</script>

示例效果

多媒体

多媒体用于展示音频、视频等媒体内容。纸质材料 UI 的多媒体组件支持多种格式的媒体文件，并提供多种交互功能。

示例代码

<div class="mdc-card__media">
  <div class="mdc-card__media-content" style="background-image: url(image.jpg)"></div>
  <div class="mdc-card__media-overlay">
  <button class="mdc-icon-button material-icons mdc-card__media-overlay__icon" aria-label="Play">
    play_circle_outline
  </button>
  </div>
</div>

示例效果

进度指示器

进度指示器用于展示任务的进度和状态。纸质材料 UI 的进度指示器组件支持多种排版样式和主题色彩。

示例代码

<div class="mdc-linear-progress" role="progressbar" aria-label="Progress" tabindex="0">
  <div class="mdc-linear-progress__buffering-dots"></div>
  <div class="mdc-linear-progress__buffer"></div>
  <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
    <span class="mdc-linear-progress__bar-inner"></span>
  </div>
  <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
    <span class="mdc-linear-progress__bar-inner"></span>
  </div>
</div>

<script>
  const progress = new mdc.linearProgress.MDCLinearProgress(document.querySelector('.mdc-linear-progress'));
  setInterval(() => {
    progress.progress = Math.min(progress.progress + Math.random() / 10, 1);
    progress.buffer = Math.min(progress.buffer + Math.random() / 10, 1);
  }, 500);
</script>

示例效果

结论

本文介绍了纸质材料 UI 的 Javascript 模块，并提供了相应的代码示例和使用说明。开发人员可以根据自己的需求选择相应的组件和样式，来实现丰富多样的用户体验。

参考

• Material Design
• Material Components for the web