npm 包 cardboard-list 使用教程

阅读时长 5 分钟读完

cardboard-list 是一个基于 React 的可自定义列表组件,提供了多种列表样式和任务项的支持。本文将介绍 cardboard-list 的基本用法和高级配置。

安装

在安装 cardboard-list 之前,请确保你安装了 Node.js 和 npm。

使用 npm 安装 cardboard-list:

基本使用

引入

引入 cardboard-list 组件:

渲染列表

创建列表数据:

渲染列表:

自定义样式

可以自定义列表样式:

任务项

每个任务项都有自己的状态和样式配置:

-- -------------------- ---- -------
----- ----- - -
  -
    --- --
    ----- ----- ---
    ------ --------------
    ------ - ----------- ------- ------- ---- ----- ----- --
  --
  -
    --- --
    ----- ----- ---
    ------ ------------
    ------ - ----------- ---------- ------- ---- ----- ----- --
  --
  -
    --- --
    ----- ----- ---
    ------ ----------
    ------ - ----------- ---------- ------- ---- ----- ----- --
  --
--
展开代码

渲染任务项:

-- -------------------- ---- -------
--------------
  -------------
  ------------------ -- -
    ----
      -------------
      --------
        -------- -------
        ----------- ----------------------
        ------- ------------------
      --
    -
      -----------
    ------
  --
--
展开代码

高级配置

支持自定义任务项状态

拖动任务项

通过 React-beautiful-dnd 支持任务项的拖动:

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

---------------- ----------------------
  ---------- -----------------------------
    ----------- -- -
      ---- ---------------------------- ------------------------
        --------------
          -------------
          ------------------ ------ -- -
            ---------- ------------- --------------------- --------------
              ----------- -- -
                ----
                  -----------------------
                  ----------------------------
                  -----------------------------
                -
                  -----------
                ------
              --
            ------------
          --
        --
      ------
    --
  ------------
------------------
展开代码

总结

cardboard-list 是一个开源的可自定义列表组件。本文介绍了基本的用法和高级配置,可以帮助你更好地使用和配置该组件。希望这篇文章对你有所帮助。

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

纠错
反馈

纠错反馈