如何在@ant-design/pro-layout中使用通知菜单？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

Uni&antd的ProLayout布局动态菜单实现及踩坑记录

页面中需要承载内容时，可以使用 ProLayout 来减少布局成本。...项目使用 Umi 开发，Umi 是集成了 Antd Pro 的，但是在使用 ProLayout 生成菜单时遇到亿点点问题，记录一下。.../pro-layout'; import ProLayout, { PageContainer, MenuDataItem } from '@ant-design/pro-layout'; import...在 props 中可以取到 umirc.ts 中配置的信息，直接拿到 routes 。这里的图标如果直接取官方的 type (如 HomeFilled )是不行的。...因为这里的 icon 需要是 ReactNode 的形式（如），但是 umirc.ts 中好像不支持这样写，会报错。

15.6K3 1

Uni&antd的ProLayout布局动态菜单实现及踩坑记录

5.9K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

Ant Design Umi 项目创建

ProLayout 首先，安装依赖（ANTD LAYOUT插件） yarn add @ant-design/pro-layout 全局安装 umi （后面创建组件文件只需要umi命令即可） yarn...defineConfig({ title: '管理平台业务模版', nodeModulesTransform: { type: 'none', }, layout: { name: '数据管理菜单...在 umi 中可以使用约定式路由和配置式路由，在实际项目开发中，我个人偏向于使用，约定式路由。毕竟这是 umi 的主要特性之一。使用约定式路由，意味着不需要维护，可怕的路由配置文件。...例如： src/models 全局models,如果有一个以上的页面会使用相同namespace空间内的代码，请将models文件放在此处，不然两个页面之间做交互时，namespace中的代码会产生影响...文件中或者在该文件下创建__mock__文件。

1.5K1 0

umi3升级umi4报错问题汇总，附解决方法

，不需再配置了，我直接把 /config/config.dev.ts 文件删掉了，然后把 /config/config.ts 中的这些配置项删掉。...Access-Control-Allow-Origin': '*', - }, - }, - dva: { - hmr: true, - }, - dynamicImport: { - loading: '@ant-design.../pro-layout/es/PageLoading', - }, - esbuild: {}, - nodeModulesTransform: { type: 'none' }, - exportStatic...: {}, }); 启动命令：如果使用了 @umijs/max 可以使用 max 命令来替换 umi，max dev，max build 等。...[email protected] 将一些项目前置操作放到了 setup 命令中，如 [email protected] 中的 umi g tmp 等命令，需要使用 max setup 替换。

9.7K2 0

如何在服务器中Ping特定的端口号，如telnet Ping,nc Ping,nmap Ping等工具的详细使用教程（Windows、Linux、Mac）

猫头虎分享：如何在服务器中Ping特定的端口号？网络调试的实用技巧，学会这些工具，你将成为运维与开发中的“Ping”王！...在日常开发和运维中，我们经常需要检查目标主机上的某个端口是否开启，并确定网络连通性。...使用 Telnet Ping 端口 Telnet 是检查端口连通性的经典工具，虽然简单，但功能强大。...使用 nmap Ping 端口 Nmap 是一款专业的网络扫描工具，适合批量测试。...默认扫描速率较低，可使用 -T4 或 -T5 提高速度，但可能会被目标主机识别为攻击行为。----

51.9K2 0

使用hooks重新定义antd pro想象力（一）

本来没计划马上写antd pro，但是有三位大佬打赏了巨额赏金，说能不能讲讲如何在antd pro中使用react hooks。当然没有问题！没办法，金钱的力量真的伟大[手动狗头]。...1 react生态中，antd pro占据重要的位置。非常多的团队使用其来完成自己的中后台应用。...的使用也非常简单，就是从全局维护的Store状态中，获取当前组件需要的数据。...在前面几篇文章里，专门有跟大家分享过，面对一个复杂页面，如何划分组件，如何去确定一个状态所处的位置，那么在官方demo的案例中，使用的方式是否合理？留下一个思考，下一篇文章分享。.../pro-layout'; import { useSelector, useDispatch } from 'dva'; import PageLoading from '.

4.8K2 0

前端UI框架Ant Design Pro

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project $ cd my-project 目录结构...Ant Design Pro 的布局在 Ant Design Pro 中，我们抽离了使用过程中的通用布局，都放在 layouts 目录中，分别为： BasicLayout：基础页面布局，包含了头部导航...，侧边栏和通知栏： ?...hideInMenu: true, hideChildrenInMenu: true, hideInBreadcrumb: true, authority: [‘admin’], } ··· name: 当前路由在菜单和面包屑中的名称...icon: 当前路由在菜单下的图标名。 hideInMenu: 当前路由在菜单中不展现，默认 false。 hideChildrenInMenu: 当前路由的子级在菜单中不展现，默认 false。

3.9K2 0

使用ant design开发完整的后台系统

add ant-design-vue 之后我们就直接在main.js文件中全局引入 // main.js import Vue from 'vue' import Antd from 'ant-design-vue...getStore('token') || ''; // 401的时候要清空下token if (token) { options.headers = { // 处理header中的...pages/port/index.tsx import React, { Component } from 'react'; import { PageHeaderWrapper } from '@ant-design.../pro-layout'; import { Table, message, Tag, Row, Input, Button } from 'antd'; import { SearchOutlined..., DeleteOutlined, PlusOutlined, InfoCircleOutlined, } from '@ant-design/icons'; import { getNginxPort

3K2 0

使用hooks重构antd pro的想象力（三）我是如何利用hooks干掉redux的

使用时，只需要一句代码，我们就能够获取到我们想要的数据，状态，对应的操作方法等。...完整可运行的代码如下： import React from "react"; import { Col, Row } from 'antd'; import { GridContent } from '@ant-design.../pro-layout'; import { fakeChartData } from "....意味着，在这样的组织架构下，我们完全可以不再使用dva中的那一套数据逻辑，redux可以不用了，redux-saga可以不用了，甚至useDispatch可以不用了，useSelecotr也可以不用了，...仅仅只使用最简单的hooks的方式来维护数据就足够了。

1.6K1 0

这是我看过的最强大的社区实战项目！

这个项目的功能还是比较全面的，文章增删改查、登录鉴权、消息通知、广告运营、热门文章、活跃用户排行、图片上传、云存储。...服务模块，业务操作模块 ├── paicoding-ui -- 前端页面 ├── paicoding-web -- Web模块、项目访问入口项目亮点 RabbitMQ 实现消息异步解耦通过消息通知方式处理订阅...项目的亮点还很多，了不起这里就不一一列举了，感兴趣的同学，自己去探索噢，把这个实战项目写在简历中，这不妥妥吸引面试官的眼球了!...paicoding-admin paicoding-admin 是技术派管理端，主要技术栈React18、React-Router v6、React-Hooks、Redux、TypeScript、Vite3、Ant-Design...项目功能支持 React-Router v6 路由懒加载配置、菜单手风琴模式、无限级菜单、多标签页、面包屑导航采用 Vite3 作为项目开发、打包工具使用 redux 做状态管理，集成 immer

7323 0

Ant-Design-Vue 3.x 图标库如何实现自动引入？

需求来源 Ant-Design-Vue升级到2.x以上的版本之后，自带的图标库就不支持通过给组件传递一个代表指定图标的属性来使用了。 1....无用代码消除在广泛存在于传统的编程语言编译器中，编译器可以判断出某些代码根本不影响输出，然后消除这些代码，这个称之为DCE（dead code elimination）自动引入 1.介绍本文所指的自动引入指的是...，在项目的任意组件内，直接使用这个图标，不需要通过手动引入。...（打包工具的插件应该可以实现）；当然可以直接在开始运行的时候导入整个图标模板，然后循环注册到Vue的组件，但是这样的缺点就是使用图标只能在模板内写死，例如：但是很多时候，我们想要的是传递一个属性，来动态显示不同图标，常见的需求场景：定义路由的时候给每个路由定义一个代表图标的元属性，通过路由生成菜单的时候

2.7K2 0

快速学习Ant Design Pro-快速入门

3.2、快速入门 3.2.1、部署安装下载地址：https://github.com/ant-design/ant-design-pro 我们使用资料中提供的，已经下载好的文件：ant-design-pro-master.zip...3.2.2、菜单和路由默认的菜单是不能直接投入到项目开发的，所以，我们需要搞清楚如何自定义菜单和路由。在pro中，菜单和路由，在router.config.js配置文件中进行管理： ?...3.2.3、新增页面上面我们添加了新的菜单，但是页面依然使用的是模板中的页面，那么如何新增页面呢？...所有的页面依然是保存的src/pages中，在pages目录下，以功能为单元创建目录，如： ? 创建文件 NewAnalysis.js： ? 修改路由中的路径： ? 测试： ?...在StandardTable中，使用Table组件生成表格，其中数据源是data： ? TableList.js中，data数据从构造方法中获取到： ?

2.2K2 0

Mock17-Antd高级模板组件ProComponents

升级好最新前端框架后，让我们回到Mock服务前后端的配置服务开发中，最开始我们已经学会了Antd pro的中后台框架的创建，以及使用Ant Design组件进行布局式开发前端页面。...接下来让我们更进一步，了解和学习能让让中后台开发更简单的模板组件ProComponents。...官网 https://procomponents.ant.design/ 模版组件主要提供如下组件 ProLayout 解决布局的问题，提供开箱即用的菜单和面包屑功能 ProTable 表格模板组件，...需要安装依赖 $ npm i @ant-design/pro-components --save # 注意使用条件 antd 的版本 >= 4.11.1 项目中使用直接通过引用到 js/tsx中即可...在路由配置有两点需要说明： interface路径path在project下此页面要使用属性hideInMenu进行菜单隐藏 // config/routes.ts { path: '/

1.8K1 0

Next.js 实战 (二)：搭建 Layouts 基础排版布局

搭建最新项目可以参考官方文档：Installation 最新的 Next.js 版本，使用的是 React19.x 内测版本，可能存在与其他库不兼容的情况项目开发规范配置这块内容我都懒得写了，具体的可以参考我之前写的文章...，配置大同小异： Nuxt3 实战 (二)：配置 Eslint、Prettierrc、Husky等项目提交规范 Nuxt3 实战 (三)：使用 release-it 自动管理版本号和生成 CHANGELOG...：Ant-Design 是我再熟悉不过的组件库了，公司的业务用的就是这个，但这个库还是有点偏业务风格，而且目前和 Next.js 的兼容性还存在点问题，自己也有点审美疲劳了，也放弃了。...shadcn/ui：最终选择了这个，这个库是基于 tailwindcss 的，而且目前在市场上很受欢迎，Github 也保持不错的增长，而且是你想用什么组件，就把组件源码直接放到应用程序中的，值得推荐。...，比如：面包屑、暗黑模式、全屏、消息通知等中间就是业务模块，底部放版权信息业务代码 1、新增 src/components/AppSideBar/index.tsx 文件： 'use client

1.2K1 1

ElementUI和Ant Design对比

之前先接触了ElementUI,然后后面又接触了Ant Design，在这里做个对比，希望通过对比这两前端ui框架，能够更加深入的了解和使用这些框架。...总之，两个框架的pro版本做的都非常棒，但个人更加倾向于ant-design，毕竟组件多占有非常大的优势。... 总之：如果是想快速上手，又希望ui更加漂亮，建议用elementUI；如追求的是比较复杂的后台管理平台，可以考虑采用ant-design-pro，而且ant-design-pro...一些建议和经验以下代码部分都是vue，不涉及react 1. elementUI的菜单组件在手机端点击会回弹的问题修改trigger为click的方式，因为默认hover时...关于手动文件上传注意，ant-design中，file对象可以通过绑定的beforeUpload方法得到

24.8K6 0

使用umi开发react-native应用

概览 NPM 包简介 umi-plugin-antd-react-native 为@ant-design/react-native提供按需加载，主题定制、预设、切换，国际化支持，在expo中链接字体图标.../react-native 在 RN 工程目录下，使用 yarn 安装@ant-design/react-native: yarn add @ant-design/react-native && yarn...比如，执行UMI_ENV=dev umi g rn时，会加载metro.dev.config.js文件中的配置，使用mergeConfig同metro.config.js中的配置进行合并。...onReactNavigationStateChange 异步（async）函数，用于订阅 react-navigation 状态变更通知，在每次路由变动时，接收最新状态。...} return React.createElement(Text, null, 'Loading...'); }; } // 订阅 react-navigation 状态变化通知

