8 ms·

Show HN: Antd – A set of high-quality React components

507 points by _yesmeck 10y ago

cocktailpeanuts 10y ago
I don't want to be that guy, and probably will be downvoted for being negative, but why does everything load so slow? People on this thread are saying it's the network speed thing, coming from china and all, but isn't this supposed to have downloaded all the js modules initially? I just keep thinking "it would have been much faster and I wouldn't have to wait for these progress bars to finish if it were just a static page". Why does a documentation need a progress bar anyway?
- wwalser 10y ago
  The minified version of this library is about 1MB but loading individual modules is possible. I haven't checked my own net tab but I presume the site uses chunking in order to avoid downloading the entire library on the initial load. The data is static and it is probably a SPA, but it's not all loaded on the initial load.
nathanwindsor 10y ago
This looks great! Link doesn't work though...
- _yesmeck 10y ago
  Which link?
jumasheff 10y ago
Thanks for sharing! Amazing work!
SlyShy 10y ago
Some really beautiful components like the TreeSelect in there, not trivial to build at all. That said, the first time I loaded the page sure took a long time. Kind of sad to need Webpack to create chunks just to recreate the old effect of not loading all the content for your website all at once.
- _mg 10y ago
  Chunking would be preferable in HTTP 2
- yadongwen 10y ago
  It's slow probably because the web server is hosted in China..
kimshibal 10y ago
Another good stuff by Chinese team. For Vue components, we have support from Ele.me
aryehof 10y ago
I can only imagine. Nothing shows but a blank page when clicking a site link in my iPad.
floatrock 10y ago
For those wondering who it comes from, https://ant.design/docs/spec/introduce#Who-are-using-Ant-Design https://ant.design/docs/spec/introduce#Who-are-using-Ant-Des... The first (and presumably namesake) company is Ant Financial https://www.antgroup.com https://www.antgroup.com, which is described as: > Ant Financial Services Group ("Ant Financial"), was officially founded in October 2014 and originated from Alipay which is the world's leading third-party payment platform founded in 2004. So basically if Bootstrap came out of Twitter, this came out of Alibaba and Co. Big name behind it.
- yadongwen 10y ago
  AFAIK and.design has been used heavily in alibaba for internal applications
- gustix 10y ago
  Alibaba is also working on a ReactNative competitor for Vue, called Weex: https://alibaba.github.io/weex/ https://alibaba.github.io/weex/
  - kimshibal 10y ago
    we are using Weex for our app on production. Weex is pretty solid platform
    - victormustar 10y ago
      Hey, can you tell us more? I'm very interested in Weex :) What make it solid ? what are the pros/cons ? Last time I checked I thought I need to know chinese as 95% of issues are in chinese for example. Is it still a prob ?
      - WA 10y ago
        Hit the demos for Weex and compare them to Ionic 2. It's still day and night imho, whereas Ionic 2 looks very polished.
Rodeoclash 10y ago
What's the filesize for this?
- _yesmeck 10y ago
  The minified version is about 1MB, see https://unpkg.com/antd@2.5.0/dist/ https://unpkg.com/antd@2.5.0/dist/ . But you can import component individually by using this babel plugin https://github.com/ant-design/babel-plugin-import https://github.com/ant-design/babel-plugin-import, see https://ant.design/docs/react/getting-started#Import-on-Demand https://ant.design/docs/react/getting-started#Import-on-Dema...
  - karmajunkie 10y ago
    This is really well executed, well done. I noticed a link to data visualization and graphics pages, but unfortunately I don't read chinese. Are there plans to wrap that stuff up in React in a similar fashion?
    - benjy_c 10y ago
      You can try Google translator..
      - dxq613 10y ago
        github:https://github.com/antvis/g2 https://github.com/antvis/g2 guide: https://github.com/antvis/g2/wiki/How-to-create-a--chart https://github.com/antvis/g2/wiki/How-to-create-a--chart api: https://github.com/antvis/g2/wiki/API https://github.com/antvis/g2/wiki/API
