Material UI 框架中的 Skeleton 组件详解

class Skeleton,骨架屏

Material UI 提供了许多实用的组件来帮助开发者构建现代化、响应式的应用程序界面。Skeleton 组件是 Material UI 中用于页面或组件加载时的占位符组件,它能让用户在等待数据加载时,仍能看到一个界面结构的“骨架”版本,从而提高用户体验。

本文将详细介绍 Material UI 中 Skeleton 组件的使用,覆盖所有属性、方法及如何结合其他组件使用,并提供多个详细的代码示例,展示如何将 Skeleton 应用于不同场景。

1. 什么是 Skeleton?

Skeleton 是一种 UI 占位符,通常在数据加载时显示。通过 Skeleton,我们可以模仿实际 UI 元素的形状,如文本、图片、按钮等,让用户了解界面结构。

它的常见应用场景包括:

  • 加载列表数据时。
  • 加载用户头像、产品图片或图表时。
  • 加载整个页面或部分内容时。

2. 安装 Material UI

在开始使用 Skeleton 之前,确保你已安装 Material UI 相关包:

npm install @mui/material @emotion/react @emotion/styled

3. Skeleton 基本用法

Skeleton 组件可以通过设置 variant 属性,定义占位元素的形状,比如 textrectangularcircular

3.1 文本骨架

文本的占位符骨架可以使用 variant="text",它会模仿一段文本的形状。

示例代码:

import React from 'react';
import Skeleton from '@mui/material/Skeleton';

function TextSkeletonExample() {
  return (
    <div>
      <h3>文本骨架示例</h3>
      <Skeleton variant="text" width={200} />
    </div>
  );
}

export default TextSkeletonExample;

在该示例中,Skeleton 模拟了一个宽度为 200px 的文本骨架。在实际应用中,这样的骨架可以代替真实的文本,直到数据加载完毕。

3.2 矩形骨架

通过 variant="rectangular",我们可以创建一个矩形的骨架元素,适合用于图片、卡片等区域的占位符。

示例代码:

import React from 'react';
import Skeleton from '@mui/material/Skeleton';

function RectangularSkeletonExample() {
  return (
    <div>
      <h3>矩形骨架示例</h3>
      <Skeleton variant="rectangular" width={300} height={200} />
    </div>
  );
}

export default RectangularSkeletonExample;

3.3 圆形骨架

圆形骨架通过 variant="circular" 可以创建一个圆形占位符,常用于头像、按钮等圆形元素的占位显示。

示例代码:

import React from 'react';
import Skeleton from '@mui/material/Skeleton';

function CircularSkeletonExample() {
  return (
    <div>
      <h3>圆形骨架示例</h3>
      <Skeleton variant="circular" width={100} height={100} />
    </div>
  );
}

export default CircularSkeletonExample;

该示例展示了一个 100px 的圆形骨架,通常用于图片或头像的占位。

4. Skeleton 组件的主要属性

  • variant:决定骨架的形状,可选值有:

    • text:文本形状,占据一个或多个文本行。
    • rectangular:矩形形状,用于图片或其他矩形元素。
    • circular:圆形,用于头像、图标等圆形元素。
  • animation:设置骨架动画的类型。可选值有:

    • pulse(默认):脉冲动画效果。
    • wave:波浪动画效果。
    • false:无动画效果。
  • widthheight:设置骨架的宽度和高度。

  • sx:用于应用自定义样式的 Skeleton 组件。

示例:自定义骨架宽度和高度

<Skeleton variant="rectangular" width={250} height={150} />

示例:波浪动画效果

<Skeleton variant="text" width={250} animation="wave" />

示例:禁用动画

<Skeleton variant="text" width={250} animation={false} />

5. 动态加载时结合 Skeleton 使用

Skeleton 组件常用于在异步加载数据时为用户提供反馈。通过结合 useStateuseEffect,我们可以模拟数据加载的场景,并在加载完成后显示真实内容。

示例:加载用户信息时显示骨架

import React, { useState, useEffect } from 'react';
import Skeleton from '@mui/material/Skeleton';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';

function UserProfile() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setLoading(false), 3000); // 模拟 3 秒的加载时间
  }, []);

  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      {loading ? (
        <Skeleton variant="circular" width={50} height={50} />
      ) : (
        <Avatar alt="User Avatar" src="/path/to/avatar.jpg" />
      )}
      <div style={{ marginLeft: 16 }}>
        {loading ? (
          <Skeleton variant="text" width={200} />
        ) : (
          <Typography variant="h6">John Doe</Typography>
        )}
      </div>
    </div>
  );
}

export default UserProfile;

示例说明:

  • 在该示例中,Skeleton 作为头像和用户名的占位符,在数据加载的过程中显示骨架。
  • 使用了 useStateuseEffect 来控制加载状态,模拟了一个 3 秒后加载完成的场景。

6. 与其他组件结合使用

Skeleton 通常结合其他 Material UI 组件使用,如 CardListAvatar 等。下面展示一个结合 Card 组件的使用场景。

示例:卡片内容骨架

import React, { useState, useEffect } from 'react';
import Skeleton from '@mui/material/Skeleton';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';

function CardSkeleton() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setLoading(false), 3000); // 模拟 3 秒的加载时间
  }, []);

  return (
    <Card>
      <CardContent>
        {loading ? (
          <>
            <Skeleton variant="text" width={200} />
            <Skeleton variant="rectangular" width={300} height={200} />
            <Skeleton variant="text" width={150} />
          </>
        ) : (
          <>
            <Typography variant="h5">标题</Typography>
            <img src="/path/to/image.jpg" alt="content" width={300} height={200} />
            <Typography variant="body1">这是加载完成后的内容。</Typography>
          </>
        )}
      </CardContent>
    </Card>
  );
}

export default CardSkeleton;

示例说明:

  • 该示例展示了一个典型的卡片组件,包含标题、图片和文本。
  • 在加载过程中,Skeleton 占位符会显示一个模拟的标题和图片区域。
  • 加载完成后,实际内容替换骨架。

7. 动态列表的骨架加载

当我们加载一个列表数据时,可以为每个列表项显示一个 Skeleton 占位符。这个模式在分页加载或无穷加载中尤为常见。

示例:加载列表时显示骨架

import React, { useState, useEffect } from 'react';
import Skeleton from '@mui/material/Skeleton';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';

function ListSkeleton() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      setData([
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ]);
      setLoading(false);
    }, 3000);
  }, []);

  return (
    <List>
      {loading ? (
        Array.from(new Array(3)).map((_, index) => (
          <ListItem key={index}>
            <Skeleton variant="text" width={200} />
          </ListItem>
        ))
      ) : (
        data.map((item) => (
          <ListItem key={item.id}>
            <ListItemText

 primary={item.name} />
          </ListItem>
        ))
      )}
    </List>
  );
}

export default ListSkeleton;

8. 总结

Skeleton 组件在 Material UI 中扮演着非常重要的角色,特别是在需要显示占位符和数据加载的过程中。通过使用不同的 variant 和自定义样式,开发者可以创建灵活多样的占位骨架,以提供更好的用户体验。在实际开发中,结合其他 Material UI 组件,如 CardList 等,可以轻松地为复杂的界面提供过渡效果,让用户感觉更加流畅和直观。

通过这篇文章,希望你能更好地理解 Skeleton 组件的使用,并将其应用到项目中,提升应用的用户体验。

chat评论区
评论列表
menu