N3-components , Powerful Vue UI Library.

Overview

N3-components - Powerful Vue Library.

Shippable branch Test Coverage Gitter Code Climate npm

N3 components library is built with Vue.js, is a powerful library for frontend or full-stack engineers to build web pages quickly.

Home Page | 中文说明 | Documents

Introduction

logo

N3 components applys oneself to structure a great ecological circle of developers using Vue.js. Supporting as follows:

  • More than 60 components. See Here

  • Personality Of Style.

  • UMD.

  • Using ES6.

NPM

Link:https://www.npmjs.com/package/N3-components

npm install N3-components --save-dev

CNPM

Link:https://npm.taobao.org/package/N3-components

cnpm install N3-components --save-dev

CDN

Quick Start

You can install components for your global environment.

import Vue from 'vue'
import N3Components from 'N3-components'
import 'N3-components/dist/index.min.css'

// install N3
Vue.use(N3Components)

// for English  (default chinese)
// version 2.2.0 or later
Vue.use(N3Components, 'en')

You can also import single component when needed.

import Vue from 'vue'
import N3Components from 'N3-components'
import {n3Alert} from N3Components

// set language  
// window.n3Locale = 'en'
//

theme customization

// default 
import 'N3-components/src/style/default.less' 

// theme customization
import 'your-theme.less' 

your-theme.less

@import 'N3-components/src/style/common.less' 

/*base color*/
@whiteColor: #fff;
@blackColor: #000;
@lightBlackColor: #333;
@grayColor: #ccc;
@weightGrayColor: #999;
@lightGrayColor: #eee; 
@lightColor: #f9f9f9; 

/*font color*/
@fontColor: #555;

/*theme color*/
@primaryColor: #41cac0;
@primaryColorhover: #39b2a9;
@hoverColor:rgba(65, 202, 192, 0.05);

/*extend color*/
@successColor: #19d567;
@successColorhover: #30d073;

@infoColor: #2db7f5;
@infoColorhover: #43bcf3;

@dangerColor: #f50;
@dangerColorhover: #f9702b;

@warningColor: #fa0;
@warningColorhover: #f5b73b;

Requirements

  • vue
  • vue-focus
  • velocity-animate

Discussing

Contribute

Contribute

Change log

Change Log

License

MIT

