Morioh
Login
Vuejs Components

Vuejs Components

4 years ago

Vuejs2 Adminlte3 Template More Than 50 Components And 10 Directives

1. nly-adminlte-vue

nly-adminlte-vue is based on adminlte3 vue2.js， not need JQ

Welcome to communicating with QQ：927568606

This is a Alpha Version，Some prop perhaps deprecated in new Version， user caution!

2. Demo

The Demo is synchronize with master

demo-china

demo-github

demoPic

demo

demoPic

3. Docs

nly-daminlte-vue-docs

Note : 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
  • form-daterangepicker

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>

<!--  import 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

Download Details:

Author: nejinn

Demo: http://nly-adminlte-vue.nejinn.com/

Source Code: https://github.com/nejinn/nly-adminlte-vue

#vue #vuejs #javascript

Vuejs2 Adminlte3 Template More Than 50 Components And 10 Directives
27.35 GEEK