Questions tagged [antd]

This tag should be used for any questions regarding the Ant Design. It is an enterprise-class UI design language and React-based implementation.

Ant Design

An enterprise-class UI design language and React implementation.

✨ Features

  • An enterprise-class UI design system for web applications.
  • A set of high-quality React components out of the box.
  • Written in TypeScript with predictable static types.
  • The whole package of development and design resources and tools.

Environment Support

  • Modern browsers and Internet Explorer 9+ (with polyfills)
  • Server-side Rendering
  • Electron

Install

npm install antd
yarn add antd

Usage

import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);

And import style manually:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

Or import components on demand.

TypeScript

See Use in TypeScript.

Internationalization

See i18n.

Links

⌨️ Development

Use Gitpod, a free online dev environment for GitHub.

Open in Gitpod

Or clone locally:

$ git clone git@github.com: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

Read our contributing guide and let's build a better antd together.

We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues. If you'd like to improve the codebase, check out the Development Instructions and have a good time! :)

If you are a collaborator, please follow our Pull Request principle to create a Pull Request by collaborator template.

5144 questions
28
votes
8 answers

react-router+antD/ How to highlight a menu item when press back/forward button?

I create a menu and want to highlight the item which i choose,and i did it. But when i press back/forward button,the menu item don't highlight. What should i do? I have tried to use addEventListener but failed. Have someone could give some advice?…
Eve
  • 369
  • 1
  • 3
  • 6
27
votes
5 answers

How to wrap up Ant Design with Styled Components and TypeScript?

I want to wrap up my ant-design components with styled-components, I know that this is possible (https://gist.github.com/samuelcastro/0ff7db4fd54ce2b80cd1c34a85b40c08) however I'm having troubles to do the same with TypeScript. This is what I have…
Samuel Castro
  • 291
  • 1
  • 3
  • 5
27
votes
2 answers

React | Ant design select default value

I'm using ant design in my project. Here I have a select as a dynamic field. when I trying to set default value for select. It doesn't work.
FE_Addict
  • 647
  • 2
  • 11
  • 21
26
votes
9 answers

Antd source map not supported in React

I have an issue regarding the integration of Ant Design library in a CRA (create-react-app). After I have tried to integrate it as it is required in their documentation, without integration of Craco, I always get these 4 warnings: WARNING in…
SB7x
  • 453
  • 1
  • 3
  • 7
26
votes
2 answers

How to make a responsive grid, using Ant Design?

I try to follow this documentation, but i can't make this work. I want to make the boxes break into one column for small screens, just like the follow examples. Into Do i have to use css insted of default components?
D0rm1nd0
  • 1,333
  • 1
  • 15
  • 19
25
votes
11 answers

Antd datepicker (date.clone/date.load is not a function)

I have a react app. There is a checkbox which disables the datepicker. But I can't select any date when I'm using checkbox to disable it. If I remove checkbox and its function there is no error. Currently, I'm getting: date.clone is not a…
Gunsela
  • 360
  • 1
  • 7
  • 18
25
votes
5 answers

Attempted import error: 'Icon' is not exported from 'antd'

I have created a react app using 'create-react-app' and in one of my project files, i'm using the following import statement; import { Icon } from 'antd', and receiving the following error: Attempted import error: 'Icon' is not exported from…
Mushood Hanif
  • 501
  • 1
  • 5
  • 17
25
votes
1 answer

Violation Forced reflow while executing Javascript in console when tooltip appear on slider handle

I have a web page with some elements and Ant.design slider. My slider values are controlled via React states. When the slider tooltip is turn on, the slider is very slow to react and in the console I see: [Violation] Forced reflow while executing…
Evgeniy
  • 3,219
  • 5
  • 25
  • 40
24
votes
4 answers

Ant design responsive NavBar

I'm using AntD, thought it would be an easy and quick set up for a common and standard Responsive NavBar, but it turned out it's not responsive by default: As you can see, it's squashed. Here is the code:
Franva
  • 6,565
  • 23
  • 79
  • 144
24
votes
6 answers

Antd UI library. Overriding behavior on empty data
I want to render some other content if
receives empty data Array. Currently its just showing 'No data', but I want to put some custom component there. How this may be done?
Федор Усаков
  • 1,205
  • 2
  • 13
  • 29
23
votes
6 answers

how to get field value on change for FormItem in antd

I am having a hard time with antd's form. I have this select field in this form and I want to get the value from it onChange but somehow not getting it to work properly. say this is the item for which I want the values
faraz
  • 2,603
  • 12
  • 39
  • 61
23
votes
2 answers

Ant Design antd vs antd-mobile for non-native mobile web development

Reading about Ant Design I am getting confused about which library to use for mobile web development. There are two libraries, antd and antd-mobile. While it is clear that antd-mobile supports react-native on iOS and Android, it is unclear which one…
Thijs Koerselman
  • 21,680
  • 22
  • 74
  • 108
22
votes
8 answers

How to switch between themes in Ant design v4 dynamically?

I'd like to implement switching between dark/light theme dynamically with Ant design v4. It's possible to customize the theme with other CSS/LESS imports as it's written here: https://ant.design/docs/react/customize-theme#Use-dark-theme But I'm not…
J V
  • 703
  • 2
  • 7
  • 12
22
votes
1 answer

react-hook-form reset is not working with Controller + antd

I'm trying to use react-hook-form together with the antd component I'm not getting reset to work with Here is my code: const NormalLoginForm = () =>{ const {reset, handleSubmit, control} = useForm(); const onSubmit =…
emcell
  • 623
  • 1
  • 6
  • 13