npm 包 @modernpoacher/design-system 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

前端开发人员在开发中会用到很多第三方的开源代码库和工具，其中 npm 是前端最常用的包管理器。@modernpoacher/design-system 是一个基于 React 的 UI 组件库，它包含了丰富的 UI 元素和功能，可以帮助开发人员快速构建优质的界面。

本文将介绍如何使用 @modernpoacher/design-system 库，并给出一些使用示例，希望能够帮助读者快速上手该库。

安装

使用 npm 可以非常容易地安装 @modernpoacher/design-system 库，只需在终端输入以下命令：

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

引入使用

安装成功后，在 React 项目中引入组件即可使用。以 Button 组件为例：

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

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

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

API

@modernpoacher/design-system 提供了很多组件，每个组件都有不同的 API 属性，以下是 Button 组件的 API 属性：

Button

属性名 类型 默认值 描述
size "small"/"large" "large" 按钮大小
variant "primary"/"secondary" "primary" 按钮样式
disabled boolean false 是否禁用按钮
onClick function 点击按钮后执行的回调函数

Input

属性名 类型 默认值 描述
label string 输入框标签
type "text"/"number" "text" 输入框类型
placeholder string 输入框提示文本
value string/number 输入框的值
onChange function 输入框值改变时执行的回调函数

更多组件的 API 说明请参考官方文档：https://modernpoacher.github.io/design-system/

使用示例

Button

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

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

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

Input

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

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

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

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

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

总结

@modernpoacher/design-system 是一个非常棒的 React UI 库，可以帮助开发人员构建优秀的界面，同时也提高了开发效率。本文对该库的安装、引入及 API 进行了详细介绍，并给出了一些使用示例，希望能够对大家有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f2142c7403f2923b035c695

阅读全文

猜你喜欢

  • npm 包 @moped/config 使用教程

    概述 在前端开发中，我们经常需要使用到各种配置变量，比如服务端接口地址、图片资源地址等等。为了方便管理和维护这些配置变量，我们可以使用 npm 包 @moped/config。

    4 年前
  • npm 包 @moped/db-pg-create 使用教程

    前言 在前端开发中，使用数据库操作是必不可少的。而在 Node.js 的生态圈中，npm 是最常见的包管理工具之一。本文介绍的 npm 包 @moped/db-pg-create 可以帮助开发者快速地...

    4 年前
  • npm 包 @moped/db-pg-migrations 使用教程

    简介 @moped/db-pg-migrations 是一个在 PostgreSQL 中进行数据库迁移的 npm 包。它提供了一个简单易用的工具，可以轻松创建和管理数据库结构的变化。

    4 年前
  • npm 包 pg-error-constants 使用教程

    简介 pg-error-constants 是一款可以使 PostgresSQL 错误代码更有意义的 npm 包。它提供了一系列的常量，这些常量对应的是 PostgresSQL 错误代码，而且所有的常...

    4 年前
  • npm 包 @moped/db-pg-errors 使用教程

    moped/db-pg-errors 是一个封装了 PostgreSQL 数据库中出现的错误的 npm 包，可以在前端项目中轻松使用。本文旨在介绍如何使用它来处理数据库错误。

    4 年前
  • npm 包 @moped/db-pg 使用教程

    本文主要介绍了 npm 包 @moped/db-pg 的使用教程，包括安装、配置、操作和优化等方面，希望能够为前端开发者提供指导和帮助。 什么是 @moped/db-pg @moped/db-pg...

    4 年前
  • npm 包 @moped/sql 使用教程

    在前端开发过程中，我们经常需要和数据库打交道。然而，如果使用原生 SQL 语句进行数据库操作，难免会遇到繁琐、冗长的代码、易出错等问题。因此，本文将介绍一款名为 @moped/sql 的 npm 包，...

    4 年前
  • npm 包 @moped/db-pg-schema 使用教程

    前言 在前端开发中，我们经常需要用到数据库，而其中 PostgreSQL 是一种广泛使用的关系型数据库。在使用 PostgreSQL 时，@moped/db-pg-schema 是一个不错的 npm ...

    4 年前
  • NPM 包 then-queue 使用教程

    前言 JavaScript 中回调函数和异步操作已经成为了最为常见的使用方式，npm 包 then-queue 则提供了一种更加简便的方法来进行异步操作的处理。 本篇文章将介绍如何使用 then-qu...

    4 年前
  • npm 包 then-rpc 使用教程

    npm 包 then-rpc 使用教程 引言 在前端开发中，客户端与服务器端的交互是非常重要的。为了达到这个目的，我们可以使用 then-rpc 这个 npm 包。

    4 年前
  • npm包 @moped/db-schema 使用教程

    随着前端技术不断发展，越来越多的前端工程师需要进行一些后端数据处理的工作。@moped/db-schema是一个npm包，提供了一些方便的方法来处理后端数据库的schema。

    4 年前
  • npm 包 grunt-terser 使用教程

    前言 在前端开发过程中，优化代码是非常重要的，可以极大地提高网站的性能和用户体验。而压缩 JavaScript 代码是其中非常重要的一项工作，可以减少文件体积，加快页面加载速度。

    4 年前
  • npm 包 html-minifier-terser 使用教程

    前言 在前端开发过程中，优化 HTML 代码是必不可少的一步。而 html-minifier-terser 是一款压缩和格式化 HTML 代码的工具，帮助我们缩减代码并提高网站性能。

    4 年前
  • npm 包 @moped/env 使用教程

    在日常的前端开发工作中，经常需要处理各种环境配置的问题。如果没有一个好用的工具来帮助我们管理这些环境变量，就可能会造成很多不必要的麻烦和错误。本文将介绍一个优秀的 npm 包 @moped/env，它...

    4 年前
  • npm 包 @moped/get-host-info 使用教程

    介绍 在前端开发中，有时候我们需要获取客户端的一些信息，例如客户端的 IP 地址、操作系统、浏览器等等。@moped/get-host-info 是一个可用于获取客户端信息的 npm 包。

    4 年前
  • npm 包 es6-for-of 使用教程

    在前端开发中，我们经常需要处理数组、对象等集合类型的数据。在 ES6（ECMAScript 2015） 之前，我们通常使用 for 循环、forEach 等方法来遍历集合类型数据，但这些方法存在一些缺...

    4 年前
  • npm 包 @moped/node-builtins 使用教程

    简介 @moped/node-builtins 是一个针对 Node.js 的 npm 包，它提供了一个裁剪版本的 Node.js 内置模块方法集，用于在前端项目中使用 Node.js 模块。

    4 年前
  • npm 包 @moped/babel-preset 使用教程

    简介 @moped/babel-preset 是一个基于 babel 的预设包，对 JavaScript 和 TypeScript 进行转换和编译。它能够使用在前端和后端技术栈中，帮助开发者在代码编写...

    4 年前
  • npm 包 @moped/enums 使用教程

    在前端开发中，经常会用到枚举（Enum）类型来表示一系列固定的值，通过枚举类型，可以更清晰地表达代码的意图和逻辑，提高代码的可读性和可维护性。但是，在 JavaScript 中本身并不支持枚举类型，因...

    4 年前
  • npm 包 @moped/polyfills 使用教程

    随着前端技术的不断发展，JavaScript 语言也逐渐成为了开发者必备的技能之一。而在 JavaScript 中，经常会出现一些跨浏览器兼容性的问题，这使得前端开发工作变得更加繁琐。

    4 年前

相关推荐

    暂无文章