npm包 @atlaskit/spinner使用教程

在前端开发中，我们常常需要使用到spinner组件进行页面的加载和提醒。而在React技术栈中，@atlaskit/spinner是一种使用方便且具有高可定制化的spinner组件，本文将详细介绍如何使用该npm包。

安装

首先，我们需要在项目中安装 @atlaskit/spinner, 可以使用npm或yarn进行安装：

npm install @atlaskit/spinner --save

或

yarn add @atlaskit/spinner

使用

完成安装后，我们就可以在项目中使用@atlaskit/spinner了。首先，需要先导入该组件：

import Spinner from '@atlaskit/spinner';

现在，我们可以在需要的地方直接调用Spinner组件，例如：

function App() {
  return (
    <div>
      <h1>加载中</h1>
      <Spinner size="large" />
    </div>
  );
}

该示例中，Spinner组件被嵌套在h1标签和div标签之间，size属性被设置为"large"，这表示spinner的大小为"large"，具体可选值为"small"、"medium"、"large"、"xlarge"，默认值为"medium"。

@atlaskit/spinner提供了很多其他的props可以定制化spinner组件，以下是常用的一些props：

<Spinner
  appearance="inherit"
  bgColor="transparent"
  delay={300}
  isCompleting={false}
  invertColor={false}
  size="medium"
/>

• appearance: Spinner的外观，可选值为 "inherit" 或 "primary"。默认为 "primary"。
• bgColor: Spinner的背景色，默认为"#fff"。
• delay: 在开始渲染Spinner前的延迟时间，以毫秒为单位，默认为0。
• isCompleting: 当Spinner完成后，将会画出一个圆圈。设置为false表示不要画出实心的圆圈。默认为false。
• invertColor: 翻转Spinner的颜色。默认为false，颜色是一个白色的圆圈在一个蓝色的背景上。
• size: Spinner的大小。可选大小为"small"、"medium"、"large"、"xlarge"。默认为"medium"。

代码演示

-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- --------------------

-------- ----- -
  ------ -
    -----
      ------------
      -------- ------------ --
    ------
  --
-

------ ------- ----

总结

通过本文，我们了解了如何在React项目中使用@atlaskit/spinner，以及该npm包提供的许多可定制化props。使用spinner组件可以提供很好的用户体验，在项目中广泛使用，同时也加深了我们对于组件化开发的理解。

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