An enterprise-class UI design language and React UI library.
Changelog · Report Bug · Request Feature · English · 中文
- 🌈 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.
- Modern browsers
- Server-side Rendering
- Electron
Edge |
Firefox |
Chrome |
Safari |
Electron |
---|---|---|---|---|
Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
npm install antd
yarn add antd
pnpm add antd
import { Button, DatePicker } from 'antd';
export default () => (
<>
<Button type="primary">PRESS ME</Button>
<DatePicker placeholder="select date" />
</>
);
- Home page
- Components Overview
- Ant Design Pro
- Change Log
- rc-components
- Mobile UI
- Mini Program UI
- Ant Design Pro Components
- Ant Design Charts
- Ant Design Icons
- Ant Design Colors
- Landing Pages
- Motion
- Scaffold Market
- Developer Instruction
- Versioning Release Note
- FAQ
- Stackblitz Demo for bug reports
- Customize Theme
- How to Apply for Being A Collaborator
Use opensumi.run, a free online pure front-end dev environment.
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.
|
|
|
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.
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:
ant-design's People
Forkers
ibigbug 21guns iuyes kvsl9 iwise kumalee lishengzxc binzeehale allengaller ustccjw fingnet cnchanning yuanlh yuche jazmit lingclingc swufewyd angel-fund zaphz yippeeapp sdgdsffdsfff liuyunbao yearningz yankai17148 gitter-badger sayi21cn karenpeng ioldfish greenzhang lujiabz bairedzhang desideria zjhsd2007 hujin jarvanxing qaz0zxc elevensky adesert magus0219 kxws888 aidenzou sdfooorty irideas evencom sandy1219 dayscounting genie88 jeremy017 cn-sean sjclijie ericdai sixtomay sunriseshow shenwei235 imloama jjz alex-mm ifa6 zhangf911 buershero draco1023 ii0 zhakui hwsyy crazysaint lynzz gw9842 cyhunter honeyflyfish joykuang umissthestars runzz cody0755 lalakokyo jimmyxie gemerz knightbubble oless2 pandaming zhjlty jiehe bruseshen ckmilse codetker dxxfire imsobear jlala samlin08 vebin qiualiang konce w91 wghust vacjaliu gavin1990 astwyg raohai cumthqb hcxiong sinoryant-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;
}
麻烦看一下 谢谢
Hi, 考虑把css部分独立出去吗?
感觉比bootstrap 清爽, 如果独立出来, 可以方便不适用React的用户
Web Components 备注
select 联动例子
类似省市联动那样的,做一个简单的 demo 。
deploy 不要用 buildBranch
每次都会在当前目录切换,把 idea/webstorm 的项目配置目录都删掉了,下次打不开项目
npm start执行不成功
装了nico,但是一旦当我执行npm start,或者直接nico server时,会打开nico.js文件,而不是启动server。此问题只在windows下有,mac下正常
menu 升级到 3.5.0,导致 select 组件的键盘选择失效
报如下错:
TypeError: menu.handleKeyDown is not a function
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>
select 多选模式体验问题
重现方式:
- 访问
多选
演示:http://ant.design/components/select/#demo-multiple - 在输入框中输入
b
,此时下拉菜单只有一项。 - 回车完成。
问题:
下拉菜单会在展现出所有可选项后,再动画消失,体验比较诡异。
组件开发计划
一期(6月15日):
二期(7月15日):
- 工程化
- 动画方案
- input 输入框
- checkbox 多选
- radio 单选
- form 表单
- pagination 分页
- table 表格
- popover 气泡卡片
- popconfirm 气泡确认框
- slider 滑动条
- switch 开关
- message 全局消息通知
- step 步骤条
- collapse 折叠面板
- inputNumber 数字输入框
- breadcrumb 面包屑
三期(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
有没有导航组件和底部标签组件?
项目确实很赞,但作为纯前端新手,找不到导航组件和底部标签组件额。
编译合并后的 js css 发到 npm
参考 react react-router,方便使用, 需要配置 webpack output 为 umd
select组件显示值而非描述
README.md 缺少安装指南
npm install :)
组件搜索功能
方案:用 nico 模板读取本地组件列表,生成一个静态的 json 用作数据源。
0.7.2
- CHANGELOG
- npm 发布
- tag
- package.json 版本修改
日历控件在边缘出现的位置调整
button 提供 :active 的效果
即鼠标点下的状态。现在只有主按钮有效果。
iconfont 位置调整
按 @tsj1107 的建议,统一调整成铺满格子。
浏览器支持计划
感觉这个前端框架很不错的,不知道它对于浏览器的兼容性支持有没有明确的计划?打算支持IE8和IE9吗?
快速上手
快速上手 按照步骤做不work!
index.css 缺失。能不能在 antd init 后,生成可运行的demo。
类似Yeoman的generator-webapp做法。
progress 完善改进
- line progress 宽度自适应。
- line progress 建议用 dom 实现,方便颜色用样式来统一。
- 添加半透明状态的进度,表示正在进行中,可参照火烧云。
改 less 服务器自动关闭
less 改着改着,服务器 watch 就失败,自动关闭了
ie8 问题
- 首页不能正常展示
http://ant.design/ - breadcrumb react-router 不能结合
iconfont 缺失收集
- home 主页
- list 列表
组件代码统一
Can we have an English translation?
Interesting project, but would appreciate lots an English translation 😄
eslint 支持
使用 antd-bin 作为开发工具
目前是独立的 webpack-config.js 。
代码片段方案设计
每个代码片段分为三块:
- 代码
- 描述
- demo
jsx-loader 替换成 babel-loader 吧
语法支持多
文档撰写
iconfont class 名字调整
circle -> round 圆
circleo -> circle 圈
组件中的HTML结构是 React.render 出来的
您们好!
问题:
如果我再写好的html结构中,如何在引用antd-0.1.0-beta1.js后,可以使用ant.design提供的组件?我发现组件中的HTML结构是 React.render 出来的。
说明:
之前一直用你们的kissy,如今发现很多demo页面链接错误了。
发现了你们这个新的框架。非常感谢!
我的问题时很弱智,由于我乐视网是做设计的,但会写点HTML做些专题页面。引用你们的kissy库就可以使用一些组件。现在ant框架没有html结构的组件实例。
rc-tooltip 升级到 2.5.x 后,部分组件位置偏移
tooltip popover popconfirm 等组件位置偏移
branch: 0.8.0
一期组件接入跟踪
组件动画改进
需要修改动画的组件:
- modal
- dropdown
- select
-
datepicker ? -
collapse
需要补充动画的组件:
- menu
- tag
- alert
- upload
- validation
- slider 上面的气泡
- tree 展开缩放需要动画
架构建议
- 目前 markdown 写 js 十分不方便,希望抽取为单独的 js 里写
- 希望网站能够用 react-router 做成单页面,这样后续响应快
- 目前 watch 很多坑,经常构建文件不更新,建议用 middleware 内存构建
Pagination 分页 组件出现乱码
Table 远程模式支持由外界发起请求等操作
var dataSource = new Table.DataSource({
url: 'xxx',
getParams: function() { ... }
...
});
// 重新拉取数据
dataSource.fetch();
CHANGELOG
要准备开始写历史记录了。
部分输入组件支持三套大小
select
、datepicker
、input-number
支持三套大小:
- 大(32px,用于表单中)
- 中(28px,默认)
- 小(22px,用于小号表格中)
和 input 的三种大小保持一致:http://ant.design/components/form/#code-box-components-form-demo-input-size
Fast click for mobile
Hi there,
Is there any plan to employ the fast click for mobile devices?
https://github.com/JakeSidSmith/react-fastclick
http://stackoverflow.com/questions/24335821/can-i-fastclick-reactjs-running-in-cordova/30316754#30316754
底部导航统一设计和内容调整
select 支持分组功能
rc-select 里已经支持了。react-component/select#6
在 http://ant.design/components/select/ 里加一下分组的演示和文档吧。
发到 0.8.0 分支。
无法与 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);
社区示例和脚手架收集 Demo and Scaffold from communication
2017.05.13 更新,欢迎将您的脚手架提交到:http://scaffold.ant.design/
这里将长期收集社区提供的一些 antd 周边的开发资源和例子,帮助你探索其他人是怎么进行开发的,也欢迎主动回复到此处。
无关回复将会定期删除。
文档 API 样式优化
工程化支持
- 初始化
- 默认和自定义构建配置
- 调试
- 构建
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.