Issues
  • 支持npm安装和使用

    支持npm安装和使用

    达到的效果

    npm i N3-Components
    
    // 安装完毕之后直接引用
    import N3Components from 'N3-Components'
    
    
    opened by ishenli 5
  • runtime-only build of Vue

    runtime-only build of Vue

    Hi, i'm getting this error message as soon as i try to use any component of N3

    [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

    application.js

    import Vue from 'vue'
    import N3Components from 'N3-components'
    N3Components.install(Vue, 'en');
    import App from './app.vue'
    
    const app = new Vue({
      el: '#app-container',
      render: h => h(App)
    });
    

    app.vue

    <template>
        <n3-button>button</n3-button>
    </template>
    
    <script>
        export default {
    
        }
    </script>
    
    
    opened by elbarto132 4
  • Modal控件图标显示错误

    Modal控件图标显示错误

    应该显示一个绿色钩的‘success'图标没有显示,请帮看看是什么原因,谢谢! 截图中,Show Confirm按钮旁是一个测试用的n3-icon图标,单独显示正常,方法调用的n3Modal.confirm显示图标却不能正常解析n3-icon

      import Vue from 'vue'
      import N3Components from 'N3-components'
    
      Vue.use(N3Components)
    
      export default {
        name: 'app',
        methods: {
          showConfirm () {
            this.n3Modal.confirm({
              title: 'Title',
              message: 'This is a Modal。',
              effect: 'zoom',
              type: 'success',
              onShow () {
                console.log('open')
              },
              onConfirm () {
                console.log('confirm')
              },
              onHide () {
                console.log('hide')
              }
            })
          }
        }
      }
    

    image

    opened by hushang1228 4
  • 如何在n3-data-table的最后一列放置一个Component

    如何在n3-data-table的最后一列放置一个Component

    最后一列是常见的操作列,render方法能否不返回字符串而是直接返回一个Component

            {
              title: '操作',
              render(){
                return TableButtonGroup;
              }
            }
    

    TableButtonGroup是上面import的一个.vue文件 这样会在表格里渲染一个[Object object],似乎是必须返回字符串的样子?

    opened by bangbang93 4
  • n3-data-table中,如何在轮询重新设置source之后,保留多选框选中状态?

    n3-data-table中,如何在轮询重新设置source之后,保留多选框选中状态?

      var test = setTimeout(function() {
        vm.source = [{
          key: '1',
          name: '小白',
          age: 25,
          department: '技术1'
        }, {
          key: '2',
          name: '小黑',
          age: 33,
          department: '技术2'
        }, {
          key: '3',
          name: '小红',
          age: 12,
          department: '技术3'
        }]
      }, 5000);
    

    在定时器触发之前选中的多选框,触发之后不是选中状态。 先保持选中状态,该怎么办?

    opened by huteming 3
  • layout中offset渲染后className没有布局模式

    layout中offset渲染后className没有布局模式

    渲染后的class是n3-col-offset-x , 没有布局模式md、xs……,样式无效。

    opened by hebye3548 3
  • Tree 组件有问题?

    Tree 组件有问题?

    错误如下:

    Vue warn]: Failed to mount component: template or render function not defined.
    
    found in
    
    ---> <N3TreeNode>
           <N3Tree> at src/Tree/n3Tree.vue
             <N3TreeDocs> at docs/example_en/n3TreeDocs.md
               <N3Column> at src/Layout/n3Column.vue
                 <N3Row> at src/Layout/n3Row.vue
                   <N3Container> at src/Layout/n3Container.vue
                     <N3Docs> at docs/example_en/n3Docs.vue
                       <Root>
    
    opened by dongkuo 3
  • 关于datepicker初始化的问题

    关于datepicker初始化的问题

    v-model绑定的数据如果为null,就会出现日期从1970开始,为undefined就不会,是故意的吗,我觉得如果是null也应该默认显示当前年份及月份 参考fiddle

    opened by jason5149 3
  • Select: case-insensitive search

    Select: case-insensitive search

    could you please provide case-insensitive search for <n3-select search> element, i believe that would improve UX a lot.

    opened by anotheri 3
  • N3-components  在安卓手机UC与QQ浏览器引用 出现白屏问题

    N3-components 在安卓手机UC与QQ浏览器引用 出现白屏问题

    如题, 用全新的Vue-cli命令行安装Vue开发环境

    在main.js中 加入 import N3Components from 'N3-components' import 'N3-components/dist/index.min.css' Vue.use(N3Components)

    后在 手机QQ与UC浏览器中测试 白屏~ 苹果与PC端均正常

    question 
    opened by ShareQiu1994 3
  • VUE 3 Support?

    VUE 3 Support?

    IS there a next branch that support vue 3?

    opened by folamy 0
  • 使用showAlert.alert 的时候报错。。。

    使用showAlert.alert 的时候报错。。。

    vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'open' of undefined"

    (found in ) warn @ vue.runtime.esm.js?2b0e:619 logError @ vue.runtime.esm.js?2b0e:1884 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 eval @ vue.runtime.esm.js?2b0e:1982 flushCallbacks @ vue.runtime.esm.js?2b0e:1906 Promise.then (async) timerFunc @ vue.runtime.esm.js?2b0e:1933 nextTick @ vue.runtime.esm.js?2b0e:1990 Vue.$nextTick @ vue.runtime.esm.js?2b0e:3521 mounted @ index.min.js?0bba:1 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854 callHook @ vue.runtime.esm.js?2b0e:4219 mountComponent @ vue.runtime.esm.js?2b0e:4086 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 Vue._init @ vue.runtime.esm.js?2b0e:5018 Vue @ vue.runtime.esm.js?2b0e:5085 v @ index.min.js?0bba:1 showAlert @ Lottory.vue?0dc1:19 getPrize @ Lottory.vue?0dc1:33 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854 invoker @ vue.runtime.esm.js?2b0e:2179 original._wrapper @ vue.runtime.esm.js?2b0e:6917 13:22:15.207 vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'open' of undefined

    opened by filedwu 0
  • data-table组件勾选报错

    data-table组件勾选报错

    data-table组件,只要选择勾选其中一个元素就会报错这个,什么原因?本身的bug?还是说要初始化一些数据,因为官方文档上的那个table我勾选也报同样的错误。 点击的功能 image

    报错信息

    Vue warn]: Computed property "checkedValues" was assigned to but it has no setter.
    
    found in
    
    ---> <N3DataTable> at src/DataTable/n3DataTable.vue
           <Root>
    warn @ vue-2.4.2.js:485
    sharedPropertyDefinition.set @ vue-2.4.2.js:3251
    __c @ n3.min.js:3
    invoker @ vue-2.4.2.js:1816
    
    
    opened by yekeqiang 1
  • datapicker没有联动功能

    datapicker没有联动功能

    有一种很常见的应用场景,填写开始日期(时间)结束日期(时间),作者好像还没有添加这个功能,或者是有,但我还不知道怎么设置,请指教,谢谢! 功能类似于:http://jqueryui.com/datepicker/#date-range

    enhancement 
    opened by hushang1228 0
  • validator 无法阻止表单提交动作

    validator 无法阻止表单提交动作

    RT

    bug 
    opened by x-cold 1
  • Make Breadcrumbs-item like Nav-item (制作面包屑 - 项目,如Nav-item)

    Make Breadcrumbs-item like Nav-item (制作面包屑 - 项目,如Nav-item)

    Enhancement

    Make the breadcrumb component behave like the nav component

    Options: theme{string} , router{bool}, route {object}, index{string}


    增强

    使导航组件的行为与导航组件相似

    选项:theme {string},router {bool},route {object},index {string}

    enhancement 
    opened by jacebot 0
