Button按钮（antd-design组件库）简单使用

于 2023-08-07 02:07:41 发布
阅读量761 收藏
点赞数
分类专栏： 前端(html+css+js)知识点杂烩 文章标签： 前端 react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xijinno1/article/details/132138401
版权

1.Button按钮

按钮用于开始一个即时操作。

2.何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

在 Ant Design 中我们提供了五种按钮。

主按钮：用于主行动点，一个操作区域只能有一个主按钮。

默认按钮：用于没有主次之分的一组行动点。

虚线按钮：常用于添加操作。

文本按钮：用于最次级的行动点。

链接按钮：一般用于链接，即导航至某位置。

以及四种状态属性与上面配合使用。

危险：删除/移动/修改权限等危险操作，一般需要二次确认。

幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。

禁用：行动点不可用的时候，一般需要文案解释。

加载中：用于异步操作等待反馈的时候，也可以避免多次提交。

组件代码来自： 按钮 Button - Ant Design

3.本地验证前的准备

参考文章【react项目+antd组件-demo:hello-world react项目+antd组件-demo:hello-world_西晋的no1的博客-CSDN博客】，将 按钮 Button - Ant Design 中需要在本地使用的代码复制覆盖App2.js中的全部代码，启动代码，可在本地查看现象和更改代码。

4.本地验证Button的简单用法。

复制下图所示代码，了解Button的简单用法。认识按钮的五种类型。

5.查看3种按钮尺寸的样式以及使用方法

复制下图所示代码，了解3种按钮尺寸的样式以及使用方法。

本文仅介绍了组件Button的部分内容，更多内容请参阅官方文档： 按钮 Button - Ant Design

 

