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
0 answers

How to test ant design Select and Option properly using react-testing-library?

Hi i read all next asks: ant design v4 breaks react testing library tests for Select and Autocomplete How to change ant design select option using react testing library Ant Design and React Testing Library Ant Design & React Testing Library -…
Manuel MÑ
  • 21
  • 1
1
vote
0 answers

How to import a type from antd?

I want to import a type from antd-ui, like this import { StepsProps } from 'antd' and then Module parse failed: Unexpected token (14:30) File was processed with these loaders: * ./node_modules/ts-loader/index.js You may need an additional loader…
imYuxh
  • 11
  • 1
1
vote
2 answers

Customizing weekend using css

I am using antd DatePicker for date range purposes. How can I style the days that are sundays using css. Help will be appreciated edit: I am getting this blue background between start , range and the end. I want that to be continous. Also there is…
user16860065
1
vote
1 answer

antd table onChange sorter not getting "undefined"

I have created a antd table in react with all the data. I needed to implement a sort function for two of the column Name and Last Updated At. For that I used the onChange={(val:any, filter:any, sorter:any}) function of the antd table and get the…
Athavan T
  • 306
  • 2
  • 15
1
vote
1 answer

Issue with animation and state

I'm creating a side menu with navigation which I want to animate sliding. In various tutorials it's pretty simple. Create state and with that controll transform - easy. So I have my SideNav.tsx component below: import { Button, Menu } from…
1
vote
0 answers

antd locale: change single value of a translation

I have switched antd to use German translation which was quite straightforward: import de from 'antd/es/locale/de_DE'; Now I like to change a single value of this translation that I find…
nerdess
  • 10,051
  • 10
  • 45
  • 55
1
vote
1 answer

Ant Design - Select - remove/hide dropdown when there is no data

I have tried notFoundContent={undefined} but it does not work. Is there any way else to solve this???
Nomad
  • 23
  • 5
1
vote
0 answers

Err 400 "location.address.each value in nested property address must be either object or array"

Hoping to get some help with an error I have been getting. I am working on a page dedicated on creating different social events. I have a data type which is: export interface NewEventType { eventDetails?: EventDetails; eventType?: string; …
royalTiger
  • 11
  • 2
1
vote
1 answer

Ant Design Timepicker - get input value onKeyUp

How can I get the value of the Timepicker input as it is typed ? Looked into the documentation and the 2 events are available, onChange and onSelect. Neither of which help solve my need. Any idea ?
coderdonezo
  • 399
  • 1
  • 12
1
vote
0 answers

How to search in the antd dropdown and if the entered option is not available then it should add new option?

How to search in the antd dropdown and if the entered option is not available then it should add new option, it should be only single value selector.I have a dropdown in which i get the options from api, it is a search dropdown , so when i enter the…
front_dev_j
  • 139
  • 1
  • 12
1
vote
1 answer

Ant date picker show single calendar instead of two calendars

I am using antd range picker for date range selection. By default antd gives two calendars for range selection. It gives us two inputs with which the calendars are opened. Now I need a single calendar that has this range selection functionality.…
user16860065
1
vote
1 answer

Ant design form in react

help me! setvalue doesn't work, but when I remove the name attribute in Form.Item it works normally, is there any way without removing the name attribute and still working properly? antd https://codesandbox.io/s/21jbmg?file=/demo.js import { Form,…
phu quang
  • 11
  • 2
1
vote
1 answer

Use Antd select with mode tags but allow only one selection

I'm using Antd Select for a project. My requirement is to use Select with mode='tags' as it allows user to create a new option, but I also want user to select only one option at a time (i.e either have a new option created or have an existing…
1
vote
1 answer

How to change antd pro-component's SettingDrawer text/locales from default Chinese to English

I am integrating antd's pro-components, specifically @ant-design/pro-layout according to their document. I have converted all Chinese text to English except text in SettingDrawer component. Screenshot attached Here is the playground…
Premchandra Singh
  • 14,156
  • 4
  • 31
  • 37
1
vote
0 answers

Is it possible to insert video inside antd image preview

I am trying to insert a "
1 2 3
99
100