tschellenbach 10y ago
Large library, I particularly liked the @mention component, first time i see a library providing that.
- vittore 10y ago
  There was react wyswyg editor with this function couple of weeks ago here at HN. Was looking for it too. (https://github.com/jpuri/react-draft-wysiwyg https://github.com/jpuri/react-draft-wysiwyg https://jpuri.github.io/react-draft-wysiwyg/#/demo?_k=fws8cj https://jpuri.github.io/react-draft-wysiwyg/#/demo?_k=fws8cj - look for editor with mentions)
  - biot 10y ago
    That editor doesn't allow editing on mobile Safari (iPad). All the examples are non-functional and some are visually broken as well.
- benjy_c 10y ago
  And you can only import what you need with https://github.com/ant-design/babel-plugin-import https://github.com/ant-design/babel-plugin-import
secoif 10y ago
These components look and work great, but unfortunately are a real headache to retheme unless you want to pull in a sass/less toolchain in addition to what you're currently using. This is a pain in the ass if you already have your theme variables set up in one compiles-to-CSS language. There is a standard for CSS variables and a very functional subset of their functionality can be compiled for older browsers at build time: http://cssnext.io http://cssnext.io, yet as far as I can tell, all of these component frameworks impose some other nonstandard compiles-to-CSS language or one of many possible APIs for writing inline styles. Inline styles seem to be a trend at the moment but I can only assume the people driving this movement haven't had the experience of working with 3rd party components (which you may or may not have the source for) and needing to alter something the designers didn't expose and simply having no simple options because the damn inline style can't be overridden even by !important. Now you've got to fork whole the f'ing component, possibly multiple, each of which potentially coming with yet another different compiles-to-CSS toolchain all because you wanted to add a single line of CSS. Admittedly, antd doesn't use inline styles si the above doesn't apply here, but having to maintain a custom builder for antd in order to change some fonts and a few colors was a frustrating experience. Not sure what a good solution is until CSS variables get more browser adoption, but it'd be great if we could collectively start standardizing on standards.
- Lazare 10y ago
  I agreed that it's been an unsolved problem, but I've been looking at 'styled-components' and I think it may be the answer. At least on paper, it solved the issues you raise. Time will tell I suppose.
- Illniyar 10y ago
  SCSS (and to a lesser degree LESS) are basically industry standard now, if you are using react, you are almost certainly using one of the two preprocessors. I don't think your complaint is relevant here, especially since you provide no solution. It bothers me that this reply is at the top of the comments.
  - prashnts 10y ago
electic 10y ago
I was wondering if someone who is good at JS can compare this to BluePrint[1]? [1] https://github.com/palantir/blueprint https://github.com/palantir/blueprint
- _yesmeck 10y ago
  BluePrint is a great UI toolkit. Ant Design is not only a UI toolkit, it's a design guideline which likes Material[1] and antd[2] it a official implement of Ant Design. [1]https://material.google.com https://material.google.com [2]https://www.npmjs.com/package/antd https://www.npmjs.com/package/antd
- kimshibal 10y ago
  BluePrint is a joke compare to this. Palantir can't create a landing page without crashing my browser.
  - electic 10y ago
    I believe they fixed that. However, either way, I appreciate the contribution of Palantir. Really do not think it is good to ridicule the company for open sourcing their tech.
  - phaed 10y ago
    Would like a comparison to Blueprint that doesn't include the project's landing page.
- dczot 10y ago
  Blueprint is meant for desktop applications. For example, Electron apps. You'll notice Blueprint tries to give that desktop app feel, versus Antd, which does not.
  - TomMarius 10y ago
    It isn't, according to their own words[0], they've never used Blueprint in an Electron (or other desktop) app. [0] https://github.com/palantir/blueprint/issues/202#issuecomment-261617636 https://github.com/palantir/blueprint/issues/202#issuecommen...
mikeryan 10y ago
Man this site is unusable on mobile
fraserharris 10y ago
@__yesmeck Cool! broken link to https://ant.design/docs/pattern/principle https://ant.design/docs/pattern/principle on https://ant.design/docs/spec/introduce https://ant.design/docs/spec/introduce
- _yesmeck 10y ago
  Fixed, thanks!
bflesch 10y ago
Great library, and very good to have an alternative to the react date/timepicker widgets out there. Is someone already working on a bootstrap-themed version of this?
crudbug 10y ago
I was playing with it, great toolkit. The overall design language is neatly done. Is it possible to convert the remaining site pages [0] into english. Also, the mobile friendly components [1] also look great. [0] https://ant.design/docs/pattern/navigation https://ant.design/docs/pattern/navigation [1] https://github.com/ant-design/1x.mobile.ant.design https://github.com/ant-design/1x.mobile.ant.design
datashovel 10y ago
I want to speak generally about new UI components, since this is the 2nd post in a week (about a new library of UI components) that reached front page (that I've seen) which are not addressing what I see as a fundamental issue that future UI libraries should address. For mobile platforms specifically. Now on the surface you can say that UI libraries these days, more or less, will work similarly if not exactly the same across platforms. I would say for most "types" of components this will be true. But form input field behavior is different enough between mobile platforms that I'm questioning why we aren't moving quickly away from native HTML form input fields. I totally get the argument for accessibility (probably a lot of accessibility platforms depend on these fields), but even accessibility standards such as ARIA, because of some of these inconsistencies, should be pushing toward this goal (decoupling the form input UI components from native HTML form input fields) I think. Does anyone else here have a strong opinion one way or another as far as their experience building PWA's on mobile where they've encountered the differences between platforms (I'm specifically familiar with Android vs. iOS)? Do you find the differences to be easy to work around? I'm especially interested in feedback from folks who have required some relatively detailed behaviors, such as consistency in how input fields behave when "tabbing" to the next / previous field, or how the "input type='time'" fields behave differently in terms of when DOM events fire while setting time. Or how native keyboard behaviors / layouts are sufficiently different that you'd prefer to have a way to make the experience within your app more consistent?
eklavya 10y ago
It's so beautiful! Please please make something like this for react native too.
- _yesmeck 10y ago
  We're working hard on mobile version[1]. [1]https://mobile.ant.design https://mobile.ant.design
  - progx 10y ago
    Will it be a separate library?
    - _yesmeck 10y ago
      Yep, it's a separate library but also follows Ant Design's guideline, provide both web (for mobile) and ReactNative version.
  - eklavya 10y ago
    Thanks!! I did open the link but it was in Chinese. I will use this exclusively when it's released.
jbhatab 10y ago
How's this compare to material-ui? I like material ui and it looks like you have some nice components, just curious what the x-factor is. Always up to use a new tool!
- _yesmeck 10y ago
  antd has more components, about 50+.
nodesocket 10y ago
This is the nicest collection of web UX components I've ever seen (better than bootstrap). All of the look and feel (responsiveness and delays) are just right. Animations are not too heavy-handed and add to the experience. Is this by Stripe? The components look just like their dashboard.
- _yesmeck 10y ago
  See floatrock's comment :).
sallar 10y ago
I tried using these components in Buttercup (our open source password vault https://github.com/buttercup-pw/buttercup https://github.com/buttercup-pw/buttercup), but immediately regretted it. It's impossible to theme, the less/css files are dirty and not extensible, defaults mess with your current style, etc. At first look, it looks promising and great but not when you actually try to use it.
- yadongwen 10y ago
  Antd is an official implementation of the ant design language. If you read their introduction (https://ant.design/docs/spec/introduce https://ant.design/docs/spec/introduce) you'll see they target "middleware" products (or 中台应用, which actually should be translated to internal applications) which don't require customized UI and theming.
- benjy_c 10y ago
  Try https://ant.design/docs/react/customize-theme https://ant.design/docs/react/customize-theme
Kiro 10y ago
Has anyone used this? https://github.com/dvajs/dva https://github.com/dvajs/dva
- benjy_c 10y ago
  `dva` is maintained by the same team as `antd`. More than 50 system use this framework in Ant Financial.
- Kiro 10y ago
  Not sure why I'm getting downvoted. I think it's a relevant question. Context: https://ant.design/docs/react/practical-projects https://ant.design/docs/react/practical-projects
cturhan 10y ago
Wow! that's very detailed UI kit. You guys thought all the necessary details when building web apps. It will definitely be my next project's UI kit :)
z3t4 10y ago
The design is good. It look nice! But it is very heavy compared to native HTML and CSS. It's like taking a space ship, to go visit your neighbor.
- mlsarecmg 10y ago
  It's actually super light, i don't know where you got the impression that it's heavy. This is not a monolith but a modular kit - you only load what you use which makes it different from many other UI kits which give you megabytes of CSS on first load. Also, this is native HTML and CSS of course, with proper definition, types and handlers laying out what the component can do: https://github.com/ant-design/ant-design/blob/master/components/button/button.tsx https://github.com/ant-design/ant-design/blob/master/compone... https://github.com/ant-design/ant-design/blob/master/components/button/style/index.less https://github.com/ant-design/ant-design/blob/master/compone... Resulting in: https://ant.design/components/button/ https://ant.design/components/button/
  - z3t4 10y ago
    It's a weak abstraction with maybe hundreds of nested dependencies and many compile steps. A lot of things that can go wrong ... Just to do this: <button>Hello world</button>
    - mlsarecmg 10y ago
      "Just" To "just" use self contained, configurable, property-defined components that can be shared, re-used, filled with state - that isn't trivial. Which is why they're React components. The components themselves are very lean, there's a bit of code, some markup, a piece of CSS and that's that. The code i have linked compiles down to a couple of bytes.
      - z3t4 10y ago
        I do not understand the problem with vanilla HTML and JavaScript. I've been doing it for 18 years so I might be "blind".
chrismorgan 10y ago
This stuff is horrible to use from the keyboard visually, because outlines have been removed without an adequate replacement. Please fix the styles for :focus et al. Make it all obvious, like Microsoft have done in Windows 10 (they have what is pretty much just a 2px solid black outline).
- benjy_c 10y ago
  a11y optimization is in progress, but it is not a high priority job.
  - philjohn 10y ago
    a11y should be the top priority ... especially if you want to see use in countries where there are penalties for sites not complying with disability discrimination legislation. Another issue is your DropDown breaks the power user convention of being able to type the first letter (or more) of an item and the dropdown selecting it.
  - chrismorgan 10y ago
    I can certainly say that I’m flatly not going to use something that fails at keyboard usability like this, because I myself would hate to use it.
    - christophilus 10y ago
      Yeah. I second this. Having non-obvious focus state is a deal-breaker. Obviously, it can be manually added in via CSS overrides on top of this library, but it would be nice for the library itself to have decent focus states.
- uitgewis 10y ago
  Looks like they're open to contributions: https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md https://github.com/ant-design/ant-design/blob/master/.github...
- philfreo 10y ago
dEnigma 10y ago
The site looks pretty bad in a small browser window: http://i.imgur.com/0xVlHbI.png http://i.imgur.com/0xVlHbI.png
- js8 10y ago
  I concur. I run browser only in half of the wide-screen monitor (makes sense, doesn't it?), and it's surprising how many websites are broken in this configuration.
  - fiatjaf 10y ago
    Not to mention the horrible things that happen when you switch from full-screen to half-screen and vice-versa.
iampherocity 10y ago
I like it, there have been a couple projects where this would have cut time in half. Some of the controls were hard to navigate on an iPad Pro. Time in particular was hard to use, not enough space. This is a fault of the resolution of the pro, but if the targets aren't big enough, I'm scrolling the page instead of the hours.
Dowwie 10y ago
For those looking for a cohesive ant design-centered library for Vue, this seems like the react project's counterpart : http://okoala.github.io/vue-antd/#!/components http://okoala.github.io/vue-antd/#!/components The project appears to have far fewer features than the react project at this time
cia48621793 10y ago
This library is very unintuitive and it still looked as ugly as classical css classes.
ohstopitu 10y ago
This looks promising! How does this compare to BlueprintJS [0]? While I did like some components from Antd and intend to look into the source, from a basic overview, a lot of the documentation seems to be in Chinese. [0] http://blueprintjs.com/ http://blueprintjs.com/
brokentone 10y ago
The actual components seem interesting. The odd part of this seems to be the building/requiring process. It seems that there are some implicit dependencies on webpack, which are not well spelled out. It appears the team chose to make an oddly generically named babel plugin: `babel-plugin-import` which seems to do some manipulation of CSS/SASS/etc styles (which seems out of scope for babel). I assume the generic name was chosen hoping other libraries would embrace a similar pattern, however, I'm not seeing any spec defining how another library should implement this. https://www.npmjs.com/package/babel-plugin-import https://www.npmjs.com/package/babel-plugin-import
anilshanbhag 10y ago
The site has some really good components. The only stopping me from using it is its not designed with mobile in mind. You don't get bootstrap like classes 'col-md-6 col-sm-12'. The grid is percentage based.
misiti3780 10y ago
Has anyone used these: http://themes.getbootstrap.com/ http://themes.getbootstrap.com/ How does it compare ?
morejs 10y ago
we use antd component to build our internal applications almost half a year. It improves our efficiency obviously. thanks antd team.

507 points by _yesmeck 10y ago

I don't want to be that guy, and probably will be downvoted for being negative, but why does everything load so slow? People on this thread are saying it's the network speed thing, coming from china and all, but isn't this supposed to have downloaded all the js modules initially? I just keep thinking "it would have been much faster and I wouldn't have to wait for these progress bars to finish if it were just a static page". Why does a documentation need a progress bar anyway?

wwalser 10y ago
The minified version of this library is about 1MB but loading individual modules is possible. I haven't checked my own net tab but I presume the site uses chunking in order to avoid downloading the entire library on the initial load. The data is static and it is probably a SPA, but it's not all loaded on the initial load.

nathanwindsor 10y ago

This looks great! Link doesn't work though...

_yesmeck 10y ago
Which link?

jumasheff 10y ago

Thanks for sharing! Amazing work!

SlyShy 10y ago

Some really beautiful components like the TreeSelect in there, not trivial to build at all. That said, the first time I loaded the page sure took a long time. Kind of sad to need Webpack to create chunks just to recreate the old effect of not loading all the content for your website all at once.

_mg 10y ago
Chunking would be preferable in HTTP 2
yadongwen 10y ago
It's slow probably because the web server is hosted in China..

kimshibal 10y ago

Another good stuff by Chinese team. For Vue components, we have support from Ele.me

aryehof 10y ago

I can only imagine. Nothing shows but a blank page when clicking a site link in my iPad.

floatrock 10y ago

For those wondering who it comes from, https://ant.design/docs/spec/introduce#Who-are-using-Ant-Design https://ant.design/docs/spec/introduce#Who-are-using-Ant-Des... The first (and presumably namesake) company is Ant Financial https://www.antgroup.com https://www.antgroup.com, which is described as: > Ant Financial Services Group ("Ant Financial"), was officially founded in October 2014 and originated from Alipay which is the world's leading third-party payment platform founded in 2004. So basically if Bootstrap came out of Twitter, this came out of Alibaba and Co. Big name behind it.

yadongwen 10y ago
AFAIK and.design has been used heavily in alibaba for internal applications
gustix 10y ago
Alibaba is also working on a ReactNative competitor for Vue, called Weex: https://alibaba.github.io/weex/ https://alibaba.github.io/weex/
- kimshibal 10y ago
  we are using Weex for our app on production. Weex is pretty solid platform
  - victormustar 10y ago
    Hey, can you tell us more? I'm very interested in Weex :) What make it solid ? what are the pros/cons ? Last time I checked I thought I need to know chinese as 95% of issues are in chinese for example. Is it still a prob ?
    - WA 10y ago
      Hit the demos for Weex and compare them to Ionic 2. It's still day and night imho, whereas Ionic 2 looks very polished.

Rodeoclash 10y ago

What's the filesize for this?

_yesmeck 10y ago
The minified version is about 1MB, see https://unpkg.com/antd@2.5.0/dist/ https://unpkg.com/antd@2.5.0/dist/ . But you can import component individually by using this babel plugin https://github.com/ant-design/babel-plugin-import https://github.com/ant-design/babel-plugin-import, see https://ant.design/docs/react/getting-started#Import-on-Demand https://ant.design/docs/react/getting-started#Import-on-Dema...
- karmajunkie 10y ago
  This is really well executed, well done. I noticed a link to data visualization and graphics pages, but unfortunately I don't read chinese. Are there plans to wrap that stuff up in React in a similar fashion?
  - benjy_c 10y ago
    You can try Google translator..
    - dxq613 10y ago
      github:https://github.com/antvis/g2 https://github.com/antvis/g2 guide: https://github.com/antvis/g2/wiki/How-to-create-a--chart https://github.com/antvis/g2/wiki/How-to-create-a--chart api: https://github.com/antvis/g2/wiki/API https://github.com/antvis/g2/wiki/API

tschellenbach 10y ago

Large library, I particularly liked the @mention component, first time i see a library providing that.

vittore 10y ago
There was react wyswyg editor with this function couple of weeks ago here at HN. Was looking for it too. (https://github.com/jpuri/react-draft-wysiwyg https://github.com/jpuri/react-draft-wysiwyg https://jpuri.github.io/react-draft-wysiwyg/#/demo?_k=fws8cj https://jpuri.github.io/react-draft-wysiwyg/#/demo?_k=fws8cj - look for editor with mentions)
- biot 10y ago
  That editor doesn't allow editing on mobile Safari (iPad). All the examples are non-functional and some are visually broken as well.
benjy_c 10y ago
And you can only import what you need with https://github.com/ant-design/babel-plugin-import https://github.com/ant-design/babel-plugin-import

secoif 10y ago

These components look and work great, but unfortunately are a real headache to retheme unless you want to pull in a sass/less toolchain in addition to what you're currently using. This is a pain in the ass if you already have your theme variables set up in one compiles-to-CSS language. There is a standard for CSS variables and a very functional subset of their functionality can be compiled for older browsers at build time: http://cssnext.io http://cssnext.io, yet as far as I can tell, all of these component frameworks impose some other nonstandard compiles-to-CSS language or one of many possible APIs for writing inline styles. Inline styles seem to be a trend at the moment but I can only assume the people driving this movement haven't had the experience of working with 3rd party components (which you may or may not have the source for) and needing to alter something the designers didn't expose and simply having no simple options because the damn inline style can't be overridden even by !important. Now you've got to fork whole the f'ing component, possibly multiple, each of which potentially coming with yet another different compiles-to-CSS toolchain all because you wanted to add a single line of CSS. Admittedly, antd doesn't use inline styles si the above doesn't apply here, but having to maintain a custom builder for antd in order to change some fonts and a few colors was a frustrating experience. Not sure what a good solution is until CSS variables get more browser adoption, but it'd be great if we could collectively start standardizing on standards.

Lazare 10y ago
I agreed that it's been an unsolved problem, but I've been looking at 'styled-components' and I think it may be the answer. At least on paper, it solved the issues you raise. Time will tell I suppose.
Illniyar 10y ago
SCSS (and to a lesser degree LESS) are basically industry standard now, if you are using react, you are almost certainly using one of the two preprocessors. I don't think your complaint is relevant here, especially since you provide no solution. It bothers me that this reply is at the top of the comments.
- prashnts 10y ago

electic 10y ago

I was wondering if someone who is good at JS can compare this to BluePrint[1]? [1] https://github.com/palantir/blueprint https://github.com/palantir/blueprint

_yesmeck 10y ago
BluePrint is a great UI toolkit. Ant Design is not only a UI toolkit, it's a design guideline which likes Material[1] and antd[2] it a official implement of Ant Design. [1]https://material.google.com https://material.google.com [2]https://www.npmjs.com/package/antd https://www.npmjs.com/package/antd
kimshibal 10y ago
BluePrint is a joke compare to this. Palantir can't create a landing page without crashing my browser.
- electic 10y ago
  I believe they fixed that. However, either way, I appreciate the contribution of Palantir. Really do not think it is good to ridicule the company for open sourcing their tech.
- phaed 10y ago
  Would like a comparison to Blueprint that doesn't include the project's landing page.
dczot 10y ago
Blueprint is meant for desktop applications. For example, Electron apps. You'll notice Blueprint tries to give that desktop app feel, versus Antd, which does not.
- TomMarius 10y ago
  It isn't, according to their own words[0], they've never used Blueprint in an Electron (or other desktop) app. [0] https://github.com/palantir/blueprint/issues/202#issuecomment-261617636 https://github.com/palantir/blueprint/issues/202#issuecommen...

mikeryan 10y ago

Man this site is unusable on mobile

fraserharris 10y ago

@__yesmeck Cool! broken link to https://ant.design/docs/pattern/principle https://ant.design/docs/pattern/principle on https://ant.design/docs/spec/introduce https://ant.design/docs/spec/introduce

_yesmeck 10y ago
Fixed, thanks!

bflesch 10y ago

Great library, and very good to have an alternative to the react date/timepicker widgets out there. Is someone already working on a bootstrap-themed version of this?

crudbug 10y ago

I was playing with it, great toolkit. The overall design language is neatly done. Is it possible to convert the remaining site pages [0] into english. Also, the mobile friendly components [1] also look great. [0] https://ant.design/docs/pattern/navigation https://ant.design/docs/pattern/navigation [1] https://github.com/ant-design/1x.mobile.ant.design https://github.com/ant-design/1x.mobile.ant.design

datashovel 10y ago

I want to speak generally about new UI components, since this is the 2nd post in a week (about a new library of UI components) that reached front page (that I've seen) which are not addressing what I see as a fundamental issue that future UI libraries should address. For mobile platforms specifically. Now on the surface you can say that UI libraries these days, more or less, will work similarly if not exactly the same across platforms. I would say for most "types" of components this will be true. But form input field behavior is different enough between mobile platforms that I'm questioning why we aren't moving quickly away from native HTML form input fields. I totally get the argument for accessibility (probably a lot of accessibility platforms depend on these fields), but even accessibility standards such as ARIA, because of some of these inconsistencies, should be pushing toward this goal (decoupling the form input UI components from native HTML form input fields) I think. Does anyone else here have a strong opinion one way or another as far as their experience building PWA's on mobile where they've encountered the differences between platforms (I'm specifically familiar with Android vs. iOS)? Do you find the differences to be easy to work around? I'm especially interested in feedback from folks who have required some relatively detailed behaviors, such as consistency in how input fields behave when "tabbing" to the next / previous field, or how the "input type='time'" fields behave differently in terms of when DOM events fire while setting time. Or how native keyboard behaviors / layouts are sufficiently different that you'd prefer to have a way to make the experience within your app more consistent?

eklavya 10y ago

It's so beautiful! Please please make something like this for react native too.

_yesmeck 10y ago
We're working hard on mobile version[1]. [1]https://mobile.ant.design https://mobile.ant.design
- progx 10y ago
  Will it be a separate library?
  - _yesmeck 10y ago
    Yep, it's a separate library but also follows Ant Design's guideline, provide both web (for mobile) and ReactNative version.
- eklavya 10y ago
  Thanks!! I did open the link but it was in Chinese. I will use this exclusively when it's released.

jbhatab 10y ago

How's this compare to material-ui? I like material ui and it looks like you have some nice components, just curious what the x-factor is. Always up to use a new tool!

_yesmeck 10y ago
antd has more components, about 50+.

nodesocket 10y ago

This is the nicest collection of web UX components I've ever seen (better than bootstrap). All of the look and feel (responsiveness and delays) are just right. Animations are not too heavy-handed and add to the experience. Is this by Stripe? The components look just like their dashboard.

_yesmeck 10y ago
See floatrock's comment :).

sallar 10y ago

I tried using these components in Buttercup (our open source password vault https://github.com/buttercup-pw/buttercup https://github.com/buttercup-pw/buttercup), but immediately regretted it. It's impossible to theme, the less/css files are dirty and not extensible, defaults mess with your current style, etc. At first look, it looks promising and great but not when you actually try to use it.

yadongwen 10y ago
Antd is an official implementation of the ant design language. If you read their introduction (https://ant.design/docs/spec/introduce https://ant.design/docs/spec/introduce) you'll see they target "middleware" products (or 中台应用, which actually should be translated to internal applications) which don't require customized UI and theming.
benjy_c 10y ago
Try https://ant.design/docs/react/customize-theme https://ant.design/docs/react/customize-theme

Kiro 10y ago

Has anyone used this? https://github.com/dvajs/dva https://github.com/dvajs/dva

benjy_c 10y ago
`dva` is maintained by the same team as `antd`. More than 50 system use this framework in Ant Financial.
Kiro 10y ago
Not sure why I'm getting downvoted. I think it's a relevant question. Context: https://ant.design/docs/react/practical-projects https://ant.design/docs/react/practical-projects

cturhan 10y ago

Wow! that's very detailed UI kit. You guys thought all the necessary details when building web apps. It will definitely be my next project's UI kit :)

z3t4 10y ago

The design is good. It look nice! But it is very heavy compared to native HTML and CSS. It's like taking a space ship, to go visit your neighbor.

mlsarecmg 10y ago
It's actually super light, i don't know where you got the impression that it's heavy. This is not a monolith but a modular kit - you only load what you use which makes it different from many other UI kits which give you megabytes of CSS on first load. Also, this is native HTML and CSS of course, with proper definition, types and handlers laying out what the component can do: https://github.com/ant-design/ant-design/blob/master/components/button/button.tsx https://github.com/ant-design/ant-design/blob/master/compone... https://github.com/ant-design/ant-design/blob/master/components/button/style/index.less https://github.com/ant-design/ant-design/blob/master/compone... Resulting in: https://ant.design/components/button/ https://ant.design/components/button/
- z3t4 10y ago
  It's a weak abstraction with maybe hundreds of nested dependencies and many compile steps. A lot of things that can go wrong ... Just to do this: <button>Hello world</button>
  - mlsarecmg 10y ago
    "Just" To "just" use self contained, configurable, property-defined components that can be shared, re-used, filled with state - that isn't trivial. Which is why they're React components. The components themselves are very lean, there's a bit of code, some markup, a piece of CSS and that's that. The code i have linked compiles down to a couple of bytes.
    - z3t4 10y ago
      I do not understand the problem with vanilla HTML and JavaScript. I've been doing it for 18 years so I might be "blind".

chrismorgan 10y ago

This stuff is horrible to use from the keyboard visually, because outlines have been removed without an adequate replacement. Please fix the styles for :focus et al. Make it all obvious, like Microsoft have done in Windows 10 (they have what is pretty much just a 2px solid black outline).

benjy_c 10y ago
a11y optimization is in progress, but it is not a high priority job.
- philjohn 10y ago
  a11y should be the top priority ... especially if you want to see use in countries where there are penalties for sites not complying with disability discrimination legislation. Another issue is your DropDown breaks the power user convention of being able to type the first letter (or more) of an item and the dropdown selecting it.
- chrismorgan 10y ago
  I can certainly say that I’m flatly not going to use something that fails at keyboard usability like this, because I myself would hate to use it.
  - christophilus 10y ago
    Yeah. I second this. Having non-obvious focus state is a deal-breaker. Obviously, it can be manually added in via CSS overrides on top of this library, but it would be nice for the library itself to have decent focus states.
uitgewis 10y ago
Looks like they're open to contributions: https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md https://github.com/ant-design/ant-design/blob/master/.github...
philfreo 10y ago

dEnigma 10y ago

The site looks pretty bad in a small browser window: http://i.imgur.com/0xVlHbI.png http://i.imgur.com/0xVlHbI.png

js8 10y ago
I concur. I run browser only in half of the wide-screen monitor (makes sense, doesn't it?), and it's surprising how many websites are broken in this configuration.
- fiatjaf 10y ago
  Not to mention the horrible things that happen when you switch from full-screen to half-screen and vice-versa.

iampherocity 10y ago

I like it, there have been a couple projects where this would have cut time in half. Some of the controls were hard to navigate on an iPad Pro. Time in particular was hard to use, not enough space. This is a fault of the resolution of the pro, but if the targets aren't big enough, I'm scrolling the page instead of the hours.

Dowwie 10y ago

For those looking for a cohesive ant design-centered library for Vue, this seems like the react project's counterpart : http://okoala.github.io/vue-antd/#!/components http://okoala.github.io/vue-antd/#!/components The project appears to have far fewer features than the react project at this time

cia48621793 10y ago

This library is very unintuitive and it still looked as ugly as classical css classes.

ohstopitu 10y ago

This looks promising! How does this compare to BlueprintJS [0]? While I did like some components from Antd and intend to look into the source, from a basic overview, a lot of the documentation seems to be in Chinese. [0] http://blueprintjs.com/ http://blueprintjs.com/

brokentone 10y ago

The actual components seem interesting. The odd part of this seems to be the building/requiring process. It seems that there are some implicit dependencies on webpack, which are not well spelled out. It appears the team chose to make an oddly generically named babel plugin: `babel-plugin-import` which seems to do some manipulation of CSS/SASS/etc styles (which seems out of scope for babel). I assume the generic name was chosen hoping other libraries would embrace a similar pattern, however, I'm not seeing any spec defining how another library should implement this. https://www.npmjs.com/package/babel-plugin-import https://www.npmjs.com/package/babel-plugin-import

anilshanbhag 10y ago

The site has some really good components. The only stopping me from using it is its not designed with mobile in mind. You don't get bootstrap like classes 'col-md-6 col-sm-12'. The grid is percentage based.

misiti3780 10y ago

Has anyone used these: http://themes.getbootstrap.com/ http://themes.getbootstrap.com/ How does it compare ?

morejs 10y ago

we use antd component to build our internal applications almost half a year. It improves our efficiency obviously. thanks antd team.