Nervously Proposing Marriage
    Wondering what’s next for npm?Check out our public roadmap! »

    kpc

    1.5.0 • Public • Published

    English | 简体中文

    Features

    • Support multiple frameworks: Intact / Vue / React / Angular.
    • Complete custom theme system.
    • 360° locate popup layer.
    • Declarative form validation.
    • Excellent documents and design
    • 90% coverage unit tests.

    Browsers Support

    IE / EdgeIE / Edge FirefoxFirefox ChromeChrome SafariSafari OperaOpera
    IE10, IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

    Vue

    Installation

    npm install kpc-vue --save

    Usage

    <template>
        <Button>Hello</Button>
    </template>
    <script>
    import {Button} from 'kpc-vue';
    
    export default {
        components: {
            Button
        }
    }
    </script>

    React

    Installation

    npm install kpc-react --save

    Usage

    import React from 'react';
    import {Button} from 'kpc-react';
    
    class App extends React.Component {
        render() {
            return <Button>Hello</Button>
        }
    }

    Intact

    Installation

    npm install kpc --save

    Usage

    import {Button} from 'kpc';
    
    <Button>Hello</Button>

    Angular

    Read more

    Installation

    npm install kpc-angular -S

    Configure webpack.config.js

    You need use @angular-builders/custom-webapck to configure webpack, if your project initialized by Angular CLI.

    const path = require('path');
    
    module.exports = function(config) {
      config.module.rules.find(rule => {
        if (rule.test.toString() === '/\\.css$/') {
          rule.exclude.push(path.resolve(__dirname, 'node_modules/kpc-angular'));
          return true;
        }
      });
    
      return config;
    };

    Usage

    src/app/app.module.ts

    import { KpcBrowserModule, KpcModule } from 'kpc-angular';
    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        KpcBrowserModule,
        AppRoutingModule,
        KpcModule,
      ],
      providers: [],
      bootstrap: [AppComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    export class AppModule { }
    import { Component, ViewEncapsulation } from '@angular/core';
    import { MessageComponent } from 'kpc-angular';
    
    @Component({
      selector: 'app-root',
      template: `
        <k-button type="primary" (click)="onClick()">Hello World</k-button>
      `,
      style: `
        .k-button {
          margin: 10px;
        }
      `,
      encapsulation: ViewEncapsulation.None,
    })
    export class AppComponent {
      onClick() {
        MessageComponent.success('Welcome to kpc world!');
      }
    }

    Immediate Feedback

    Welcome to join us by QQ. Group Number: 529739732

    KPC Official QQ Group

    QQ

    Links

    Develop

    Require node@10 and npm@6.9 or above.

    git clone https://github.com/ksc-fe/kpc.git
    cd kpc
    npm install
    npm run dev:doc
    
    # test 
    npm run test
    # update snapshots 
    npm run snapshot
    # deploy documents
    npm run deploy:doc
    # release new version 
    npm run release

    License

    MIT

    Install

    npm i kpc

    DownloadsWeekly Downloads

    162

    Version

    1.5.0

    License

    MIT

    Unpacked Size

    36.2 MB

    Total Files

    2822

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar