Coder Social home page Coder Social logo

fengxinhhh / concis Goto Github PK

View Code? Open in Web Editor NEW
388.0 16.0 111.0 9.54 MB

快速构建React应用程序的高性能、轻量级UI库

Home Page: http://concis.org.cn

License: MIT License

TypeScript 89.83% Less 10.17% Shell 0.01%
dumi lerna react reactjs rollup typescript javascript js mobile react-components ts css3 es6-javascript less pnpm markdown

concis's Introduction

Concis

High-performance, lightweight UI library for rapidly building React applications.

stars react licence ci

English | 简体中文

Features

Comprehensive

With more than 50 crafted components that you can use out of the box.

Customizable theme

Extensive design tokens can be customized to build your own theme. the way of customization are supported:

TypeScript friendly

All components are written in TypeScript so it's type friendly.

Installation

Available as an npm package

// with npm
npm install concis@latest

// with yarn
yarn add concis@latest

Examples

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'concis';
import 'concis/web-react/style/index.css';

function App() {
  return <Button type="primary">Hello Concis!</Button>;
}

ReactDOM.render(<App />, document.getElementById('app'));

Local experience

In the examples folder, there is a vite + react project runtime environment, in which you can experience the concis component, run the command in the project root directory:

pnpm examples:dev

Visit http://localhost:5173.

Useful Links

Browser Support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
Electron
Electron
Edge 16 31 49 31 36 last 2 versions

Contributing

Developers interested in contributing should read the Contributing Guide.

Thank you to all the people who already contributed to Concis!

concis's People

Contributors

ayuan-gy avatar catlicious avatar chengongwei avatar fengxinhhh avatar friedricenoodles avatar gaoxiaoduan avatar jokerwon avatar kakachake avatar krialy avatar kunl avatar liuluming23 avatar lniev avatar lyc199753 avatar maplepudding avatar oweqian avatar qiuqiuatyu avatar t-roc avatar tcljr1314 avatar wingwang2017 avatar wjh661987 avatar xieming01 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

concis's Issues

兼容暗黑模式,组件编写规范

如果有想法想feat component的话,在兼容暗黑模式,有几个规范需要告诉你:

  1. Concis目前提供暗黑主题,在文档显示需要兼容,开发组件需要在样式文件中提供两套类名,如concis-button(light) / concis-dark-button(dark);
  2. 在组件代码中需根据GlobalConfig context中darkTheme来判断用户项目是否开启深色模式,开启即使用concis-dark-component类。
    image
    参考之前组件的模板就好,写的很清楚,集成所有类名,给组件原本类名加一个判断就可以,后续推出其他主题可能会改变写法,先暂时这么做。

TimePicker 滚动条样式

hello,请在packages/concis-react/src/TimePicker/index.module.less24行添加scrollbar-width: none;以适应Firefox

分页器小bug

分页器Pagination设置15条/页或更多时中间的数字显示不正确
image
image

Tree 树选择器

点击图标展开后下拉选择框立马就会隐藏,svg用Node.contains()判断会失效

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.