当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

Ant Design

企业级 UI 设计语言和 React 实现
授权协议 MIT
开发语言 JavaScript TypeScript HTML/CSS
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 国产
投 递 者 谯嘉懿
操作系统 跨平台
开源组织 阿里巴巴
适用人群 未知
 软件概览

 Ant Design,一套企业级 UI 设计语言和 React 组件库。

✨ 特性

  • �� 提炼自企业级中后台产品的交互语言和视觉风格。
  • �� 开箱即用的高质量 React 组件。
  • �� 使用 TypeScript 开发,提供完整的类型定义文件。
  • ⚙️ 全链路开发和设计工具体系。
  • �� 数十个国际化语言支持。
  • �� 深入每个细节的主题定制能力。

�� 支持环境

  • 现代浏览器和 IE11 及以上。
  • 支持服务端渲染。
  • Electron
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

�� 安装

npm install antd --save
yarn add antd

�� 示例

import { Button, DatePicker } from 'antd';

const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker />
  </>
);

引入样式:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

你也可以使用 babel-plugin-import

�� TypeScript

参考 在 TypeScript 中使用。

�� 国际化

参考 国际化文档

�� 链接

⌨️ 本地开发

你可以使用 Gitpod 进行在线开发:

或者克隆到本地开发:

$ git clone git@github.com:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start

打开浏览器访问 http://127.0.0.1:8001 ,更多本地开发文档

�� 参与共建

请参考贡献指南.

强烈推荐阅读 《提问的智慧》《如何向开源社区提问题》《如何有效地报告 Bug》《如何向开源项目提交无法解答的问题》,更好的问题更容易获得帮助。