西晋的no1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于react-Ant Design框架Button按钮的基础用法
weixin_45745641的博客
03-28 3615
前言 最近在学习react-Ant Design框架，把button组件一些用法记录一下 引入框架 使用组件 首先我们得引用Ant Design和里面的button，才能进行使用
antd-mobile-rn:一个基于 Ant Design Mobile RN 的 UI 组件库
05-23
Ant Design Mobile RNAnt ...演示请先安装 expo app：安装 & 使用npm install @sishuguojixuefu/antd-mobile-rn --saveoryarn add @sishuguojixuefu/antd-mobile-rn链接字体图标react-native link @ant-design/ico
antd-visual-editor:ant-design 组件库实时可视化编辑器，实时生成 react 代码
05-24
一个 可视化实时渲染的 ant-design 页面搭建工具 此项目是上古项目，代码基本很难维护，现在发布出来仅供参考思路，感兴趣的可以根据原理重构一版，实现一个更完备的可视化编辑 友情提醒：不建议在团队内投入大量精力做类似的事情（企图一步到位改变开发现状），与行业里用 AI 切页面类似，尽量作为玩具把玩一下即可。 线上实例 托管在 github，第一次加载会比较慢 截图： 运行 npm run build; npm run start; # （已修复）因为我不太懂 webpack ，不太会配置，这个项目修改代码后实时生效还有问题。。求 pr 特性 可视化编辑，同时实时生成结果代码，还可以单独预览 丰富的数据编辑能力，可以编辑组件的二维属性 组件可嵌套 自适应布局 除了 antd 的组件，还有一些原生 html 元素可使用 原理解析 1.如何实现实时编辑 第一步，抽象整个可视化工作台的数据表
antdesign——notification消息提醒自定义两个按钮
xiaoququ的博客
10-25 1221
【代码】antdesign——notification消息提醒自定义两个按钮。
一个form表单有多个提交按钮
ITcainiaoyizhan的博客
11-28 2493
思路是这样的：先不指定表单的action，让action属性为""，method=“post”，为你的提交按钮全部替换为普通按钮，给它们都加上onclick事件，注意这里每一个按钮的onclick方法是一样的，只是传递的参数不一样，这里的参数只是起到标记是哪一个按钮的用。 最后根据onclick里的方法传递的参数不同，可以判断是来自哪一个按钮的消息，再为表单设置方法并提交。 这里有个案例（发布文章...
vue-ant design示例大全——按钮本地css/js资源
红目香薰
09-25 1245
根据 Ant Design 设计规范要求，我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置。在 Ant Design Vue 中我们提供了五种按钮。支持原生 button 的其他所有属性。以及四种状态属性与上面配合使用。
antd 相关学习 Button
draft
06-12 1万+
api：Ant Design of React 按钮有四种类型：主按钮（primary）、次按钮（default）、虚线按钮（dashed）、危险按钮（danger） 通过配置type属性即可： 图标按钮： 当需要在Button内嵌入Icon时，可以设置icon属性，或者直接在Button内使用Icon组件。如果想控制Icon具体的位置，只能直接使用Icon组件，而非icon属性。
【Ant Design Vue】button组件用法大全
热门推荐
Hit the keyboard hard
12-03 1万+
Ant官方推荐了button组件属性的使用顺序：type -> shape -> size -> loading -> disabled 具体做法如下： <a-button type="primary" shape="round" size="default" :loading="false" :disabled="false"> 按钮 </a-button&
分析 antd -- Button
m0_60009963的博客
11-18 770
分析 antd – Button 尝试反向推导 button 组件 源码如下 样式文件使用 antd 的 css <link rel="stylesheet" href="https://ant.design/index-f273b100.css"> import React, { useEffect, useState } from "react"; import { LoadingOutlined } from "@ant-design/icons"; import * as Clas
ant design vue学习之Button按钮
qq_53821346的博客
03-31 2285
本篇文章记录了自己对ant design vue的button按钮的一些学习记录
0框架前端-如何写一个按钮（button）
子燕若水的博客
12-09 2942
0框架前端的理念:杜绝前端复杂化,回归html,js,css这三个前端的本源.
antd-img-crop:Ant用于Ant Design上传的图像裁剪器
04-28
antd-img-crop 用于Ant设计的图像裁剪器。 English |演示版安装yarn add antd-img-crop用法import ImgCrop from 'antd-img-crop' ;import { Upload } from 'antd' ;const Demo = ( ) => ( < ImgCrop> < Upload> + ...
antd-button-color：适用于Ant Design的简单按钮可响应更多颜色，例如主色，成功，警告，信息，深色，浅色
02-28
Ant Design的简单按钮可响应更多颜色，例如默认，主要，成功，警告，信息，深色，浅色。 特征 按钮的颜色更多（主要，成功，警告，信息，暗，明暗，默认）。 安装 注意：安装Ant Design（必需）。 $ npm install ...
antd-mobile-vue:antd-mobile的vue实现
05-17
ant design mobile 官网同步与antd-mobile的组件对比antd-mobile 共有 47个组件，本项目截至现在移植了44个, 组件完成度达到95%另外新增组件组件名称用途Chart图表组件与ant design mobile的组件比较组件名称antd-...
2. Ant Design PC UI组件 按钮事件 快速上手教程
04-02 343
在按钮事件面板，方法 输入框中，粘贴入刚才复制的开发标识，将 点击事件处理函数 绑定到 按钮点击事件中。右键点击 JS函数 ”点击事件处理函数“，点击菜单中的 开发标识，自动将开发标识复制到剪贴版。点击按钮，就能看到 控制台中，出现了 ”点击了事件处理函数“绑定按钮事件完成，接下来是绑定 输入框 输入改变事件，请看下一篇。点击生成代码，然后 AI生成出的代码将会自动添加到JS代码中。点击按钮 右侧 的 事件 图标，弹出按钮事件面板。添加JS函数后，更名为 点击事件处理函数。右键点击按钮，点击事件。
修改button上字体样式
rbyyy(Create produce different)
04-16 6831
在ios3.0之前有setFont方法来设置button上字体样式，在ios3.0之后，如果要修改button上的字体样式，需要使用 buttonTask.titleLabel.font = [UIFont fontWithName:@"Arail" size:10];
ant design 按钮组件
weixin_43279985的博客
05-29 1032
文章目录前言一、安装二、通用组件Button 按钮5+4 组合Icon 图标安装 前言 按钮用于开始一个即时操作，往往点击按钮都会触发一些事件，可能进行前后端交互事件。 一、安装 $ npm install antd --save $ yarn add antd 二、通用组件 Button 按钮 使用场景：响应用户点击行为，触发响应的业务逻辑。 5+4 组合 五种按钮四种状态 五种按钮和四种状态是一对多的关系，每种按钮可对应各种状态。 import React from 'react'; impor
前端学习（3185）：ant-design的button介绍按钮属性
歌谣的博客
07-13 196
antd源码-button解析
luo_qianyu的博客
03-29 2754
antd源码-Button解析 Button render 在Button的组件中的index函数中，我们从antd引入button的时候是从index.tsx这个文件引入的 import Button from './button'; import ButtonGroup from './button-group'; export { ButtonProps, ButtonShape, But...
react antd-design Form.Item 的label属性上加 Tooltip复制功能，复制内容为input输入框中的内容
最新发布
05-30
您好！感谢您的提问。针对您的问题，我可以给出以下解决思路： 1. 在需要添加 Tooltip 复制功能的 Form.Item 的 label 属性上添加 Tooltip 组件，并设置其 title 属性为需要复制的内容； 2. 在需要添加复制功能的 input 输入框中添加 ref 属性，并在组件的 componentDidMount 生命周期中获取该 ref，并将其绑定到复制按钮的 onClick 事件中； 3. 在复制按钮的 onClick 事件中，通过获取 input 输入框的 value 值，并将其复制到剪贴板中实现复制功能。 下面是具体的代码实现，仅供参考： ``` import React, { Component } from 'react'; import { Form, Input, Tooltip, Button } from 'antd'; import { CopyOutlined } from '@ant-design/icons'; class Demo extends Component { constructor(props) { super(props); this.inputRef = React.createRef(); } componentDidMount() { this.copyBtn.addEventListener('click', this.handleCopy); } componentWillUnmount() { this.copyBtn.removeEventListener('click', this.handleCopy); } handleCopy = () => { const { value } = this.inputRef.current.input; const textarea = document.createElement('textarea'); textarea.innerText = value; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); } render() { return ( <Form> <Form.Item label={ <Tooltip title="复制内容" placement="topLeft"> 需要复制的内容： </Tooltip> } > <Input ref={this.inputRef} /> <Button ref={ref => (this.copyBtn = ref)} icon={<CopyOutlined />} /> </Form.Item> </Form> ); } } export default Demo; ``` 希望这可以帮助到您！如果您还有其他问题，可以继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值