🚀 zircle-ui is a frontend library to develop zoomable user interfaces.

A frontend library to develop zoomable user interfaces. Like it? Get involved, fork it or leave a star. Breaking news! I've been working on a new zoom

Zircle 877 Oct 11, 2021
Vue Bootstrap with Material Design - Powerful and free UI KIT

Vue Bootstrap with Material Design Based on the latest Bootstrap 4 and Vue. 400+ material UI elemens, 600+ material icons, 74 CSS animations, SASS fil

MDBootstrap 837 Oct 13, 2021
Vue implementation of the Carbon Design System

carbon-components-vue Vue implementation of the Carbon Design System A collection of Carbon Components implemented using Vue.js. Carbon Vue library -

Carbon Design System 412 Oct 13, 2021
:diamonds: A modular and customizable UI library based on Material Design and Vue

BalmUI Next Generation Material UI for Vue.js Introduction BalmUI is a modular and customizable Material Design UI library for Vue.js. ?? NOW, balm-ui

BalmJS 260 Oct 15, 2021
Free and Open Source UI Library for Vue 3 🤘

Free and Open Source UI Library for Vue 3 ??

Epicmax 824 Oct 20, 2021
Translate Bulma css api to vue components

vue-bulma-components The goal of this library is to use the bulma class syntax as components and props. 3kb minified Demo and try the live demo too :)

null 158 Aug 21, 2021
Material Design styled components for Vue.js

Material Components Vue Material Design styled components for Vue.js Material-components-vue integrates the mdc-web (by google) vanilla components fol

Mats Pfeiffer 311 Sep 27, 2021
Vue 3 & Bootstrap 5 & Material Design 2.0 UI KIT

Vue 3 & Bootstrap 5 & Material Design 2.0 UI KIT

MDBootstrap 837 Oct 13, 2021
🐛 Oruga is a lightweight library of UI components without CSS framework dependency

Oruga UI is like a caterpillar, minimal and yet functional. It's in your hands turning it into a butterfly ( ?? ) => ?? Oruga is a lightweight library

Oruga 495 Oct 16, 2021
🎉 A high quality component library built on Vue.js 2.0

dao-style A high quality component library built on Vue.js. English | 简体中文 Docs latest Who's using dao-style DaoCloud DaoVoice If you are also using d

DaoCloud.io 115 Sep 24, 2021
Enterprise UI for Vue.js.

Enterprise UI components for Vue.js. Based on BAIDU's Design Language System (DLS).

Baidu EFE team 872 Oct 18, 2021
Vue Components inspired by Microsoft's Fluent Design System

Vue Components inspired by Microsoft's Fluent Design System

null 53 Oct 14, 2021
Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites.

Inkline Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites. Inkline is written and maintained by @ale

Inkline 780 Oct 9, 2021
Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites.

Inkline Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites. Inkline is written and maintained by @ale

Inkline 780 Oct 9, 2021
A Vue.js design-system for Web.

A Vue.js Design System for Web. Responsive, user-friendly and lightweight library helping us build great products for our customers. This library for

Qvant 206 Oct 10, 2021
🧬Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

??Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

Yan Savinov 641 Oct 18, 2021
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 65.3k Oct 14, 2021
⚡️ Build scalable and accessible Vue.js applications with ease.

Build scalable and accessible Vue.js applications with ease. @chakra-ui/vue gives you a set of accessible and composable Vue components that you can u

Chakra UI 1.3k Oct 12, 2021