Use the Rate component
masterThe
Rate component is used to display ratings or to allow users to perform quick rating operations on items.Ant Design
repository·master·Indexed 11 days ago
https://github.com/ant-design/ant-designAn enterprise-class UI design language and React UI library providing a comprehensive set of high-quality components, design resources, and tools for building complex web applications. Written in TypeScript, it features CSS-in-JS theme customization, internationalization support, and compatibility with modern browsers, SSR, and Electron. Version 6.6.0 introduces the Listy component for virtualized lists and expanded global configuration via ConfigProvider.
What's inside Ant Design
Button Component Overview
masterThe
Buttoncomponent is used to trigger immediate actions in response to user clicks. Ant Design provides five main button types and four states to cover various interaction scenarios.Button Types
- Primary (
primary): The main action point. There should only be one primary button per action area. - Default (
default): Used for a group of actions where no single action is more important than others. - Dashed (
dashed): Commonly used for 'add' operations. - Text (
text): For the least significant actions. - Link (
link): Generally used for navigation to a specific location.
Button States
- Danger (
danger): For destructive actions like deleting or modifying permissions. Usually requires secondary confirmation. - Ghost (
ghost): Used when the background is complex (e.g., on a product page or homepage) to make the button background transparent. - Disabled (
disabled): When the action is currently unavailable. - Loading (
loading): For asynchronous operations to provide feedback and prevent multiple submissions.
- Primary (
Use the Segmented component
masterThe
Segmentedcomponent is used to display multiple options and allow users to select a single option. It is ideal for scenarios where switching the selected option changes the content of an associated area.Available since
antd@4.20.0.Use the Divider component
masterThe
Dividercomponent is used to separate different content sections. Common use cases include:- Dividing sections of an article.
- Dividing inline text and links, such as in the operation column of a table.
How Ant Design uses GitHub Actions for CI/CD
masterAnt Design utilizes GitHub Actions across several domains to maintain project quality:
- Community management: Automating quality checks on issues and pull requests using comments and labels.
- Code quality: Enforcing standards using ESLint and Prettier.
- Testing: Running unit and snapshot tests via Jest and testing-library.
- Build: Generating ES5 and ES6 module specifications for cross-environment compatibility.
- Deployment: Automatically generating and publishing documentation via dumi to GitHub Pages.
Use Typography components for text formatting
masterUse theTypographycomponent to display headings, paragraphs, or list content (e.g., for articles, blogs, or logs). It also provides built-in text-based actions like copying, ellipsis (truncation), and editing.Use the DatePicker component
masterTheDatePickercomponent allows users to select or input a date via a popup calendar triggered by clicking an input box. It is categorized under Data Entry components.Use the Steps component
masterThe
Stepscomponent is a navigation bar used to guide users through a sequence of subtasks. It is ideal for decomposing complex tasks into manageable, sequential steps.Common use cases include:
- Multi-step forms
- Progress tracking for long-running processes
- Sequential wizards or setup guides
Ant Design Overview and Features
masterAnt Design is an enterprise-class UI design language and React UI library.
Key Features:
- High-quality React components out of the box.
- Written in TypeScript with predictable static types.
- Internationalization support for dozens of languages.
- Powerful theme customization based on CSS-in-JS.
- Design resources and development tools included.
Environment Support:
- Modern browsers (Edge, Firefox, Chrome, Safari)
- Server-side Rendering (SSR)
- Electron
ColorPicker Component Overview
masterTheColorPickercomponent allows users to select colors. It supports both single color selection and gradient selection. It can be used in both controlled and uncontrolled modes and provides various ways to format and display color values (hex, rgb, hsb).Use the Alert component
masterTheAlertcomponent is used to display warning or informational messages to users. It can be used as a persistent static container that is optionally closable by user actions. It supports different styles likeoutlinedorfilledand different semantic types likesuccess,info,warning, anderror.Use the Pagination component
masterThe
Paginationcomponent is used to divide long lists into multiple pages, improving load times and allowing users to navigate through data sets. It can be used in a controlled or uncontrolled manner.Common use cases:
- When rendering a large number of items that would take too long to load at once.
- When you want to provide a structured way for users to browse through data pages.
<Pagination onChange={onChange} total={50} />