Naive-Ui-Admin样式修改——导航菜单样式、内容修改

最新推荐文章于 2024-05-21 14:05:53 发布
最新推荐文章于 2024-05-21 14:05:53 发布
阅读量5.1k 收藏 11
点赞数
分类专栏： vue 文章标签： css html vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41141657/article/details/120628097
版权

导航菜单背景颜色修改
在这里插入图片描述css样式中添加
在这里插入图片描述

::v-deep(.n-layout-sider){
    background-color: #336699 !important;
    color: white;
  }

菜单修改文字
在这里插入图片描述菜单修改图标
https://ionic.io/ionicons
查找需要的图标，点击可得到图标名称
在这里插入图片描述把-格式改成EarthOutline
在这里插入图片描述填在对应的两个区域
在这里插入图片描述

不要生病~
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Naive Ui Admin 发布后台管理系统 高颜值Admin骨架 看看是不是你想要的
m0_54850952的博客
03-08 735
简介 Naive Ui Admin 是一个免费开源的中后台模版，使用了最新的vue3,vite2,TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 特性 最新技术栈：使用 Vue3/vite2 等前端前沿技术开发 TypeScript: 应用程序级 JavaScript 的语言 主题：可配置的主题 Mock 数据 内置 Mock 数据方案 权限 内置完善的动态路由权限生成方案 组件 二次封装了多个常用的组件 页面功能 Features 菜单模式（左侧/顶部）.
Naive UI组件库的使用-第一部分
最新发布
Coffee&Code
06-27 989
Naive UI 通过使用 n-config-provider 调整主题。默认情况下所有组件均为亮色主题，无需任何配置。如果你想使用暗色主题：那么设置变量theme = darkTheme即可。若theme值为undefined则不影响内部组件主题。<template><app /></script>本篇文章讲述了naive ui在vue3下的安装和配置，及图标xicons的使用，及字体的使用。还有就是全局系统主题的设置，及自定义组件主题的设置方式，还有就编辑器的使用，再有就是国际化的实现。
Naive UI修改默认样式
weixin_51615179的博客
03-17 3251
因为大创的缘故，需要做出一个网站，在搭建网站的过程中需要使用Naive UI框架，在设置样式的时候一直无法修改默认样式。小白不知道应该如何使用样式穿透，同时和Naive UI相关的博客比较少，导致只能自己一步步摸索，所幸，找到了最后的解决办法。（注意，这个解法可能只适合Naive UI。
Naive ui：菜单 Menu批量处理图标替换自定义图片
lq099526的专栏
09-30 2582
项目中使用的是自定义的图标，把需要使用的图标保存到本地，使用。2、新建一个js文件，把需要用到的图标引入到项目文件中。2、菜单组件中引入js文件，渲染图标。n-menu自带的图标使用。图标库，使用方法参考官网和。批量处理菜单图标渲染。1、新建一个菜单组件。
Naive UI 之 修改组件样式
aliceyang2012的专栏
11-15 2148
Naive UI 组件样式
Naive-UI自定义TabPane样式
潮汐未见潮落的博客
01-12 3160
Naive-UI自定义TabPane样式（搭配 n-icon）
修改naive ui默认样式，css变量值修改
lq099526的专栏
09-30 5279
新项目开发使用了naive ui组件库，使用组件时涉及到css样式修改，可以直接在组件父容器上使用组件内自带的css变量，组件会自动继承父容器的css变量值，不会影响其他页面使用；
naive-ui-vite-ssr:naive-ui vite ssr 的一个例子
08-03
Naive UI Vite SSR npm run dev
基于 vue-naive-admin 2.0版 前端框架的 golang版本做服务端.zip
04-03
【Vue-Naive-Admin 2.0与Golang服务端集成详解】 Vue-Naive-Admin是一款流行的前端框架，专为快速构建管理界面而设计。2.0版本在前一版的基础上进行了优化和增强，提供了更加高效和易用的组件库以及灵活的配置选项...
naive-scrcpy-client：Python中Scrcpy的一个天真客户端
02-05
天真Scrcpy客户端 Python中的幼稚客户端。 当前，它只能解码来自服务器的视频流。 该客户端的灵感来自 。 依存关系 Android调试桥 ffmpeg共享库 opencv-pythons（用于GUI） ...安装适用于Python的OpenCV。...
个人博客前端代码（vue3 + vite2 + typescript + pinia + naive-ui）.zip
04-03
这个压缩包文件“个人博客前端代码（vue3 + vite2 + typescript + pinia + naive-ui）.zip”包含了构建一个现代个人博客前端所需的核心技术栈。以下是对这些技术的详细说明： 1. **Vue.js 3**： Vue.js 是一款轻量...
Naive-Bayes-Classifier-master_naivebayes_
10-02
在"Naive-Bayes-Classifier-master"项目中，我们可以期待找到以下内容： 1. 数据集：可能包含用于训练和测试的实例数据。 2. 模型实现：通常包括Python代码，使用numpy等库来计算概率并执行分类。 3. 训练脚本：将...
Vue3+Ts项目（Naive UI组件）——创建有图标可伸缩的左边菜单栏
weixin_45594156的博客
12-14 1873
我主要是总结另一位博主的创建过程，就是他标题取的，感觉有被白嫖到（手摸手创建…），哈哈哈哈哈哈，后面会附上原博主地址。以及我个人的总结理解。在 src 目录下，新建 router 文件夹，用于存放路由配置文件。后面都请无脑复制，因为我已经把原博主的过程都走了一遍。在 src 目录下，新建 views 目录，用于存放页面文件（）页面会因为找不到一些依赖和文件而报红，咱先不管，后面再处理。个人理解vicons是个图标库，你想使用谁的图标引入谁的。我这边是简单处理：创建了一个css文件。，我还需要再研究研究。
Naive ui表单组件 n-form-item 自定义样式
lq099526的专栏
09-30 2505
【代码】Naive ui表单组件 n-form-item 自定义样式。
Naive UI 组件库 修改 级联选择器下拉框样式（Cascader）
TESJackeyLove1的博客
05-21 274
今天朋友问了我一个问题，如何修改级联选择器下拉时候的样式，我一开始以为很简单，通过样式穿透就能轻易解决，当我去修改的时候发现无论我怎么穿透，优先级再怎么高，样式始终不起效果，最后当我收起所有结构一层一层往上找的时候，发现，当前下拉盒子并不在app这个div内部。通过上图可以发现两个div是平级状态，但是我们vue3的style标签上加了一个scoped属性，那么也就意味着当前style写的样式只会在当前页面有效，但是我们的盒子并不在当前页面内，所以样式当然不会生效啦！
修改默认naive ui样式
weixin_42157672的博客
07-22 1486
n-slider-dots 不显示
naiveui 的n-menu使用字体icon解决方案
xuelang532777032的博客
06-13 1307
先看效果好，来直接说操作方法。
naiveui | select下拉选择自定义选项渲染
保持清醒
09-01 2152
要提升价值就要改变; 要达到完美就得经常改变。 To improve is to change; to be perfect is to change often.
Naive UI table根据值设置样式
Rong1125的博客
05-14 181
【代码】table根据值设置样式。
naive-ui弹出框
08-24
Naive-UI 是一款基于 Vue.js 的 UI 组件库，它提供了弹出框（Dialog）组件用于显示模态框。要使用 Naive-UI 的弹出框，你需要先安装并引入 Naive-UI 的相关依赖。 以下是一个使用 Naive-UI 弹出框的简单示例： 1. 首先，确保你已经安装了 Vue.js 和 Naive-UI： ```bash npm install vue@2.x naive-ui ``` 2. 在你的 Vue.js 项目中，引入 Naive-UI 的样式和组件： ```javascript import { createApp } from 'vue'; import naive from 'naive-ui'; import 'naive-ui/lib/index.css'; const app = createApp(); app.use(naive); app.mount('#app'); ``` 3. 在你的组件中使用弹出框组件： ```html <template> <div> <n-button @click="showDialog">点击弹出框</n-button> <n-dialog v-model:visible="dialogVisible"> <span>这是一个弹出框</span> <template #footer> <n-button @click="dialogVisible = false">关闭</n-button> </template> </n-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, }; }, methods: { showDialog() { this.dialogVisible = true; }, }, }; </script> ``` 上述示例中，我们使用了 Naive-UI 的 Button 组件来触发弹出框的显示，使用了 Dialog 组件来创建弹出框，通过 v-model:visible 来控制弹出框的显示与隐藏。在弹出框的底部，我们通过 #footer 插槽自定义了一个关闭按钮。 你可以根据自己的需求进一步定制和使用 Naive-UI 弹出框组件。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值