antd

What is antd?

The antd npm package is a UI design language and React UI library that provides a lot of out-of-the-box components and tools to help developers build user interfaces efficiently. It is widely used for enterprise-level applications and admin UIs due to its comprehensive set of components and professional look.

What are antd's main functionalities?

Layout

Provides a set of components to create a layout structure for your application, including headers, footers, sidebars, and content areas.

import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;

ReactDOM.render(
  <Layout>
    <Header>Header</Header>
    <Layout>
      <Sider>Sider</Sider>
      <Content>Content</Content>
    </Layout>
    <Footer>Footer</Footer>
  </Layout>,
  document.getElementById('container')
);

Data Display

Includes components like tables, lists, and cards to display data in a structured format.

import { Table } from 'antd';

const dataSource = [
  { key: '1', name: 'John Doe', age: 32, address: 'Some Street' },
  { key: '2', name: 'Jane Doe', age: 42, address: 'Another Street' }
];

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' }
];

ReactDOM.render(<Table dataSource={dataSource} columns={columns} />, document.getElementById('container'));

Form Controls

Provides form components like input fields, checkboxes, radio buttons, and forms with validation.

import { Form, Input, Button } from 'antd';

const FormComponent = () => (
  <Form>
    <Form.Item label='Username' name='username'>
      <Input />
    </Form.Item>
    <Form.Item label='Password' name='password'>
      <Input.Password />
    </Form.Item>
    <Form.Item>
      <Button type='primary' htmlType='submit'>Submit</Button>
    </Form.Item>
  </Form>
);

ReactDOM.render(<FormComponent />, document.getElementById('container'));

Feedback

Offers feedback components such as alerts, modals, notifications, and messages to interact with users.

import { message } from 'antd';

function success() {
  message.success('This is a success message');
}

ReactDOM.render(<button onClick={success}>Show success message</button>, document.getElementById('container'));

Navigation

Includes navigation components like menus, tabs, breadcrumbs, and paginations to guide users through the application.

import { Menu } from 'antd';

const { SubMenu } = Menu;

ReactDOM.render(
  <Menu mode='horizontal'>
    <Menu.Item key='mail'>Navigation One</Menu.Item>
    <SubMenu title='Navigation Two'>
      <Menu.Item key='submenu-item-1'>Option 1</Menu.Item>
      <Menu.Item key='submenu-item-2'>Option 2</Menu.Item>
    </SubMenu>
  </Menu>,
  document.getElementById('container')
);

Other packages similar to antd

material-ui

Also known as MUI, it is a popular React UI framework that follows Google's Material Design guidelines. It offers a different design philosophy compared to antd, which is more neutral and less opinionated, making it suitable for a wide range of projects.

react-bootstrap

It is a React component library that rebuilds the Bootstrap components with React. It provides a familiar Bootstrap-like interface for React applications, but it may not offer as many advanced components as antd does.

semantic-ui-react

This is the official React integration for Semantic UI. It is similar to antd in providing a wide range of components, but it follows the design principles of Semantic UI, which focuses on human-friendly design.

chakra-ui

Chakra UI is a simple, modular, and accessible component library that gives you the building blocks to build your React applications. It is known for its simplicity and ease of styling, which can be a contrast to antd's more out-of-the-box, styled components.

README

Ant Design

一套企业级的前端设计语言和基于 React 的实现。

仍在紧密开发中，预计 8 月份推出 beta 版本。

特性

• 企业级金融产品的交互语言和视觉体系。
• 丰富实用的 React UI 组件。
• 基于 React 的组件化开发模式。
• 背靠 npm 生态圈。
• 基于 webpack 的调试构建方案，支持 ES6。

示例

var antd = require('antd');
var Datepicker = antd.Datepicker;

React.render(<Datepicker />, mountNode);

链接

• 首页
• 文档
• 组件
• 构建调试工具
• 开发计划
• 修改记录
• React 模块
• React 代码规范
• 组件设计原则

如何贡献

我们欢迎任何形式的贡献，有任何建议或意见您可以进行 Pull Request，或者给我们提问。

开发说明

本地调试

$ npm start

然后访问 http://127.0.0.1:8000 。

部署到 ant.design

$ npm run deploy

版本构建

$ npm run release