Material Design 在 UI 框架中的典型应用-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是一种由 Google 开发的 UI 设计语言，旨在提供可预测、统一的用户体验。它的设计原则强调材料（Material）的概念，即让界面元素看起来像是在一个实际存在的空间中基于物理规律进行运动和变换。这种理念与传统的扁平化设计有所不同，而在现代 UI 设计中得到了广泛的应用。

在前端开发中，Material Design 也被大量采用。各种 UI 框架都提供了 Material Design 风格的组件和样式，以方便开发者使用和定制。本文将介绍 Material Design 在 UI 框架中的典型应用和开发指南。

Material Design 的设计原则

在 Material Design 中，元素的物理行为被用作其交互和动画的基础。这些行为基于材料的特性，例如材料的厚度、表面和阴影，以及它们与其他物体的交互。设计师可以使用这些特性创建一致、可预测和美观的界面。

Material Design 的核心特性包括以下几点：

材料（Material）：实体可感知的物质，它有质感、厚度和阴影效果。
叠层（Elevation）：物质与其他物体之间的层级关系，定义阴影和高度。
运动（Motion）：元素之间的关系和交互，包括动画效果和过渡。
重点（Focus）：如何将用户关注放在重要元素上。

这些原则为 Material Design 在 UI 框架中的开发提供了明确的指导。

Material Design 在 UI 框架中的应用

现在优秀的 UI 框架都提供了对 Material Design 的支持。以下是前端常用的 Material Design 类 UI 组件库：

Material-UI：一个用于 React 的组件库，提供了 Material Design 风格的 UI 组件和样式。
Vuetify：一个用于 Vue 的组件库，提供了丰富的 Material Design 风格的组件和工具。
Angular Material：一个用于 Angular 的组件库，提供了 Material Design 风格的 UI 组件和样式。

这些组件库提供了丰富的组件和样式，以及相应的 API 文档和示例代码，可以快速搭建 Material Design 风格的应用。

Material-UI 示例

接下来我们将以 Material-UI 为例，演示如何使用 Material Design 组件在前端实现一个简单的用户信息管理系统。

安装 Material-UI

首先需要安装 Material-UI：

npm install --save @material-ui/core

创建应用

然后在 React 中创建一个表格，用于展示用户信息：

// javascriptcn.com 代码示例
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles({
  table: {
    minWidth: 650,
  },
});

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
];

export default function SimpleTable() {
  const classes = useStyles();

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat (g)</TableCell>
            <TableCell align="right">Carbs (g)</TableCell>
            <TableCell align="right">Protein (g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

在这个例子中，我们使用了 Material-UI 的 Table 组件，以及相关的样式和布局组件（例如 TableContainer）。

使用 Material Design 样式

Material-UI 提供了丰富的样式类和主题，可以方便地定制应用的外观。这里我们为表格应用一个 Material Design 风格的主题：

// javascriptcn.com 代码示例
import React from 'react';
import { makeStyles, ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles({
  table: {
    minWidth: 650,
  },
});

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
];

// 创建主题
const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#19857b',
    },
  },
});

export default function SimpleTable() {
  const classes = useStyles();

  return (
    // 应用主题
    <ThemeProvider theme={theme}>
      <TableContainer component={Paper}>
        <Table className={classes.table} aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell>Name</TableCell>
              <TableCell align="right">Calories</TableCell>
              <TableCell align="right">Fat (g)</TableCell>
              <TableCell align="right">Carbs (g)</TableCell>
              <TableCell align="right">Protein (g)</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row) => (
              <TableRow key={row.name}>
                <TableCell component="th" scope="row">
                  {row.name}
                </TableCell>
                <TableCell align="right">{row.calories}</TableCell>
                <TableCell align="right">{row.fat}</TableCell>
                <TableCell align="right">{row.carbs}</TableCell>
                <TableCell align="right">{row.protein}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </ThemeProvider>
  );
}

这里使用了 createMuiTheme 创建了一个主题，定义了应用的主色和次色，然后使用 <ThemeProvider> 组件将主题应用到了整个应用上。

应用交互和动画

Material Design 强调界面元素的交互和动画效果。以下是一个简单的例子，当鼠标滑过表格中的行时，它会变成灰色：

// javascriptcn.com 代码示例
import React, { useState } from 'react';
import { makeStyles, ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import classNames from 'classnames';

const useStyles = makeStyles((theme) => ({
  table: {
    minWidth: 650,
  },
  row: {
    transition: theme.transitions.create(['background-color'], {
      duration: theme.transitions.duration.shortest,
    }),
    '&:hover': {
      backgroundColor: theme.palette.action.hover,
    },
  },
}));

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
];

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#19857b',
    },
  },
});

export default function SimpleTable() {
  const classes = useStyles();

  return (
    <ThemeProvider theme={theme}>
      <TableContainer component={Paper}>
        <Table className={classes.table} aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell>Name</TableCell>
              <TableCell align="right">Calories</TableCell>
              <TableCell align="right">Fat (g)</TableCell>
              <TableCell align="right">Carbs (g)</TableCell>
              <TableCell align="right">Protein (g)</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row) => (
              <TableRow key={row.name} className={classNames(classes.row)}>
                <TableCell component="th" scope="row">
                  {row.name}
                </TableCell>
                <TableCell align="right">{row.calories}</TableCell>
                <TableCell align="right">{row.fat}</TableCell>
                <TableCell align="right">{row.carbs}</TableCell>
                <TableCell align="right">{row.protein}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </ThemeProvider>
  );
}

这里按照 Material-UI 的示例对样式进行了修改，增加了一个 hover 效果，用于提供更好的用户体验和反馈。

总结

Material Design 在 UI 框架中得到了广泛的应用，它的设计原则和特性为开发者提供了高度的可预测性和一致性，可以帮助我们快速创建现代化的界面和交互效果。Material-UI 是一个优秀的组件库，它为开发者提供了丰富的组件、主题和样式，可以快速搭建 Material Design 风格的应用。希望本文能够对你了解 Material Design 的应用和开发提供一些帮助。

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