npm 包 ppdvux 使用教程

简介

ppdvux 是一个基于 Vue.js 的 UI 组件库,能够快速搭建页面,并且拥有非常好的可定制性。本文将介绍如何使用 ppdvux。

安装

使用 npm 安装,命令如下:

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

使用

  1. 在 main.js 中引入:

    ------ --- ---- -----
    ------ ------ ---- --------
    
    ---------------
  2. 在需要使用组件的地方,直接使用组件标签即可,比如:

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

组件使用示例

按钮组件

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

表单组件

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

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

菜单组件

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

可定制性

ppdvux 拥有非常好的可定制性,大部分组件的样式都是基于 SASS 的变量,可以很方便的修改组件样式。

例如,你想修改输入框的默认边框颜色,只需要在你项目的 SASS 文件中重新定义 $input-border-color 变量即可。

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

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

总结

ppdvux 是一个非常好的 UI 组件库,能够快速搭建页面,拥有非常好的可定制性,相信在实际开发中也会给大家带来很大的帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60056e9481e8991b448e7553


猜你喜欢

  • npm 包 ember-moment-transform 使用教程

    Ember.js 是一个流行的前端框架,有许多的插件和工具来增强开发者的开发体验。其中一个非常有用的 npm 包是 ember-moment-transform,它可以帮助开发者在 Ember.js ...

    3 年前
  • npm 包 mocha-spawn 使用教程

    概述 在前端开发中,测试是必不可少的一项工作。Mocha 是一个非常流行的 JavaScript 测试框架,而 mocha-spawn 则是 Mocha 的一个插件,可以用来在子进程中运行你的测试用例...

    3 年前
  • npm 包 socialreviews-test-utils 使用教程

    概述 在前端开发中,我们经常会使用第三方库来提高开发效率,其中 npm 包是最为常见的方式。而 socialreviews-test-utils 是一款专门用于社交评论测试的 npm 包,它提供了许多...

    3 年前
  • npm包di-containerx使用教程

    在前端开发中,我们常常需要使用依赖注入来增强代码的可维护性和可测试性。本文将介绍npm包di-containerx的使用教程,以及如何在实际开发中应用。 1. di-containerx介绍 di-c...

    3 年前
  • npm 包 pop-api 使用教程

    在前端开发中,我们经常需要调用各种接口,以实现数据的获取或提交。而 pop-api 是一个基于 Promise 的 HTTP 请求库,可以帮助我们更方便地发起各种 Ajax 请求。

    3 年前
  • npm 包 tczj-test 使用教程

    简介 tczj-test 是一个 npm 包,用于前端测试。它提供了一系列的测试工具,可以帮助开发者进行单元测试、集成测试以及端对端测试。该包的 API 友好、易用,在测试方面可以帮助开发者大大提高代...

    3 年前
  • npm 包 @rdbird/dom-classnames 使用教程

    介绍 @rdbird/dom-classnames 是一个在 DOM 元素中添加、移除或切换 class 的功能模块。它可以减轻开发者的负担,使代码更加简洁,易于理解和维护。

    3 年前
  • npm 包 react-data-grid-aman 使用教程

    在前端开发中,数据表格是一个必不可少的组件。在 React 开发中,使用 react-data-grid-aman 这个 npm 包可以快速地实现数据表格的展示和交互。

    3 年前
  • npm 包 react-master-slave-scroll 使用教程

    在前端开发中,滚动条是一个非常常见的组件。然而,在实际开发中,许多情况下会出现多个滚动条并存的情况,如主体页面和侧边栏同时出现滚动条,这时候就需要一个称之为“主从滚动联动”的技术实现,以保证用户在滑动...

    3 年前
  • npm 包 @pvegal93/platzom 使用教程

    介绍 @pvegal93/platzom 是一个使用 JavaScript 编写的 npm 包,可以帮助开发者实现一些简单的文本转换功能。该包设计用于处理西班牙语文本,实现的功能包括: 把单词的最后...

    3 年前
  • npm 包 homebridge-automation-random-choice 使用教程

    简介 homebridge-automation-random-choice 是一个基于 Node.js 的 npm 包,它可以让你在 HomeBridge 中实现随机选择的自动化。

    3 年前
  • npm 包 lists-extra.min 使用教程

    前言 在前端开发中,我们经常需要对数据进行处理,其中对于数组的处理是必不可少的。虽然 JavaScript 已经提供了很多数组操作的方法,但有些操作可能并不太方便或者比较复杂,所以引入第三方库进行辅助...

    3 年前
  • npm 包 rollover 使用教程

    在前端开发中,经常要处理一些鼠标滑过图片出现效果的需求,比如图片变亮、图片翻转、图片裁剪等。这些效果在没有框架或库的支持下,需要手动编写大量的代码,在开发效率上影响较大。

    3 年前
  • npm 包 typedoc-dep-update 使用教程

    在前端开发中,Typedoc 是一个非常流行的 JavaScript 和 TypeScript 文档生成器。它能够自动生成类、接口和函数等的详细文档,并且支持多种不同的输出格式。

    3 年前
  • npm 包 @jamesbliss/storybook-state 使用教程

    在前端开发中,几乎每个项目都会用到 UI 组件库。当我们需要在一个项目中使用多个 UI 组件库时,组件间的状态管理变得非常困难。 @jamesbliss/storybook-state 便是针对这个问...

    3 年前
  • npm 包 cordova-plugin-system-sound-services 使用教程

    前言 cordova-plugin-system-sound-services 是一个 Cordova 插件,用于在 iOS 和 Android 设备上播放系统声音。

    3 年前
  • npm 包 etli 使用教程

    概述 etli 是一个 Node.js 的模块,它提供了一个简单的 API 来从各种数据源中读取数据,处理数据,并将结果写入到指定的目标数据源中。etli 的目标是简化 ETL(Extract-Tra...

    3 年前
  • npm 包 @allegiant/core 使用教程

    简介 @allegiant/core 是一款基于 React 的前端 UI 组件库,其提供了一系列的组件和工具函数,可以用于快速开发前端页面。该组件库已经被广泛应用于各种类型的项目中,具有优秀的代码质...

    3 年前
  • npm包homebridge-automation-delayed-trigger使用教程

    在前端开发中,经常会使用到npm包来简化开发过程。其中一个有用的npm包就是homebridge-automation-delayed-trigger。本文将介绍如何使用这个npm包,并提供示例代码和...

    3 年前
  • npm 包 react-guitar-chord 使用教程

    React 是一种基于组件化开发的 JavaScript 应用框架,可以让开发者快速构建用户界面。对于曲艺相关的网站或应用,需使用一种特殊的功能:吉他和弦库。本文介绍的 npm 包 react-gui...

    3 年前

相关推荐

    暂无文章