nly-adminlte-vue

English README || 中文 README

1. nly-adminlte-vue

• 1. nly-adminlte-vue
• 2. Demo
• 3. Docs
• 4. Progress
  • 4.1. Component
  • 4.2. Directives
  • 4.3. Install
    • 4.3.1. clone from Github
    • 4.3.2. npm
• 5. Thanks

nly-adminlte-vue是一个基于adminlte3封装的vue组件库。干掉jq，让vue更好的使用adminlte3。

欢迎加群交流 QQ群：927568606

目前版本为测试版本，欢迎体验更新代码。可能会 存在新版本不兼容旧版本prop的情况，请注意

2. Demo

The Demo is synchronize with master

demo-china

demo-github

3. Docs

nly-daminlte-vue-docs

注意 : The documentation has not been completely migrated to the website. If there is no document on the website, you can view it in the README.md under the corresponding component folder.

We also can view docs localhost with npm run docs-dev. docs-dev

4. Progress

Packaged components

4.1. Component

• theme
• collapse
• navbar
• nav
• grid row col
• container
• content
• wrapper
• link
• button
• switch
• card
• badge
• dropdown
• icon
• control-sidebar
• overlay
• toast
• spinner
• progress
• timeline
• breadcrumb
• infobox
• table
• tooltip
• paginaton
• renderfunction
• form
• input
• feedback
• log
• list-group
• modal
• tabs
• form-group
• popover
• input-group
• form-select

4.2. Directives

• v-nly-sidebar-collapse
• v-nly-control-sidebar-collapse
• v-nly-card-maximized
• v-nly-toggle
• v-nly-tooltip
• v-nly-modal
• v-nly-scrollspy
• v-nly-popover
• v-nly-toggle

4.3. Install

4.3.1. clone from Github

git clone https://github.com/nejinn/nly-adminlte-vue.git

npm install 

npm run serve

// view example
http://localhost:8080

// view local docs
npm run docs-dev

4.3.2. npm

• import all

npm install nly-adminlte-vue

main.js
import "nly-adminlte-vue/dist/adminlte/css/adminlte.css";
import "nly-adminlte-vue/dist/adminlte/fontawesome-free/css/all.css";
import "nly-adminlte-vue/dist/adminlte/icon/iconfont.css";
import "nly-adminlte-vue/dist/nly-adminlte-vue.css";
import { NlyAdminlteVue, NlyAdminlteVueIcons } from "nly-adminlte-vue";
Vue.use(NlyAdminlteVue);
Vue.use(NlyAdminlteVueIcons);

• CDN

<!-- vue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>

<!-- nly-adminlte-vue JS-->
<script src="//unpkg.com/nly-adminlte-vue@latest/dist/nly-adminlte-vue.umd.js"></script>

<!-- 引入nly-adminlte-vue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/nly-adminlte-vue@latest/dist/nly-adminlte-vue.css" />

<!-- adminlte3 CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/nly-adminlte-vue@latest/dist/adminlte/css/adminlte.css" />

<!-- nly-adminlte-vue-icon JS-->
<script src="//unpkg.com/nly-adminlte-vue@latest/dist/nly-adminlte-vue-icon.umd.js"></script>

<!-- nlyfont icon CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/nly-adminlte-vue@latest/dist/adminlte/icon/iconfont.css" />

<!-- fontawesome icon CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/nly-adminlte-vue@latest/dist/adminlte/fontawesome-free/css/all.css" />

• import one

Just like nly-badge

import { NlyBadge } from "nly-adminlte-vue";
Vue.component('nly-badge', NlyBadge)

import Plugin

import { badgePlugin } from "nly-adminlte-vue";
Vue.use(badgePlugin);

5. Thanks

bootstrapVue