components's Introduction

Panda Design

Pluggable design system base on Ant Design

English | 中文

Get Started

Install

yarn add @panda-design/components

Inject styles

import {appendStyle} from '@panda-design/components';

appendStyle();
// And if you don't want some style
appendStyle({injectAll: false, inject: {Button: true}});

Build your application above Antd & Panda Design

import {Button} from 'antd'; // with style injected

const App = () => {
    return <Button type="primary">OK</Button>;
};

Enjoy the syntax sugar of Panda Design

import {Button} from '@panda-design/components';

const App = () => {
    return <Button type="primary" disabled disabledReason="Primission Denied">OK</Button>;
};

Docs

see StyleGuide made by this package

also you may clone

git clone [email protected]:panda-design-team/panda-design-team.github.io.git
cd panda-design-team.github.io
yarn
yarn start

Contribute

Feel free to raise issues and PR.

components's People

Contributors

Stargazers

components's Issues

1.0.0 会有哪些变更？

丢弃 antd@4

在 0.x 版本里，panda-design 始终支持 antd@4 以及 antd@5，这意味着我们不能完全使用 antd@5 的 Design Token 系统（其实也是没有系统的研究过，应该是需要一些使用成本）

appendStyle 迁移至 config

在 0.x 版本里，panda-design 仅支持样式的配置，但是这样有一些使用上的不便，在 1.x 版本，将升级为根据功能点开关，以满足高可定制化的需求：

import {config} from '@panda-design/components';

const {theme} = config({
    antPrefixCls: 'ant5',
    enableButtonStyle: true,
    enableButtonAnimation: false,
    enableMessageStyle: true,
    enableMessageCloseIcon: false,
});

Recommend Projects