9.7K3 0

三分钟迁移 antd@4

重写的 table 和 from 解决很多遗留的疑难杂症，具体可以查看豆酱老师的 antd@4 系列文章[2]，里面详细写了心路历程，在 form 中我们不需要使用 getFieldDecorator...# 通过 npx 直接运行 npx -p @ant-design/codemod-v4 antd4-codemod src # 或者全局安装 # 使用 npm npm i -g @ant-design.../codemod-v4 # 或者使用 yarn yarn global add @ant-design/codemod-v4 # 运行 antd4-codemod src 值得注意的是如果项目中使用了...另外由于 form 不兼容，codemod 不会自动帮你迁移到新的写法，但是迁移到兼容包 @ant-design/compatible 方便在和新版本一起使用，而不用完全迁移。...https://next.ant.design/docs/react/migration-v4-cn > 如果你想获得迁移到新的版本，可以按照上面的文档描述实现，但是 Pro 中支持通过设置 icon 配置菜单图标

2.2K3 0

React的移动端和PC端生态圈的使用汇总

UI组件库，由于本人平时都不使用UI库了，所以可能会遗漏。 Ant-Design,pc版，制作后台管理系统的神器，同样要感谢前辈们的开源。关键字，webpack按需加载，配置默认样式， ?...在react-native中使用Ant-Design yarn add @ant-design/react-native 在babel配置中: "plugins": [ ["import",...{ libraryName: "@ant-design/react-native" }] ] 在React-native组件中使用： import React from 'react'; import...、通知、图标等）基于 Electron的开发就像在开发网页，而且能够无缝地使用 Node。...基于JavaScriptCore，Web开发者可以尽情使用ES6的新特性，如class、箭头操作符等，而且 React Native运行在JavaScriptCore中的，完全不存在浏览器兼容的情况。

