介绍
@anthor/atomic-library 是一个基于 React 和 styled-components 的原子库，提供一系列基础的样式组件和原子类，支持快速构建页面。
本文将详细介绍如何使用 @anthor/atomic-library，包括如何安装和使用，以及如何使用其中的组件和原子类。
安装
通过 npm 安装：
npm install @anthor/atomic-library
或者通过 yarn 安装：
yarn add @anthor/atomic-library
使用
在你的项目中导入 @anthor/atomic-library，然后即可使用其中的组件和原子类。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- ----- ---- - ---- -------------------------
-------- ----- -
------ -
----- ---------------------- ------------------- ----------------------- ---------------
---- ----------- ------------
----- ------------ ----------------- -------------------
------ -----------------------
-------
------
-------
--
-
------ ------- ----组件
Box
Box 组件是一个基础的容器组件，提供 padding、margin、width、height、background 等样式属性。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --- - ---- -------------------------
-------- ----- -
------ -
---- ----------- ---------- ----------- ------------ ----------------- --
--
-
------ ------- ----Flex
Flex 组件是一个基础的弹性容器组件，提供 flexDirection、alignItems、justifyContent 等样式属性。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- ---- - ---- -------------------------
-------- ----- -
------ -
----- ---------------------- ------------------- ----------------------- ---------------
---- ------------
--------- ---------------------------
------
-------
--
-
------ ------- ----Text
Text 组件是一个基础的文本组件，提供 fontSize、fontWeight、textAlign 等样式属性。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------------
-------- ----- -
------ -
----- ------------ ----------------- -------------------
------ -----------------------
-------
--
-
------ ------- ----原子类
除了组件，@anthor/atomic-library 还提供了一系列原子类，可以直接在元素上使用这些类来快速设置样式。
p
设置元素的 padding。
-- -------------------- ---- -------
------ ----- ---- --------
------ - - - ---- -------------------------
-------- ----- -
------ -
---- ----------------------- -----------------------------
--
-
------ ------- ----m
设置元素的 margin。
-- -------------------- ---- -------
------ ----- ---- --------
------ - - - ---- -------------------------
-------- ----- -
------ -
---- ----------------------- -----------------------------
--
-
------ ------- ----w
设置元素的宽度。
-- -------------------- ---- -------
------ ----- ---- --------
------ - - - ---- -------------------------
-------- ----- -
------ -
---- --------------------------- -----------------------------
--
-
------ ------- ----h
设置元素的高度。
-- -------------------- ---- -------
------ ----- ---- --------
------ - - - ---- -------------------------
-------- ----- -
------ -
---- ------------------------- -----------------------------
--
-
------ ------- ----bg
设置元素的背景颜色。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -- - ---- -------------------------
-------- ----- -
------ -
---- ----------------------------- -----------------------------
--
-
------ ------- ----flex
设置元素的 flex 相关样式。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------------
-------- ----- -
------ -
---- --------------------------------------------------------
---- -----------------
--------- ---------------------------
------
------
--
-
------ ------- ----结语
@anthor/atomic-library 提供了一系列基础的样式组件和原子类，可以帮助开发者更快速地构建页面。本文详细介绍了如何使用 @anthor/atomic-library，包括如何安装和使用，以及如何使用其中的组件和原子类。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/106002