npm 包 @anthor/atomic-library 使用教程

介绍

@anthor/atomic-library 是一个基于 React 和 styled-components 的原子库，提供一系列基础的样式组件和原子类，支持快速构建页面。

本文将详细介绍如何使用 @anthor/atomic-library，包括如何安装和使用，以及如何使用其中的组件和原子类。

安装

通过 npm 安装：

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

或者通过 yarn 安装：

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

使用

在你的项目中导入 @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

阅读全文

猜你喜欢

  • npm 包 tower 使用教程

    在前端开发中，npm 包的使用是必不可少的一部分。其中，tower 是一个具有深度的 npm 包，可以帮助前端开发者更加方便的搭建或维护一个高质量的应用程序。本文将详细介绍如何使用 tower 包，并...

    5 年前
  • npm 包 random 使用教程

    简介 在 JavaScript 中，我们经常需要生成随机数。有时候，我们只需要生成一个简单的整数随机数，但有时候我们需要生成更复杂的随机数据，例如随机字符串、随机颜色和随机日期等。

    5 年前
  • npm 包 pump-promise 使用教程

    pump-promise 是一个流和 Promise 结合的使用包，可以帮助我们简化复杂的流传输。 安装 --- ------- ------------使用 基础用法 我们使用 pump-promi...

    5 年前
  • npm 包 @coorpacademy/baucis 使用教程

    前言 在现代的前端开发中，我们经常需要构建应用程序的后端服务。而为了更加高效地进行开发，使用 RESTful API 是一个不错的选择。但是，为了使用 RESTful API，我们需要构建一个 Ser...

    5 年前
  • npm 包 ejsify 使用教程

    在前端开发中，我们常常会使用到模板引擎来简化我们的工作，ejs 就是其中的一种比较流行的模板引擎。而使用 ejsify 这个 npm 包，可以让我们更加便捷地使用 ejs。

    5 年前
  • npm 包 rework-assets 使用教程

    简介 前端工程化的大趋势下，使用各类 npm 包实现自动化构建已成为现代前端开发的必要技能之一。而 rework-assets 就是一种基于 rework CSS 预处理器的 npm 包，它允许我们在...

    5 年前
  • npm 包 resrcify 使用教程

    前言 随着前端技术不断发展，现在的前端开发已经不再只是简单的“页面美化”，而是需要熟练掌握 JavaScript 等技术，并能够运用现有工具来快速地开发出高质量的 Web 项目。

    5 年前
  • npm 包 npm-less 使用教程

    介绍 npm-less 是一个 npm 包，它为 Less 编译器提供了一个插件，让你能够方便地在 JavaScript 中使用 Less。使用 npm-less，你可以在你的项目中对 Less 文件...

    5 年前
  • npm 包 bower-less 使用教程

    简介 在前端开发中，我们常常需要使用 CSS 预处理器来管理样式。而 Less 是一种比较流行的 CSS 预处理器之一，它可以方便地定义变量、函数、嵌套等特性，提高开发效率和样式模块化。

    5 年前
  • npm包metalsmith-json-to-files使用教程

    在前端开发中，我们常常需要将一些数据以文件的形式存储到本地或者上传到服务器。metalsmith-json-to-files是一款npm包，它可以帮助我们将json数据转换为文件格式，方便我们进行存储...

    5 年前
  • npm 包 metalsmith-permalinks-uid 使用教程

    背景介绍 在开发一个静态网站时，我们经常会使用 Metalsmith 来处理静态文件。Metalsmith 是一个类似于 Gulp 和 Grunt 的静态网站生成器。

    5 年前
  • npm 包 segmentio-integration 使用教程

    前言 Segment 是一家第三方数据平台，可以帮助开发者收集和管理用户行为数据，并将数据发送给各种第三方工具，如 Google Analytics、Mixpanel、Amplitude 等等。

    5 年前
  • npm 包 mongoose-slug-unique 使用教程

    Node.js 开发中，Mongoose 是一种非常流行的 MongoDB 数据库 ORM（Object-Relational Mapping）框架。在许多项目中，我们需要使用 slug 字段来记录模...

    5 年前
  • NPM 包 Contentful-SDK-Core 使用教程

    简介 Contentful-SDK-Core 是 Contentful 公司提供的一款 Node.js 的 SDK 核心包，用于快速地构建 Contentful API 的 Node.js 客户端工具...

    5 年前
  • npm 包 contentful-resolve-response 使用教程

    前言 在现代 Web 开发中，前后端分离的架构已经成为一种趋势。而前端真正紧密联系着后端的是 API 接口。不同的 API 实现方式也不同。有些接口返回的数据是类似于 JSON 的格式，有些则是一些奇...

    5 年前
  • npm 包 @google-cloud/trace-agent 使用教程

    前言 在现代互联网应用开发中，性能监控是一个必不可少的环节，也是开发人员在应用上线后必须面对的挑战之一。Google Cloud Platform 提供了一个优秀的性能监控工具，叫做 Stackdri...

    5 年前
  • npm包@frctl/fractal使用教程

    随着前端技术的日新月异，Web开发以及跨平台应用开发的需求成为了选择。这时需要前端框架的存在，能够减少开发者的工作量同时保证代码的质量。其中，@frctl/fractal成为了其中一个优秀的前端框架。

    5 年前
  • npm 包 @frctl/consolidate 使用教程

    在前端开发中，我们经常会使用到模板引擎来进行视图层的构建。而 @frctl/consolidate 就是一个支持多个模板引擎的集成包，可以让我们更加方便地在项目中使用不同的模板引擎。

    5 年前
  • npm 包 @iobroker/testing 使用教程

    简介 @iobroker/testing 是一个特定于 ioBroker 的 npm 包，它提供了一组测试工具，用于在开发过程中对 ioBroker 插件进行测试。

    5 年前
  • npm 包 harmonyhubws 使用教程

    前言 在现代化的智能家居系统中，Hub 控制器是不可或缺的设备。而 Harmony Hub 是业内最有名的智能遥控器制造商 Logitech 提供的产品之一，通过它用户可以通过手机、平板、电脑等多种方...

    5 年前

相关推荐

    暂无文章