@ignavia/earl 是一个轻量级的 JavaScript 库，用于在网页上创建基于移动端最佳实践的可伸缩和可扩展的 UI 组件。它提供了一个灵活的架构，使得我们可以快速地构建出美观、高度可定制和易于维护的移动端 UI 组件。
安装
npm 安装 @ignavia/earl 最为简单。在命令行中执行以下代码即可：
npm install @ignavia/earl
使用
安装完成后，可以将其引入项目中的任何文件中：
import Earl from '@ignavia/earl';
然后就可以在你的项目中直接使用 Earl 提供的各种功能。
例子: 列表组件
下面是个简单的例子，展示了如何构建一个名为 List 的复用组件。这个组件由 ListItem 和 Card 组件组成：
-- -------------------- ---- -------
-- -----------
------ ----- ---- --------
------ - ----------- ----- ---- - ---- ---------------
------ ------- -------- --------------- -
------ -
----- --------------------
----- -----------------------------------------
----- -----------------------------------------------------
-------
--
-
----- ------ - -------------------
----- -
---------------- -------
-------- ---
------------- --
------------ -------
------------ --
------------- ---
--
------ -
--------- ---
----------- -------
------------- --
--
------------ -
--------- ---
------ -------
--
---
-- -------
------ ----- ---- --------
------ - ----------- ---- - ---- ---------------
------ ------- -------- ----------- -
------ ----- --------------------------------------------
-
----- ------ - -------------------
----- -
---------------- -------
-------- ---
------------- --
------------ -------
-------------- ----
------------- --
------------- -
------ --
------- --
--
------------- ---
--
---
-- -------
------ ----- ---- --------
------ - ----------- ---- - ---- ---------------
------ ---- ---- ---------
------ -------- ---- -------------
------ ------- -------- ----------- -
------ -
----- -------------------------
------
--------- ------------ ------- ------------------ ------ ------ ---- ----- ---------- --- ------- --
--------- --------------- ---------------- ---------- ------ - --------- --
--------- -------------- ---------------- ----------- ---------- ----------- --
-------
-------
--
-
----- ------ - -------------------
---------- -
---------------- ----------
-------- ---
--
---API
Earl.config(options)
配置 Earl 正确的配置项，options 可以有以下属性：
debug: 是否输出日志，默认为false。
Earl.createUI(Klass, options)
创建 UI 类，Klass 是您希望继承 Earl UI 类的 JavaScript 类，而 options 定义了 UI 类所需的其他属性。
-- -------------------- ---- -------
------ - --------- - ---- --------
------ ---- ---- ----------------
----- ----------- ------- --------- --
-------------------------- -
----- --- -- -----------
------- ----------- ----------
------- -
----- - ---------------- ------ --
------- - ------ ------ ----------- ------ --
--
------ -
------ ----------------------
--
---Earl.PropTypes
一个为所有生成的 UI 类定义的属性类型对象。
Earl.createStyleSheet(styles)
创建样式表，它与 React Native 的 StyleSheet API 紧密相似。此 API 所返回的样式表对象被用于提供 Earl UI 类使用的样式。
import Earl from '@ignavia/earl';
const styles = Earl.createStyleSheet({
root: { backgroundColor: '#fff' },
button: { color: 'red', fontWeight: 'bold' },
});结语
@ignavia/earl 是一个非常强大、灵活的 JavaScript 库，它可以帮助我们创建出漂亮和高度可定制的移动端 UI 组件。该库提供的功能非常丰富，可以让我们快速地构建出适用于各种场景的 UI 组件。需要注意的是，仅仅是入门级别使用并熟练调配库内函数是相当不够的，它还有更深的了解需求，我们应该要保持学习的状态，直到技术娴熟到能够把它用于实际项目中为止。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/149030