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
1
vote
1 answer

How to set height of individual bars in Ant Design Stacked Bar?

I am using Ant Design Charts to create a stacked bar but I want it to be responsive. When I am removing data items, the bars get too thick to fill the available space. So basically, I want the bars to have fixed height so that they don't get too…
1
vote
1 answer

how to filter tags in Select component- ReactJS

I have following code, and I hope you can help me to resolve my issue. The code: import React from "react"; import { Select } from "antd"; const { Option } = Select; const data = [ { id: 55, name: "Appraisals" }, { id:…
1
vote
1 answer

How can i validate the name input with allow numbers

Why the rules are not working? i am using antd inputs, now i want to validate the fields, what thing i need to do to use the rules for the inputs?
letters
  • 37
  • 6
1
vote
0 answers

Upload avatar to firebase with Antd in React

How can I use Upload component in Ant Design to upload avatar to Firebase? Here is what I used and tried in React: // Modal hook const [modal1Open, setModal1Open] = useState(false); // Upload new avatar const [loading, setLoading] =…
Wonster
  • 27
  • 6
1
vote
1 answer

how use onPaste in antD inputNumber Field to prevent input other than integers

I was using antD in my react project, I was using inputNumber Component of antD to get input, all I wanted is integer input and wanted to prevent all the other input from all source such as copy-pasting, keyboard. is there any way to do this?
1
vote
0 answers

How to make such a Grid in antd

How to make such a Grid in antd ? I have not found how to set the height of the first element to 2 lines. .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; grid-auto-flow: row; …
qwerty
  • 205
  • 2
  • 10
1
vote
0 answers

Ant Design Upload component rescales images to 200x200 [React]

I met an issue at Ant Design component. When I upload an image it sends two Img typed requests at the Network console. First contains my orginal image (tested at 650x650 image size), second contains transformed image to 200x200. And here…
Amaranthus
  • 11
  • 5
1
vote
0 answers

Generate a dynamic antd grid for a dynamic antd form

I have created this dynamic form using antd: return ( {fieldData.fields.map((field) => ( …
Adib Baji
  • 69
  • 5
1
vote
0 answers

React Quill with React-Redux form validation not working properly

Iam using antd form and ReactQuill in my code,
Lex V
  • 1,414
  • 4
  • 17
  • 35
1
vote
1 answer

persist selected option in antd select in react js

I am developing one reactjs project in which I am using antd select component to show company list. Selecting any company name will show users registered under that company name. Here, attached video is of root user who can enable/disable the…
Drashti Kheni
  • 1,065
  • 9
  • 23
1
vote
1 answer

Nz TreeSelect. How to display parent node name in children?

I have tree select with options. When i click on Name, it displays Name, but I want it to be Item > Name, because this is children node. What should I do ? I found [nzDisplayWith], but it doesn't help. const options = [{ { title:…
Vova
  • 39
  • 4
1
vote
1 answer

Antd DatePicker: Input in extra footer can't change, select or focus

I am working with antd Datepicker and I want custom Datepicker component look like this. Now, I use prop renderExtraFooter to add custom footer. My input time in footer is other lib (react-datepicker). My problem is here. I can't change, select,…
Phát Nguyễn
  • 155
  • 2
  • 16
1
vote
0 answers

Antd Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

im using ProgressBar from antd, made a simple password strength checker, everything working fine. When password strength is 100% showing this: https://i.vgy.me/TlfBCK.png And after show this if i remove any char from password. Im getting this…
Selcukusu
  • 75
  • 8
1
vote
0 answers

How to write unittest for table row selection using Antd Library in React

I have a react application and I'm using @testing-library/jest-dom for unit testing and antd 3.x library for UI design. In one of my UI screen there is a table and a button where the button only enables when one of the row in table is checked. So I…
ahkam
  • 607
  • 7
  • 24
1
vote
0 answers

Ant Design table pagination inconsistent after changing page and subsequent data change

Using antd 4.22.8 with react 18.2.0 (cra). Typescript code ahead I'm using this code to fetch the data I need to show const [pagination, setPagination] = useState({ current: 1, pageSize: 10 }); const [sort, setSort] =…
Valerio
  • 3,297
  • 3
  • 27
  • 44
1 2 3
99
100