Giter Club home page Giter Club logo

ant-design's Introduction

Ant Design

An enterprise-class UI design language and React UI library.

CI status codecov NPM version NPM downloads

FOSSA Status

Follow Twitter Renovate status dumi Issues need help

Changelog · Report Bug · Request Feature · English · 中文

❤️ Sponsors and Backers

✨ Features

  • 🌈 Enterprise-class UI designed for web applications.
  • 📦 A set of high-quality React components out of the box.
  • 🛡 Written in TypeScript with predictable static types.
  • ⚙️ Whole package of design resources and development tools.
  • 🌍 Internationalization support for dozens of languages.
  • 🎨 Powerful theme customization based on CSS-in-JS.

🖥 Environment Support

  • Modern browsers
  • Server-side Rendering
  • Electron
Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
Edge last 2 versions last 2 versions last 2 versions last 2 versions

📦 Install

npm install antd
yarn add antd
pnpm add antd

🔨 Usage

import { Button, DatePicker } from 'antd';

export default () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
);

🔗 Links

⌨️ Development

Use opensumi.run, a free online pure front-end dev environment.

opensumi.run

Or clone locally:

$ git clone [email protected]:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start

Open your browser and visit http://127.0.0.1:8001 , see more at Development.

🤝 Contributing PRs Welcome

Top Contributors of ant-design/ant-design - Last 28 days Performance Stats of ant-design/ant-design - Last 28 days
New participants of ant-design - past 28 days

Let's build a better antd together.

We warmly invite contributions from everyone. Before you get started, please take a moment to review our Contributing Guide. Feel free to share your ideas through Pull Requests or GitHub Issues. If you're interested in enhancing our codebase, explore the Development Instructions and enjoy your coding journey! :)

For collaborators, adhere to our Pull Request Principle and utilize our Pull Request Template when creating a Pull Request.

Issue funding

We use Polar.sh and Issuehunt to up-vote and promote specific features that you would like to see and implement. Check our backlog and help us:

Let's fund issues in this repository

ant-design's People

Contributors

afc163 avatar benjycui avatar chenshuai2144 avatar crazyair avatar ddcat1115 avatar dengfuping avatar dependabot[bot] avatar github-actions[bot] avatar hengkx avatar heskeybaozi avatar jljsj33 avatar kiner-tang avatar li-jia-nan avatar madccc avatar orzyyyy avatar raohai avatar renovate[bot] avatar shaodahong avatar simaq avatar thinkasany avatar vagusx avatar wxh16144 avatar xrkffgg avatar ycjcl868 avatar yesmeck avatar yiminghe avatar yoyo837 avatar zhujun24 avatar zombiej avatar ztplz 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  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

ant-design's Issues

打包出来的index.css 有语法错误

通过npm install安装 lib下的index.css语法有错误导致使用webpack的cssloader报错

3298行

 > .ant-btn-group {
  float: left;
}
 > .ant-btn-group:not(:first-child):not(:last-child) > .ant-btn {
  border-radius: 0;
}
 > .ant-btn-group:first-child:not(:last-child) > .ant-btn:last-child {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  padding-right: 8px;
}
 > .ant-btn-group:last-child:not(:first-child) > .ant-btn:first-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  padding-left: 8px;
}

麻烦看一下 谢谢

deploy 不要用 buildBranch

每次都会在当前目录切换,把 idea/webstorm 的项目配置目录都删掉了,下次打不开项目

npm start执行不成功

装了nico,但是一旦当我执行npm start,或者直接nico server时,会打开nico.js文件,而不是启动server。此问题只在windows下有,mac下正常

textarea max-width

Hello,

when resizing the textarea, it exceeds the maximum width.
I'd suggest to set the max-width to 100% to prevent it from coming out of the container.

:)

默认的按钮样式

<button class="ant-btn">Default</button>

应该等效于:

<button class="ant-btn ant-btn-default">Default</button>

组件开发计划

一期(6月15日):

二期(7月15日):

三期(8月05日):

  • menu 导航菜单
  • upload 上传
  • carousel 走马灯
  • tree 树形控件
  • notification 通知框
  • validation 表单校验
  • affix 悬停
  • alert 消息样式
  • enterAnimation 进场动效
  • 色板
  • 排版

正式发布(8月25日)0.8.0

正式发布上线。

四期(9月15日)0.9.0

补充几个新组件,完善旧组件的演示。

  • timeline 时间轴
  • badge 通知数字

已有组件补充:

  • table 表格折叠区域
  • step 竖版
  • radio button style

五期(10月31日)0.10.0

#276

组件搜索功能

方案:用 nico 模板读取本地组件列表,生成一个静态的 json 用作数据源。

0.7.2

  • CHANGELOG
  • npm 发布
  • tag
  • package.json 版本修改

浏览器支持计划

感觉这个前端框架很不错的,不知道它对于浏览器的兼容性支持有没有明确的计划?打算支持IE8和IE9吗?

快速上手

快速上手 按照步骤做不work!
index.css 缺失。能不能在 antd init 后,生成可运行的demo。
类似Yeoman的generator-webapp做法。

progress 完善改进

  1. line progress 宽度自适应。
  2. line progress 建议用 dom 实现,方便颜色用样式来统一。
  3. 添加半透明状态的进度,表示正在进行中,可参照火烧云。

组件代码统一

  1. remove 'use strict'
    #63
  2. use ES6 module (import / export)
    #66
  3. use ES6 Classes (React v0.13+) or React.createClass (support mixin) ?

组件中的HTML结构是 React.render 出来的

您们好!
问题:
如果我再写好的html结构中,如何在引用antd-0.1.0-beta1.js后,可以使用ant.design提供的组件?我发现组件中的HTML结构是 React.render 出来的。

说明:
之前一直用你们的kissy,如今发现很多demo页面链接错误了。
发现了你们这个新的框架。非常感谢!
我的问题时很弱智,由于我乐视网是做设计的,但会写点HTML做些专题页面。引用你们的kissy库就可以使用一些组件。现在ant框架没有html结构的组件实例。

组件动画改进

需要修改动画的组件:

  • modal
  • dropdown
  • select
  • datepicker ?
  • collapse

需要补充动画的组件:

  • menu
  • tag
  • alert
  • upload
  • validation
  • slider 上面的气泡
  • tree 展开缩放需要动画

架构建议

  1. 目前 markdown 写 js 十分不方便,希望抽取为单独的 js 里写
  2. 希望网站能够用 react-router 做成单页面,这样后续响应快
  3. 目前 watch 很多坑,经常构建文件不更新,建议用 middleware 内存构建

CHANGELOG

要准备开始写历史记录了。

无法与 reactcss 结合起来

想接合 reactcss 来使用,
但是 antd server 之后,
访问 http://localhost:8000/ 样式不生效

import ReactCSS from 'reactcss';

class Button extends ReactCSS.Component {
    classes() {
        return {
            'default': {
                btn: {
                    color: 'red'
                }
            }
        }
    }
    render() {
        return <div is="btn">hello world</div>;
    }
}

React.render(<Button />, document.body);

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.