在现代的前端开发中，组件库的使用已经变得越来越普遍。而 @pluralsight/ps-design-system-emptystate 这个 npm 包则提供了一个简单易用的空状态组件，旨在帮助开发者更加轻松高效地处理空状态的展示。
安装
使用 npm 安装 @pluralsight/ps-design-system-emptystate：
npm install @pluralsight/ps-design-system-emptystate
或使用 yarn：
yarn add @pluralsight/ps-design-system-emptystate
使用方法
基本用法
在你的代码中引入 @pluralsight/ps-design-system-emptystate 后，你可以使用 EmptyState 组件来渲染空状态。
-- -------------------- ---- -------
------ - ---------- - ---- -------------------------------------------
-------- ----- -
------ -
-----
----------- --
------
--
-EmptyState 组件提供了丰富的 prop 来方便你自定义空状态的展示效果，比如传入 title、subtitle 等属性。
<EmptyState
title="暂无数据"
subtitle="请稍后再试"
image={<img src="empty.svg" />}
/>由于 @pluralsight/ps-design-system-emptystate 使用了 Pluralsight Design System 的样式，所以你可能需要先引入相关的 CSS 文件。
import "@pluralsight/ps-design-system-core/css/white.css"; import "@pluralsight/ps-design-system-core/css/colors.css"; import "@pluralsight/ps-design-system-core/css/type.css"; import "@pluralsight/ps-design-system-empty-state/css/index.css";
使用自定义组件
当然，EmptyState 的自定义依旧不止于此，除了一些基本的 prop 之外，EmptyState 组件还支持自定义右侧的 CTA（Call To Action） 组件，为用户提供更加丰富的选择。
-- -------------------- ---- -------
------ - ---------- - ---- -------------------------------------------
------ - ------ - ---- ---------------------------------------
-------- ----------- -
------ ------- ----------------------------------
-
-------- ----- -
------ -
-----
-----------
------------
----------- --------------- ---
--------------- ---
--
------
--
-其中 cta 属性支持传入一个 React 组件，EmptyState 将会把组件渲染到空状态的右侧。
使用主题
在 @pluralsight/ps-design-system-emptystate 中，我们可以轻松且灵活地使用主题。主题定义了空状态组件的样式、颜色、字体等等。
首先，你需要定义一个主题对象：
-- -------------------- ---- -------
----- ------- - -
----------- -
------ -
------ ---------
--
--------- -
------ ---------
-
-
--然后，把主题对象传入 EmtpyState 组件的 theme 属性中即可：
-- -------------------- ---- -------
------ - ------------- - ---- --------------------------------------
------ - ---------- - ---- -------------------------------------------
----- ------- - -
----------- -
------ -
------ ---------
--
--------- -
------ ---------
-
-
--
-------- ----- -
------ -
-------------- ----------------
----------- ------------ ---------------- --
----------------
--
-使用 Props 混合
最后，@pluralsight/ps-design-system-emptystate 还提供了使用 Props 混合的方式帮助你更加深入地定制组件样式。
-- -------------------- ---- -------
------ - ---------- - ---- -------------------------------------------
-------- ----- -
------ -
-----
-----------
------------
----------------
----------- --------------- ---
------------ -----------------------------------
-------- ---------------- --------- --
-- ----- --
-------
----------- -
------ -
--------- --------
------- ------
--
---- -
-------- -------------
-
-
--
--
------
--
-在上面的例子中，我们通过给 EmptyState 组件传入 psds 属性，进而使用 image、cta 两个子组件的样式设定来定制组件。
总结
@pluralsight/ps-design-system-emptystate 是一个功能强大、简单易用的空状态组件库，提供了丰富的 Features 和 Props，可以让开发者在空状态处理上变得事半功倍。
在使用时，我们可以根据具体的情况，选择基本用法、自定义 CTAs，甚至是使用主题和 props 混合等方式。
总之，到现在为止，你应该已经掌握了如何使用 @pluralsight/ps-design-system-emptystate 这个库了，现在就请放手一搏，给你的项目添加一些漂亮的空状态吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f793d0e7116197505561b1c