文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Ant Design 按钮和图标的使用

Ant Design 的样式 import "antd/dist/antd.css"; 接下来我们需要引入我们想用到的按钮组件（这是一种解构的写法） import { Button } from "antd...需要讲ghost写出属性,幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。也可和其它的类型一起使用。...danger：在其他样式框架中（如elementUI）中都是作为type的一种类型，只是颜色变成了红色。但是在Ant Design中被作为一种属性。...这也就是图标的使用 图标的使用请看另一篇文章 SearchOutlined是搜索的图标 import { SearchOutlined } from '@ant-design/icons';...DownloadOutlined } from '@ant-design/icons'; class ButtonSize extends React.Component { // 在state中定义变量

3.4K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    React.js + Ant Design：构建现代化企业级前端应用的最佳组合

    以下是 Ant Design 的核心特点：丰富的组件库：包括按钮、表单、表格、图标、菜单、树控件、步骤条等常用组件，几乎涵盖了所有企业级应用的开发需求。...国际化支持开发多语言应用时，Ant Design 提供的国际化功能可以直接与 React 的 Context API 或第三方库（如 react-intl）结合，大幅简化开发流程。5....丰富的生态支持React 的生态系统（Redux、React Router 等）与 Ant Design 的周边工具（如 ProTable、Charts 等）结合，可以快速满足复杂的业务需求。...解决方案：Ant Design 提供的图表插件（如 AntV G2）可以与 React 组件无缝结合，快速实现数据可视化功能。4. 移动端 Web 应用场景：适配移动设备的管理工具或服务平台。...一个按钮用于触发新增功能。使用了 Ant Design 的 Button 和 Table 组件，代码简洁且直观。

    1.1K00

    Chakra UI React组件库入门指南

    市面上React UI库那么多，为啥要选Chakra呢？首先，它的上手速度真的很快。你不需要学习复杂的API或者特定的设计语言（比如Material Design）。...```在这个例子中，Box组件在小屏幕上占据100%宽度并显示红色，而在中等及以上屏幕上占据25%宽度并显示蓝色。比起写媒体查询，这种方式简单太多了！...vs Ant Design：Ant Design提供了大量企业级组件，是构建复杂管理系统的绝佳选择。而Chakra UI组件相对较少，但覆盖了大多数常见需求，并且API更简洁。...如果你的项目是一个复杂的企业应用，可能Ant Design更合适；如果你想要更快的开发速度和更灵活的设计，Chakra UI会是更好的选择。...Chakra UI实际上借鉴了Tailwind的一些理念，但将其封装为React组件和props，使其更适合React开发者。

    51721

    2026年React组件库生存指南：为什么80%的团队都选错了？

    产品要同时做Web端和移动端 前端要写两套代码，一个React，一个React Native 两边的组件长得一样，但要分别维护 改个按钮样式，两边都要改一遍 如果你点头了，那gluestack可能就是你要找的答案...Design更快） 团队完全没有移动端开发经验 需要大量现成的高级组件（如富文本编辑器、甘特图） 成本分析 开源免费，但需要投入学习成本： 新手上手时间：1-2周（如果有React基础） 迁移旧项目成本...问题2：定制样式比较麻烦MUI的默认样式优先级比较高，想改个按钮颜色得这样写： const StyledButton = styled(Button)(({ theme }) => ({ backgroundColor...这时候可以考虑自己基于开源库（如react-table）封装。...季军选手：Ant Design - 国产之光的双刃剑 特殊地位：作为蚂蚁集团出品的组件库，Ant Design在国内有着特殊的地位——它几乎是"企业级React项目"的代名词。

    50510

    『Ant Design』主题定制

    一、前言 本篇文章是『从零玩转 TypeScript + React 项目实战』系列文章的第 2 篇，主要介绍『Ant Design』的进阶玩法主题定制 进阶玩法是什么内容呢？...二、主题定制 打开官方文档，官方文档地址：https://ant.design/docs/react/introduce-cn 在官方文档左侧有一个『定制主题』的菜单，点击进入，可以看到如下内容： Ant...这包括全局样式，比如主题颜色、圆角和边框样式，还有特定组件的外观定制。简而言之，你可以轻松地让 Ant Design 看起来符合你的品牌和业务的独特需求。...方式三（通过 craco，推荐） 官方文档：https://4x.ant.design/docs/react/use-with-create-react-app-cn 第三种方式在 create-react-app...这不仅限于以下内容，而是包含但不局限于： 支持 动态切换 主题 支持 同时存在多个 主题 支持 针对某个/某些组件 修改主题变量 我这里之前创建项目是采用的 create-react-app，所以主题定制是针对

    1.5K50

    掌握 Ant Design 主题定制实战指南

    一、前言 • 本篇文章是『从零玩转 TypeScript + React 项目实战』系列文章的第 2 篇，主要介绍『Ant Design』的进阶玩法主题定制 进阶玩法是什么内容呢？...二、主题定制 打开官方文档，官方文档地址：https://ant.design/docs/react/introduce-cn 在官方文档左侧有一个『定制主题』的菜单，点击进入，可以看到如下内容： Ant...这包括全局样式，比如主题颜色、圆角和边框样式，还有特定组件的外观定制。简而言之，你可以轻松地让 Ant Design 看起来符合你的品牌和业务的独特需求。...3.方式三（通过 craco，推荐） 官方文档：https://4x.ant.design/docs/react/use-with-create-react-app-cn 第三种方式在 create-react-app...支持 动态切换 主题 2. 支持 同时存在多个 主题 3.

    93810

    前端自动化测试

    前言 本文主要是介绍基于React+Ant Design（以下用Antd表示Ant Design）的项目，在对于自己封装的，或者基于Antd封装的公共组件的自动化测试技术的选型和实践。...React项目测试选型 react-addons-test-utils：官方API，有些晦涩 Enzyme：源自Airbnb，封装了React官方测试API，类Jquery风格简洁的API, 使得Dom...操作变得十分友好 综合目前市面上的轮子，我们技术选型为Jest+Enzyme 实践 例子是一个基于Antd二次封装的单选年的日期选择器，如下演示： 图片 代码结构如下 图片 其中测试相关的文件，...').hostNodes().simulate('click'); expect(wrapper.find('.ant-calendar-picker-input').getDOMNode()....').getDOMNode().value).toBe('2018'); }); }); 这里定义了3个测试内容 测试默认值，即检查输入框的值是否为默认值 测试清除按钮是否可用，通过模拟点击清除按钮

    2.6K20

    想做前端开发？推荐几个必备珍品组件库

    组件是组成页面中最基本的元素，按钮，输入框，下拉选择都是组件，组件和组件组合就变成了一个更复杂的组件。...Ant-Design 类型：基于 React 组件库 官网：https://ant.design/index-cn GitHub仓库地址：https://github.com/ant-design/ant-design...维护团队：蚂蚁金服体验技术部 ant-design 是我经常使用的组件库之一，蚂蚁开源，大牛维护，4W 多的 Star 让这款组件库成为国内使用率较高的 React 组件库。...代码层面：组件库由 TS+React 的组合实现，看代码可以知道，维护团队在开发 ant-design 之前就已经在维护 rc-components 的仓库了，可以说 ant-design 是对 rc-components...生态：ant-design 的生态周边比较好，维护方提供了基于 ant-design 的开箱即用的中台前端/设计解决方案，里面包括了一系列中台需要的业务逻辑。

    3.4K50

    多个相邻元素切换效果出现边框重叠问题的解决方法

    多个相邻按钮切换效果出现边框重叠问题的解决方法 下图所示的是一种常见的切换效果，在实现这种切换效果时，经常会遇到相邻按钮边框重叠的问题（查看demo），有没有好的解决方法呢？...所出现的边框重叠问题： 目前，很多优秀的UI组件库都有这种切换效果的组件，通过对他们实现方式的学习，现对边框重叠问题的解决方法做如下总结： 1、border-left + box-shadow 使用vue...或react的伙伴，肯定都非常熟悉element或ant-design组件库，对于这种边框重叠问题，他们的解决方法相同，都是通过border-left + box-shadow来解决；具体展开就是：对于正常状态下的按钮...，让所有按钮的border-left设置为0，并为第一个按钮单独设置border-left；对于处于激活状态的按钮，改变其border-color，此时激活状态的按钮由于左边框为0，产生颜色缺失，通过设置...box-shadow来解决激活状态按钮左边框颜色缺失，box-shadow在盒模型中不占据空间，因此该解决方法非常巧妙。

    1K10

    如何用纯css打造类materialUI的按钮点击动画并封装成react组件

    前言 作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vue..., iView等成熟的UI框架, react生态的ant-design, materialUI等,这些第三方UI框架极大的降低了我们开发一个项目的成本和复杂度,使开发者更专注于实现业务逻辑和服务化....上图已经是笔者基于react封装好的一个按钮Button组件,那么我们就先一步步实现它吧. 1....组件的设计思路我这里参考ant-design的模式, 基于开闭原则,我们知道一个可扩展的按钮组件一般都具备如下特点: 允许用户修改按钮样式 对外暴露按钮事件方法 提供按钮主题和外形配置 可插拔,可组合...after { transform: scale(0, 0); opacity: .3; //设置初始状态 transition: 0s; } } 复制代码 我们实现按钮样式的切换完全是用

    2.7K30

    React 中后台系统多页签实现

    社区上关于多页签的需求呼声也非常高，但是如 React 社区比较出名的中后台方案 Ant Design Pro 也不支持该功能，两年没看，至今仍然有很多 Issue 提出这类需求： Antd Pro...社区多页签需求 Issues 偏右大佬早在 2017 年对此做出了回应，详见“能否提供tab切换模式 · Issue #220 · ant-design/ant-design-pro · GitHub”...改写 React Router 源码，切换路由不卸载，改为隐藏。...，Antd多标签页后台管理模板） react-live-route （207 star，也是一种缓存路由的轮子） React Ant （232 star，基于Ant Design Pro 2.0 的多标签页...tabs) Ant Design Pro Plus （ 88 star，基于 ant-design-pro 做一些微小的工作） React Admin （83 star，基于 Ant Design React

    4.1K20

    字节前端终于开源！吹爆！

    这次他们开源的 Semi Design，不仅是一套精美的设计系统，还是一套开箱即用的 React 组件库，对于我这种喜欢用 React 来写前端的开发者，真的是福音了。...组件文档 此外，整个文档给我的感觉也是似曾相识，好像和蚂蚁的 React 组件库 Ant Design 神似。 Ant Design 组件库 然而，点击查看一个组件后，我发现了一些小惊喜。...首先是每个组件上方都多了一个 版本对比 的按钮： 有了这个东西，我们可以快速了解每个组件随版本的更新和变化，从而减少一些版本不一致导致的 Bug。...而且，仔细看 Semi Design 就会发现，他的语法风格和属性名称和 Ant Design 的也很类似。...当我们做一个新产品、造个新轮子时，能让用户自然平滑地迁移和切换，是一种很机智的策略。

    2.4K61

    【实战】1096- React 中后台系统多页签实现

    社区上关于多页签的需求呼声也非常高，但是如 React 社区比较出名的中后台方案 Ant Design Pro 也不支持该功能，两年没看，至今仍然有很多 Issue 提出这类需求： Antd Pro...社区多页签需求 Issues 偏右大佬早在 2017 年对此做出了回应，详见“能否提供tab切换模式 · Issue #220 · ant-design/ant-design-pro · GitHub”...改写 React Router 源码，切换路由不卸载，改为隐藏。...，Antd多标签页后台管理模板） react-live-route （207 star，也是一种缓存路由的轮子） React Ant （232 star，基于Ant Design Pro 2.0 的多标签页...tabs) Ant Design Pro Plus （ 88 star，基于 ant-design-pro 做一些微小的工作） React Admin （83 star，基于 Ant Design React

    3.3K10

    在 Vue.js 中使用 Ant Design 实现表格开关功能：详细教程

    在这篇博客中，我们将详细探讨如何在 Vue.js 项目中使用 Ant Design Vue 实现表格中的开关功能，并在用户切换开关时与后台 API 进行交互来更新状态。...使用 Ant Design Vue 的 a-switch 组件在表格中实现开关功能。 当用户切换开关时，调用后台 API 更新广告位的状态。 如果状态更新失败，回滚开关状态并提示用户。...如果你还没有安装 Ant Design Vue 和 Axios，可以通过以下命令安装： npm install ant-design-vue axios 接下来，引入 Ant Design Vue 组件库...操作列的实现 在表格中，我们还需要一个操作列，提供一些常用的操作按钮，如编辑、删除等。你可以在操作列中继续使用 Ant Design Vue 的 a-button 组件，并绑定相应的操作方法。...五、总结 在这篇博客中，我们详细介绍了如何在 Vue.js 项目中使用 Ant Design Vue 实现表格中的开关功能。

    32110

    超全面的 UI 工作流程指南（三）：设计规范

    知名大厂基本上都有一套自己的完整规范体系，在整理设计规范时，以大平台规范体系作为参考，针对产品自身情况增删，整理出我们自己所需要的规范内容，能有效地避免规范内容遗漏缺失。...常用的 UI 控件（Control）：按钮、输入框、下拉列表、下拉菜单、单选框、复选框、选项卡、搜索框、分页、切换按钮、步进器、进度条、角标等。 以下列举一些我们在 APP 设计规范中整理的内容。...按钮 按钮有 5 个状态：正常、点击、悬停、加载、禁用。需要在规范中分别罗列出这五个状态，标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度，按钮文本大小、颜色值。...选择 选择可分为单选与多选，并且也有五种不同状态：未选择、已选中、未选悬停、已选失效、未选失效项。规范中需展示出所有效果状态。 4. 选项卡 用于让用户在不同的视图中进行切换。...△ Ant design 移动组件 在 skecth 中设计时，使用 Symbol 创建的组件，在后期整理时，可以节省许多的时间。

    5.4K32

    超全面的 UI 工作流程指南（三）：设计规范

    知名大厂基本上都有一套自己的完整规范体系，在整理设计规范时，以大平台规范体系作为参考，针对产品自身情况增删，整理出我们自己所需要的规范内容，能有效地避免规范内容遗漏缺失。...常用的 UI 控件（Control）：按钮、输入框、下拉列表、下拉菜单、单选框、复选框、选项卡、搜索框、分页、切换按钮、步进器、进度条、角标等。 以下列举一些我们在 APP 设计规范中整理的内容。...按钮 按钮有 5 个状态：正常、点击、悬停、加载、禁用。需要在规范中分别罗列出这五个状态，标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度，按钮文本大小、颜色值。...选择 选择可分为单选与多选，并且也有五种不同状态：未选择、已选中、未选悬停、已选失效、未选失效项。规范中需展示出所有效果状态。 4. 选项卡 用于让用户在不同的视图中进行切换。...△ Ant design 移动组件 在 skecth 中设计时，使用 Symbol 创建的组件，在后期整理时，可以节省许多的时间。

    2.4K40
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券