npm 包 @atlaskit/progress-indicator 使用教程

阅读时长 5 分钟读完

前言

@atlaskit/progress-indicator 是一个 React 组件库,用于实现进度条。本篇文章将为大家详细介绍该组件的使用方法。

安装

@atlaskit/progress-indicator 可通过 npm 包管理工具进行安装:

使用

导入组件

通过 import 语句导入组件:

API

@atlaskit/progress-indicator 提供了多种选项来自定义组件表现,下面我们将详细介绍这些选项:

  • currentStep 用来确定当前进度条的进度百分比。

  • steps 用来设置进度条的步骤/阶段。它应该是一个包含多个 step 对象的数组,如下所示:

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

每个 step 对象包含 three 个属性:

  • id,用来唯一标识一个 step。

  • label,该 step 的名称,将在进度条的下端显示。

  • percentage,确定该 step 在进度条中的位置,以百分比表示。

  • skeleton,默认为 false,通过设置该值为 true,可以设置为骨架屏状态。

示例

下面我们使用示例代码来演示如何使用@atlaskit/progress-indicator 组件。

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

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

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

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

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

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

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

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

该示例代码定义了一个 ProgressIndicator 组件实例,使其显示当前步骤以及进度条。同时定义了一个 App 组件,并在该组件中渲染了 ProgressIndicator 组件,以及两个按钮用于控制“next”和“back”操作。

总结

@atlaskit/progress-indicator 为我们提供了丰富的 API,使得我们可以灵活地实现各种形式的进度条。我们可以通过在项目中引入该组件库来轻松实现进度条的功能,同时也可以根据自己的需求自定义其表现。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5f6d60baa9b7065299ccb980

纠错
反馈