Score
0
Watch 16 Star 55 Fork 7

Javey / kpcJavaScriptMIT

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
同时支持Intact/Vue/React/Angular框架的前端组件库 spread retract

https://design.ksyun.com/

  • JavaScript 71.5%
  • CSS 25.6%
  • HTML 2.1%
  • TypeScript 0.8%
Clone or download
Javey authored docs: typo
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

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

Comments ( 4 )

Sign in for post a comment

JavaScript
1
https://gitee.com/javey/kpc.git
git@gitee.com:javey/kpc.git
javey
kpc
kpc
master

Help Search