3.2K4 0

从 React Router 到 Ant Design 菜单，再到 Nginx 部署上线：一套能跑起来的前端页面实战记录

先看看这套项目要做什么这个项目的目标非常明确：使用React搭建页面使用ReactRouter管理路由使用AntDesign的Menu组件做顶部菜单通过菜单点击切换到不同页面使用Vite进行开发和构建最后将构建产物部署到服务器通过...importrollupReplacefrom"@rollup/plugin-replace";//https://vitejs.dev/config/exportdefaultdefineConfig({base:"/",//如果部署在子路径中，...如"/my-app"，请更改为子路径名server:{port:8817,},build:{outDir:"dist",//确保构建输出到dist文件夹},plugins:[rollupReplace(...而下面这句：展开代码语言：TXTAI代码解释则像通知演员们登场的开场铃，项目从src/main.tsx正式开始启动...如果你使用npm，那么先安装依赖：展开代码语言：TXTAI代码解释npminstall然后启动开发环境：展开代码语言：TXTAI代码解释npmrundev由于vite.config.ts中设置了端口为8817

1171 0

站在umi的肩膀上做项目1

在umi文档中提到，文档链接：如果项目的配置不复杂，推荐在 .umirc.ts 中写配置；如果项目的配置比较复杂，可以将配置写在 config/config.ts 中，并把配置的一部分拆分出去，比如路由配置可以拆分成单独的.../routes'; export default defineConfig({ routes: routes, }); 所以我们想要添加的路由都在config.ts中添加路由如下的client...的内容都是我们新添加的路由添加后我们在控制台看到了如下错误：这是因为菜单配置文件中没有添加对应的配置。...添加菜单配置路径如下：src/locales/zh-CN/menu.ts ，其它文件，如en-US对应的是英语的菜单配置。每种语言的菜单都配置之后，就会实现语言的切换。...import { Col, Row ,Input,Button} from 'antd'; // 引入图标 import { SearchOutlined } from '@ant-design/icons

8843 0

点击加载更多

Uni&antd的ProLayout布局动态菜单实现及踩坑记录

Uni&antd的ProLayout布局动态菜单实现及踩坑记录

Ant Design Umi 项目创建

umi3升级umi4报错问题汇总，附解决方法

如何在服务器中Ping特定的端口号，如telnet Ping,nc Ping,nmap Ping等工具的详细使用教程（Windows、Linux、Mac）

使用hooks重新定义antd pro想象力（一）

前端UI框架Ant Design Pro

使用ant design开发完整的后台系统

使用hooks重构antd pro的想象力（三）我是如何利用hooks干掉redux的

这是我看过的最强大的社区实战项目！

Ant-Design-Vue 3.x 图标库如何实现自动引入？

快速学习Ant Design Pro-快速入门

Mock17-Antd高级模板组件ProComponents

Next.js 实战 (二)：搭建 Layouts 基础排版布局

ElementUI和Ant Design对比

使用umi开发react-native应用

三分钟迁移 antd@4

React的移动端和PC端生态圈的使用汇总

从 React Router 到 Ant Design 菜单，再到 Nginx 部署上线：一套能跑起来的前端页面实战记录

站在umi的肩膀上做项目1

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