Ant Design 组件库按钮实现示例详解.docxVIP

第

Ant?Design?组件库按钮实现示例详解

目录1antd之ButtonAPI2antd之Button示例

1antd之ButtonAPI

antd组件库是基于AntDesign设计体系的ReactUI组件库，antd为Web应用提供了丰富的基础UI组件，可以用于研发企业级中后台产品。这篇咱们介绍antd组件库之按钮。

按钮Button是一个比较基础的UI组件，一般在有交互的应用中都会用到。

其DOM节点为Button.../Button，antd中的按钮样式丰富，可以通过设置Button的属性来产生不同的按钮样式。

这些可配置的属性主要包括：type、shape、size、loading等，详细的这里我进行一个整理：

下面做一些实践。

2antd之Button示例

先来看type属性的六个简单的按钮，上代码(JavaScript的)：

import{Button}fromantd;

importReactfromreact;

constApp=()=(

Buttontype=primaryPrimaryButton/Button

ButtonDefaultButton/Button

Buttontype=dashedDashedButton/Button

br/

Buttontype=textTextButton/Button

Buttontype=linkLinkButton/Button

Buttontype=ghostGhostButton/Button

exportdefaultApp;

来看效果：

接下来看一波带icon图标的按钮，上代码：

import{SearchOutlined,PlayCircleOutlined,

ZoomInOutlined,RedoOutlined,AndroidOutlined,

AppleOutlined,WechatOutlined,EyeOutlined,

ShareAltOutlined,MessageOutlined}from@ant-design/icons;

import{Button,Tooltip}fromantd;

importReactfromreact;

constApp=()=(

Tooltiptitle=search

Buttontype=primaryshape=circleicon={PlayCircleOutlined/}/

/Tooltip

Buttontype=primaryshape=circle

/Button

Buttontype=primaryicon={ZoomInOutlined/}

Search

/Button

Tooltiptitle=search

Buttonshape=circleicon={RedoOutlined/}/

/Tooltip

Buttonicon={AndroidOutlined/}Search/Button

br/

Tooltiptitle=search

Buttonshape=circleicon={SearchOutlined/}/

/Tooltip

Buttonicon={SearchOutlined/}Search/Button

Tooltiptitle=search

Buttontype=dashedshape=circleicon={SearchOutlined/}/

/Tooltip

Buttontype=dashedicon={SearchOutlined/}

Search

/Button

Buttonicon={SearchOutlined/}href=rel=externalnofollowrel=externalnofollow/

br/

br/

Tooltiptitle=search

Buttontype=primaryshape=