极智开发 | Ant Design 组件库之按钮

极智开发 | Ant Design 组件库之按钮

大家好，我是极智视界，本文介绍一下 Ant Design 组件库之 按钮。

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

文章目录

​​1 antd 之 Button API​​​​2 antd 之 Button 示例​​

1 antd 之 Button API

按钮 Button 是一个比较基础的 UI 组件，一般在有交互的应用中都会用到。其 DOM 节点为 ​​...​​，antd 中的按钮样式丰富，可以通过设置 Button 的属性来产生不同的 按钮样式。这些可配置的属性主要包括：type、shape、size、loading 等，详细的这里我进行一个整理：

下面做一些实践。

2 antd 之 Button 示例

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

import { Button } from 'antd';import React from 'react';const App = () => ( <> Primary Button Default Button Dashed Button
Text Button Link Button Ghost Button );export default App;

来看效果：

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

import { SearchOutlined, PlayCircleOutlined, ZoomInOutlined, RedoOutlined, AndroidOutlined, AppleOutlined, WechatOutlined, EyeOutlined, ShareAltOutlined, MessageOutlined} from '@ant-design/icons';import { Button, Tooltip } from 'antd';import React from 'react';const App = () => ( <> } /> A }> Search } /> }>Search
} /> }>Search } /> }> Search } href="/>

} size="large" /> A } size="large"> Search } size="large" /> } size="large"> Search
} size="large" /> } size="large"> Search } size="large" /> } size="large"> Search } size="large" href="/> );export default App;

来看效果：

你应该可以发现，我这里用了很多不同的 icon 图标，可以这么说：用 antd 的 Button 搭配 antd 的 Icon 图标，几乎能实现你想要的所有按钮样式。除了按钮的图标，上面的示例也演示了 按钮 Size 的调整，通过 ​​size​​​ 可以配置 ​​large​​​ 和 ​​small​​​， 分别对应将按钮设置为 大尺寸和 小尺寸，若不设置 ​​size​​， 则默认为中尺寸。

接着，我们来看按钮的 ​​disabled​​ 属性，意思即为按钮处于不可用的状态，上代码：

import { Button } from 'antd';import React from 'react';const App = () => ( <>

Primary Primary(disabled)
Default Default(disabled)
Dashed Dashed(disabled)
Text Text(disabled)
Link Link(disabled)
Danger Default Danger Default(disabled)
Danger Text Danger Text(disabled)
Danger Link Danger Link(disabled)

来看效果：

import { PoweroffOutlined } from '@ant-design/icons';import { Button, Space } from 'antd';import React, { useState } from 'react';const App = () => { const [loadings, setLoadings] = useState([]); const enterLoading = (index) => { setLoadings((prevLoadings) => { const newLoadings = [...prevLoadings]; newLoadings[index] = true; return newLoadings; }); setTimeout(() => { setLoadings((prevLoadings) => { const newLoadings = [...prevLoadings]; newLoadings[index] = false; return newLoadings; }); }, 6000); }; return ( <> Loading Loading } loading /> enterLoading(0)}> Click me! } loading={loadings[1]} onClick={() => enterLoading(1)} > Click me! } loading={loadings[2]} onClick={() => enterLoading(2)} /> );};export default App;

来看效果：

好了，以上分享了 Ant Design 组件库之按钮。希望我的分享能对你的学习有一点帮助。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。