您好,欢迎来到维库电子市场网 登录 | 免费注册

antd
阅读:376时间:2023-08-10 16:36:41

    antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。那么antd有哪些特性和优势呢?antd的应用方法又是什么呢?这篇文章主要讲述antd的相关内容,最后附有antd的组件库供大家了解使用。

优势

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

应用方法

    1、安装
    安装组件库:npm install antd  --save或yarn add antd
    安装图标库:npm install @ant-design/icons -s
    2、引用
    使用组件:使用组件的时候,需要在对应的react组件中,引入antd组件和antd样式文件。或者直接在入口文件main.js中全局引入(就需要每次使用都要引入了)
    引入相关组件:import { ConfigProvider, DatePicker, message } from 'antd';
    引入样式:import 'antd/dist/antd.css';
    插件:为了可以像上面那样按需加载组件,需要引入babel,使用 babel-plugin-import 来进行按需
    使用 Day.js 替换 momentjs 优化打包大小:可以使用 antd-dayjs-webpack-plugin 插件用 Day.js 替换 momentjs 来大幅减小打包大小。这需要更新 webpack 的配置文件如下:
    3.按需加载(需要什么插件直接加载什么)
    antd的组件库
    1、Button组件
    <Button type="primary" danger>文本</Button>
    type:按钮的类型,取值为primary、default、dashed、text、link
    danger:表示危险按钮
    size:表示按钮的大小,取值large、middle、small
    disabled:表示按钮不可用
    icon:设置按钮上的图标
    shape:设置按钮的形状
    2、message组件
    消息框组件,可以提供成功、警告、错误等反馈信息
    message.info()、message.success()、message.warning()、message.error()
    3、Layout组件
    Layout是布局容器,里面可以包含Header Sider Content Footer 或 Layout 本身
    Header:顶部容器,只能放在Layout中
    Sider:侧边栏,通常放导航栏,只能放在Layout中
    Content:内容显示区,只能放在Layout中
    Footer:底部容器,只能放在Layout中
    4、Menu组件
    可以直接包含菜单项(Menu.Item),也可以包含子菜单(SubMenu),在子菜单下可以包含菜单项
    theme:表示菜单的背景色
    mode: 表示菜单项的放置方式(水平、垂直)
    defaultSelectedKeys:默认选中的菜单项,通过菜单项的key属性识别
    defaultOpenKeys:默认打开的子菜单,通过子菜单的key属性识别
    style:菜单的样式
    Menu.Item:菜单项组件
    key:表示菜单项的唯一标识
    icon:图标
    SubMenu:子菜单组件
    key:表示子菜单的唯一标识
    title:子菜单的标题文本
    icon:子菜单的图标
    5、Divider分割线
    orientation:设置分割线文本的位置
    plain:设置分割线文本的颜色
    type:分割线的类型(垂直/水平)
    6、Input组件
    size:大小(large、middle、small)
    placeholder:提示,用户输入时自动消失
    prefix:前缀图标
    suffix:后缀图标
    maxLength:最大长度(字符个数)
    disabled:是否禁用,默认是false
    defaultValue:默认值
    bordered:是否带边框

维库电子通,电子知识,一查百通!

已收录词条45649