KPC–高质量 Vue/React/Angular 统一前端组件库

Vedu • 2020-12-08 19:10 • 资源分享 • 阅读 1413

今天给大家推荐一款超优秀的一统前端多框架UI组件库KPC。

kpc 全称King Design Public Components，金山云团队开源的Intact/Vue/React/Angular多框架的前端高质量组件库。

特性

同时支持Intact/Vue/React/Angular多框架；
在保持浏览器原生特性的基础上，增强交互能力；
支持按需加载，主题定制，国际化等特性；
提供了自研脚手架方便快速初始化项目；

安装

Intact中安装

$ npm install kpc -S

Vue中安装

$ npm install kpc-vue -S

React中安装

$ npm install kpc-react -S

Angular中安装

$ npm install kpc-angular -S

快速使用

Intact中使用

import {Button, ButtonGroup} from \'kpc/components/button\';

<ButtonGroup>
    <Button>button1Button>
    <Button>button2Button>
ButtonGroup>

Vue中使用

<template>
    <Button @click="hello">Hello WorldButton>
template>
<script>
import {Button, Message} from \'kpc-vue\';

export default {
    components: {
        Button
    },

    methods: {
        hello() {
            Message.success(\'Welcome to kpc world!\');
        }
    }
}
script>

React中使用

import React from \'react\';
import {Button, Message} from \'kpc-react\';

class App extends React.Component {
    hello() {
        Message.success(\'Welcome to kpc world!\');
    }
    render() {
        return <Button onClick={this.hello}>Hello WorldButton>
    }
}

Angular中使用

import { Component, ViewEncapsulation } from \'@angular/core\';
import { MessageComponent } from \'kpc-angular\';

@Component({
  selector: \'app-root\',
  template: `
    "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!\');
  }
}

提供了非常丰富的超过45 组件，满足项目多样化需求。

非常好的一款开源多框架UI库，需要的千万不要错过喔！

# 文档地址
https://design.ksyun.com/

# 仓库地址
https://github.com/ksc-fe/kpc

好了，今天就分享到这里。如果大家感兴趣的话，可以去看一看哈。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/17174.html

KPC–高质量 Vue/React/Angular 统一前端组件库

特性

安装

快速使用

相关推荐

发表评论