Stack Overflow
Stack Overflow

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 remove duplication of code in styled components

Currently, I am using antd and styled components in my project. However, while using antd as a component of styled components, the following code was repeated. import { DownOutlined, VerticalLeftOutlined } from '@ant-design/icons'; import styled…
Clloud
  • 65
  • 5
1
vote
1 answer

React: How to create a select multiple input that accepting same value

I'm using antd library and reactJS. I want the user to be able to input multiple values into a select multiple input statement, and the user can input the same value at once. Something like: [20, 100, 100]. Currently in normal multiple or tags mode,…
Ruslan Ashaari
  • 11
  • 2
1
vote
1 answer

AntD Form submit is giving error: " need to revalidate"

I have an AntD Form having multiple fields. I am using Form from "@ant-design/compatible". One of the field in the form is Radio having options as 'yes' and 'no' with initial value 'no'. When I try to submit the form, the validateFieldsAndScroll…
Chandu Naga Sreenivas Velluri
  • 11
  • 2
1
vote
2 answers

React Antd Show or Hide Columns of antd table via a group of antd checkboxes

I want to give the user an option to hide or show columns of Antd table via a group of checkboxes. I tried different online solutions but I didn't succeed. I want something like this, as in the below picture. note: some columns has been checked by…
naeem
  • 43
  • 8
1
vote
1 answer

How to change the Background Color of the Ant-Design 'Select' component?

Suppose I want to change the standard white background color of the Select component dynamically based on selection. I found a solution on the internet .ant-select-selection { background-color: green; } but this is static. It should be like…
Bablu Ahmed
  • 4,412
  • 5
  • 49
  • 64
1
vote
2 answers

Don't Show filelist in antd-Upload if URL is empty

Here, I am passing Url as an prop to display uploaded files in edit Modal. All I want is, to not show any attachment if Url is empty. I can srill see empty attachments like shown in image : export const FileUploader = ({ label, Url, setUrl,…
Anchal Gupta
  • 53
  • 7
1
vote
2 answers

Test antd dropdown with @testing-library/react

I'm struggling with test which would select some value from dropdown component (antd). Here is component that I would like to test: import React, { useState } from 'react'; import { Form, Select, Modal } from 'antd'; import…
i474232898
  • 781
  • 14
  • 25
1
vote
2 answers

Overriding antd component style for just one component

Working with antd components, if you have an Alert component, inside there is a tooltip that is given the styling through ​ant-alert-icon​ class. So, if we need to override the Tooltip color, you can have in your stylesheet a class to override the…
John Barton
  • 1,581
  • 4
  • 25
  • 51
1
vote
0 answers

Looking to sort the column where cell renders select with ANTD

I am using the antd table to render the data and render select as cell data like the one below in the image, but having problems with sorting the same column based on the selected option name. The dataIndex is Id, and I am using that dataIndex to…
kumar425
  • 95
  • 8
1
vote
1 answer

onBlur is getting triggered when date is selected

I am using controlled datepicker with a flag open that could be used to open or close the date picker. onBlur is getting triggered when clicked outside, resulting it to close. But when I am trying to select the range, it is not letting me, instead…
user16860065
1
vote
0 answers

Handle upload multiple files in Dragger ant design component react js

i'm trying upload multiple file with Dragger of ant design, but when I upload multiple files the onChange event is also called multiple times, it causes duplicate files const handleChange = ({ fileList }) => { console.log(fileList); …
Đạt Phạm
  • 11
  • 2
1
vote
1 answer

How to solve the problem that the file name of antd upload is broken

Currently, in my project, I am using ant-design upload as follows.
Clloud
  • 65
  • 5
1
vote
1 answer

Antd_dayjs_vite_plugin : TypeError: (0 , import_antd_dayjs_vite_plugin.default) is not a function

At the beginning I got a problem with the french date in the antd calendar. I use vite so I install the antd_dayjs_vite_plugin to switch from Moment.js to Day.js. It worked well but this morning the vite build process is in error. I tried to update…
Laurent Décamps
  • 11
  • 2
1
vote
0 answers

Filter popup flickering in Ant design Table

In below ant design table, For First "Name" Column filter functionality is added. But when I select any option like "Joe" and press "ok", then filter popup is kind of flickering before closing. Code link:…
harshini gulipalli
  • 141
  • 7
1 2 3
…
99 100