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

Posted IT大咖说

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了高质量 Vue/React/Angular 统一前端组件库相关的知识,希望对你有一定的参考价值。

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

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

特性

  • 同时支持Intact/Vue/React/Angular多框架;

  • 在保持浏览器原生特性的基础上,增强交互能力;

  • 支持按需加载,主题定制,国际化等特性;

  • 提供了自研脚手架方便快速初始化项目;

高质量 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

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


快速使用

Intact中使用

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

<ButtonGroup>
<Button>button1</Button>
<Button>button2</Button>
</ButtonGroup>

Vue中使用

<template>
<Button @click="hello">Hello World</Button>
</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 World</Button>
}
}

Angular中使用

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!');
}
}

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


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

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


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


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


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


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



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

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

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

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





来源:

https://www.toutiao.com/i6903542168405869060/

“IT大咖说”欢迎广大技术人员投稿,投稿邮箱:aliang@itdks.com



来都来了,走啥走,留个言呗~




 IT大咖说  |  关于版权 

感谢您对IT大咖说的热心支持!



相关推荐


推荐文章






以上是关于高质量 Vue/React/Angular 统一前端组件库的主要内容,如果未能解决你的问题,请参考以下文章

vue/react/angular开发的css架构思考

造一个Vue(react,angular)和echarts的轮子,从纯技术角度看哪个难度更大?

Web前端/全栈核心(html5/css3/js/vue/react/angular/es6/node)观看笔记

前端自动化构建工具之webpack

公司还在用jquery?趁早离职吧

angular学习记录