npm 包 upcn-header-lib 使用教程

简介

upcn-header-lib 是基于 Vue.js 的一个组件库，主要用于创建适用于 UPcN 系统头部导航的 UI 组件。此库提供了诸如导航菜单、通知中心、用户信息等功能，使得程序员们能够快速而简单地创建出现代化的用户界面。

安装

upcn-header-lib 可以通过 npm 包管理器进行安装：

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

使用

样式

upcn-header-lib 使用了 SASS 编写样式。为了让您的组件样式更加平滑，我们推荐您使用 SASS 或者 CSS 预处理器。

在你的应用程序中，通过向样式表添加以下两个文件中的任何一个来引入 upcn-header-lib 的样式：

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

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

引入

在你的代码中，通过以下方式引入 upcn-header-lib：

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

然后，添加组件：

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

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

通用布局

在你的 HTML 模板中添加组件：

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

在你的 JavaScript 中，设置默认设置：

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

更多的配置选项可以查看 api 页面。

用户信息

你可以通过以下方法来渲染用户信息：

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

注意：user-info 需要在父组件的作用域内设置 name。

通知中心

你可以通过以下方式来渲染通知中心：

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

更多组件

upcn-header-lib 还提供了其他几个方便的组件：

SearchBar

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

SideMenu

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

API

upcn-header

upcn-header.setNavItems

设置导航菜单项。

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

upcn-header.setBrand

设置标志品牌。

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

upcn-header.setUserInfo

设置用户信息。

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

upcn-header.setNotifications

设置通知中心。

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

SideMenu

SideMenu.show

在右侧展示侧栏。

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

SideMenu.hide

隐藏侧边栏。

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

示例代码

具有全部成分的示例

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

只有基础组件的示例

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

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

阅读全文

猜你喜欢

  • npm 包 spinner-progressbar 使用教程

    简介 spinner-progressbar 是一个可以让用户在命令行中看到进度条和加载动画的 npm 包。在前端开发中，我们常常需要在命令行执行一些耗时的任务，如打包、压缩等等，这时候使用 spin...

    3 年前
  • npm 包 unidata10 使用教程

    介绍 unidata10 是一个 JavaScript 库，用于处理 Unicode 字符并生成相关的标准化字符串。该库的特点是支持所有 Unicode version 10.0.0 中的字符。

    3 年前
  • npm 包 @jupyter_dojo/nbextension 使用教程

    前言 @jupyter_dojo/nbextension 是一个 Jupyter notebook 扩展包，提供了一些方便的工具和功能，帮助前端开发人员更好的进行 Jupyter notebook 的...

    3 年前
  • npm 包 htmlparser_shang 使用教程

    前言 在前端开发过程中，我们常常需要对 HTML 代码进行处理，如字符串替换、节点增删等操作。而操作复杂的 HTML 代码通常需要借助第三方库进行解析和处理。htmlparser_shang 就是其中...

    3 年前
  • npm包 noble-macsierra 使用教程

    前言 在前端开发中，有许多优秀的npm包可供使用。其中，noble-macsierra是一个用于Mac Sierra设备上蓝牙设备的npm包。它是对noble包的扩展，具有更好的兼容性和更好的使用体验...

    3 年前
  • npm 包 react-svg-wavy-gravy-bar 使用教程

    在前端开发中，我们经常需要在页面中添加一些动态的元素来增强用户体验，比如图表、进度条等。而 SVG 技术在这方面有着天然的优势，因为它可以让我们用简单的代码就创建出复杂的图形。

    3 年前
  • npm 包 seneca-gcloudpubsub-transport 使用教程

    在现代的 Web 开发中，前端技术是具有重要地位的，它直接影响着网站性能、用户体验等多个方面。npm 是前端开发中重要的工具之一，它提供了大量的第三方库和工具，为前端开发者带来了更多可能性。

    3 年前
  • npm 包 jaigga-node-validations 使用教程

    在前端开发过程中，校验用户的输入数据是必不可少的环节。为了更方便地进行数据校验，我们可以使用 npm 包 jaigga-node-validations。 安装 使用 npm 安装 jaigga-no...

    3 年前
  • npm 包 icechest 使用教程

    什么是 icechest icechest 是一个基于 jQuery 和 Bootstrap 的响应式、美观的前端组件库，包括常用的 UI 组件和布局。 如何使用 icechest 首先，我们需要通过...

    3 年前
  • npm 包 m-ngx-tree-select 使用教程

    前言 m-ngx-tree-select 是一个基于 Angular 的树形结构选择器组件，提供了丰富的配置和接口，使得在前端开发中，树形结构选择器可以轻松实现。本篇文章将介绍 m-ngx-tree-...

    3 年前
  • npm 包 node-red-contrib-tv-bravia 使用教程

    介绍 node-red-contrib-tv-bravia 是一个可以控制 Sony Bravia 电视的 Node-RED 插件。使用此插件可以在 Node-RED 编辑器中控制电视，例如打开、关闭...

    3 年前
  • npm 包 mobile-app-server 使用教程

    前言 前端开发在移动端应用程序开发中扮演着越来越重要的角色。随着移动应用程序的数量增加，后端的负担也随之增加。mobile-app-server 就是一款能够帮助我们快速创建一个运行在本地的，可以与移...

    3 年前
  • npm 包 localgraph 使用教程

    什么是 localgraph？ localgraph 是一个基于 D3.js 的库，用于构建本地图表。它支持多种图表类型，包括条形图、折线图、饼图等等。localgraph 提供了简单易用的 API，...

    3 年前
  • npm 包 nwjs-bootstrap2 使用教程

    nwjs-bootstrap2 是一款基于 NW.js 平台的前端开发工具包，它可以帮助开发者快速构建基于 NW.js 平台的桌面应用程序。本文将为大家介绍如何使用 nwjs-bootstrap2 包...

    3 年前
  • npm 包 Pinotage 使用教程

    简介 Pinotage 是一个快速，可扩展和易于使用的 JavaScript库，它提供了丰富的本地和远程数据查询和分析功能。Pinotage 旨在为 Web 开发人员提供基于浏览器的数据分析解决方案。

    3 年前
  • npm 包 verboz 使用教程

    npm 是 Node.js 的包管理器，许多前端项目都会使用 npm 来管理依赖库。在 npm 中有一个叫做 verboz 的包，它可以帮助我们在控制台中输出详细的日志信息。

    3 年前
  • npm 包 anayarojo-platzom 使用教程

    anayarojo-platzom 是一个方便的 npm 包，用于执行一些特定的字符串变换。在本文中，我们将探讨如何使用这个包，并介绍一些在使用过程中需要注意的事项。

    3 年前
  • npm 包 babel-preset-build-engine 使用教程

    在前端开发中，我们经常需要使用 ECMAScript 6 (ES6) 或者更新的版本进行开发。但是，在部署到 Web 上时，我们需要使用一些工具将其转换为支持较旧浏览器的代码，其中一个很流行的工具就是...

    3 年前
  • npm包cordova-sqlite-legacy-build-support使用教程

    前言 cordova-sqlite-legacy-build-support是一个npm包，它为cordova提供了一个SQLite数据库插件，以实现在移动设备上使用SQLite数据库的功能。

    3 年前
  • npm 包 ember-cli-openfin-excel-shim 使用教程

    什么是 ember-cli-openfin-excel-shim？ ember-cli-openfin-excel-shim 是一个基于 Ember.js 和 OpenFin 平台的 npm 包，用于...

    3 年前

相关推荐

    暂无文章