Let's fund issues in this repository

  • Ant Design介绍 在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和重复建设,大大降低了产品的研发效率。我们(蚂蚁金服体验技术部)经过大量的项目实践和总结,沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计,屏蔽不必要的设计差异和实现成本,解放设计和前端的研发资源。 Ant Design

  • 参考:yypsober的博客,网址:http://blog.csdn.net/yypsober/article/details/51906616 1 先安装node 2 之后安装ant design,    cmd下为 npm install antd-init -g ,可能会出各种问题,例如网络可能有代理; 如果不能通过https fetch: npm config set registry h

  • https://github.com/ant-design/ant-design/                  亲测!

  • 一、Ant Design 介绍 1.1 背景 如果经常浏览各种网站,就会发现不管网页的主题是什么,通常都会出现一些重复的构件,比如:日历、表格、表单、菜单、卡片、导航栏等。 这些构件的功能和外观都很类似,只是在一些细节的地方,根据需要做了定制。它们就叫做组件,一张完整的网页,可以看做是不同功能的组件的集合。 又由于之前浏览器大战的残留问题,导致即时做出了一个组件,但是其不能很好的适用所有浏览器。

  • Ant Design Mobile 蚂蚁金服移动端组件(蚂蚁金服、阿里巴巴) https://mobile.ant.design/docs/react/introduce-cn WingBlank 两翼留白 import { WingBlank, WhiteSpace } from 'antd-mobile'; const PlaceHolder = ({ className = '', ...

  • Ant Design Pro 框架 它是一个建立在Ant Design 框架上的一个 高级框架;是一个网站生成器,仅仅使用一条命令就可以生成一个完整可用的后台网站;所以说它主要特点就在于 ‘开箱即用’ vue Antd Admin 使用 使用官方API vue3.0引入ant-design-vue 出错 Uncaught TypeError: Cannot read property ‘use‘

  • 以后再系统地改格式,先随笔式记录 1.Ant Design Pro 1.新增页面配置路由时,写在404之前; 2. 传输数据到接口时,一定要看json的格式是否正确;放置套娃自己没有找到对应的等级。 2.Ant Design 1.Select选择框,如果valueType为number,value值使用大括号括起来; 2. State与调用API的返回值不一定按先后顺序,所以一定要写在不同函数里;

  • Ant Design UI框架的使用 1.下载ant design 蚂蚁金服UI框架: npm install antd --save 2.使用: 在需要使用该UI框架的地方,需要手动引入样式。 import 'antd/dist/antd.css'; 需要使用哪些模块的UI直接引入即可: import {Button, Icon,Radio} from 'antd' 用逗号隔开每个

  • 目录   1. 基础配置 1.1 Node.js 1.1.1 安装 1.1.2 淘宝镜像cnmp 1.2 安装react 1.3 引入Ant design的组件库 2. React 表单 受控组件 标签 React.Component 装配 其他API 实例属性 3. Ant Design Component Table表格 Dropdown下拉菜单 1. 基础配置 1.1 Node.js 内存溢

  • https://ng.ant.design/components/message/zh https://ng-alain.com/components/table/zh

  • 基本国内都是 antd https://material-ui.com/zh/ React 组件用于更快速、更简便的 web 开发。你也可以建立你自己的设计系统,或者从 Material Design 开始。 实现了谷歌Material Design设计规范。世界上最流行的React界面框架。 江湖传言使用Material-UI可以使我们的页面颜色更鲜艳,动画效果更突出(符合Material De

  • 1.antd官网 https://ant.design/docs/react/introduce-cn 2、React中全局样式使用Antd 1)、安装antd npm install antd --save / yarn add antd / cnpm install antd --save 2)、在react项目的App.css文件中引入Antd的css @import

  • Ant Design of Vue   https://vue.ant.design/docs/vue/introduce-cn/ 1、基于 Ant Design 框架使用案例:http://boot.jeecg.com                   Ant Design of React(官网默认就是react框架) 1、 转载于:https://www.cnblogs.com/wfblo

  • 一、概述 建议crud用ProComponents来开发,这样的效率更高一些,不管是umi hooks还是ahooks中的表格,表单等功能,不如它强大,它主要包含以下组件: ProLayout 解决布局的问题,提供开箱即用的菜单和面包屑功能 ProTable 表格模板组件,抽象网络请求和表格格式化 ProForm 表单模板组件,预设常见布局和行为 ProCard 提供卡片切分以及栅格布局能力 Pr

  • Reactjs入门参考路径:http://www.cnblogs.com/Leo_wl/p/4489197.html createFactory使用详解: http://www.onmpw.com/tm/xwzj/web_101.html React.createElement:http://www.onmpw.com/tm/xwzj/web_103.html React构建单页应用方法与实例: 

  • 全局引入:js体积很大 npm i ant-design-vue // 全局引入antdesign import Antd from "ant-design-vue"; import "ant-design-vue/dist/antd.less"; Vue.use(Antd); 按需引入:性能优化 npm i babel-plugin-import // babel.config.js mod

  • 安装 npm i antd. 使用组件时,从 antd 中引入 import {Button} from 'antd'. 给入口文件添加全局样式. 如果组件样式不生效,在app.css 文件中 引入下面代码 '; @import 'antd/dist/reset.css

  • 绪论:刚开始要把原生的表单控件替换成antdesign中的表单控件可谓是波折重重,我就讲讲我的辛酸史~~~ 根据ant design官方网站中的源代码使用。 因为我只用几个控件,所以直接复制我要的那部分到我的项目中,可是呀,getFieldDecorator方法报错,屡试不爽,各种百度之下,终于知道了到底怎么使用: //1. 定于组件的方式要是这样的: class 组件名 extends Rea

  • 安装 Umi UI | 创建新应用 参考官网 第一步:新建路由 创建路由: umi g page products 目录src/pages中会添加products.js和products.css两个文件 第二步:编写 UI Component 在编辑器中打开,新建src/components/ProductList.js文件 import { Table, Popconfirm, Button

 相关资料
  • 程序员用各种编程语言编写指令,有些是计算机直接理解的,有些则需要中间翻译(tranlation)的步骤。如今使用的计算机语言有几百种,可以分为三大类: 机器语言 汇编语言 高级语言 任何计算机只能直接理解本身酌机器语言(machine language)。机器语言是特定计算机的自然语言,由计算机的硬件设计定义。机器语言通常由一系列数字组成(最终简化0和1),让计算机一次一个地执行最基本的操作。机器

  • 本文向大家介绍高级语言和低级语言之间的区别,包括了高级语言和低级语言之间的区别的使用技巧和注意事项,需要的朋友参考一下 让我们首先了解高级和低级语言- 高级语言 与低级语言相比,它易于解释和编译。 它可以被认为是程序员友好的语言。 很容易理解。 这很容易调试。 在维护方面很简单。 它要求将编译器/解释器翻译成机器代码。 它可以在不同的平台上运行。 它可以从一个位置移植到另一位置。 i.e与低级语言

  • 这本书将教会你使用Rust 编程语言。Rust 是一个系统编程语言,它注重于三个方面:安全,速度和并发性。为了实现这些目标,它没有采用垃圾回收机制(GC)。这让它在其它语言并不擅长的场景中大展身手:嵌入到其它语言中、在特定的时间和空间要求下编程、编写例如设备驱动和操作系统这样的底层代码。

  • 对于一个开发者而言,能够胜任系统中任意一个模块的开发是其核心价值的体现。 对于一个架构师而言,掌握各种语言的优势并可以运用到系统中,由此简化系统的开发,是其架构生涯的第一步。 对于一个开发团队而言,能在短期内开发出用户满意的软件系统是起核心竞争力的体现。 每一个程序员都不能固步自封,要多接触新的行业,新的技术领域,突破自我。

  • 语言处理程序 汇编程序 地址寄存器AR、数据寄存器DR、指令寄存器IR对汇编语言透明的不可见,程序计数器PC可见 算术指令 带符号数左移*2或右移/2 SAL算数左移:把目的操作数的低位向高位移,空出低位补0 SAR算术右移:把目的操作数的高位向低位移,空出高位用最高位(符号位)填补 逻辑指令 用于无符号数*2或/2 SHL逻辑左移:移位后空出位补0 SHR逻辑右移:移位后空出位补0 循环移位指令

  • C语言设计模式 关于软件设计方面的书很多,比如《重构》,比如《设计模式》。至于软件开发方式,那就更多了,什么极限编程、精益方法、敏捷方法。随着时间的推移,很多的方法又会被重新提出来。 其实,就我个人看来,不管什么方法都离不开人。一个人写不出二叉树,你怎么让他写?敏捷吗?你写一行,我写一行。还是迭代?写三行,删掉两行,再写三行。项目的成功是偶然的,但是项目的失败却有很多原因,管理混乱、需求混乱、设计

  • 以下是为 linkerd 提供商业支持和其他企业产品的公司列表: Buoyant 是 linkerd 的原创者,并提供支持,培训和企业产品。 了解更多 »

  • 作用 用于查询企业账户额度、开票额度等信息。 依赖 暂无依赖 注意 所有接口调用时需要严格遵守请求方式(GET/POST) 使用接口前需要仔细阅读每个接口的注意事项 接口报错时先阅读通用错误解决方案和当前接口文档下的接口错误解决方案