Naive ui主题色修改

这篇具有很好参考价值的文章主要介绍了Naive ui主题色修改。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Naive ui主题色修改

新建 theme.ts 文件

import type { GlobalThemeOverrides } from 'naive-ui'
const themeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: '#EC5E42',
    primaryColorHover: '#CF523A',
    primaryColorPressed: '#963C2A'
    // primaryColorSuppl: '#4098FC'
  }
  // Button: {
  //     textColor: '#FF0000'
  // }
}

export default themeOverrides

App.vue中引入theme.ts

n-config-provider标签中加入
:theme-overrides=“themeOverrides”文章来源地址https://www.toymoban.com/news/detail-596505.html

<n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme-overrides="themeOverrides">
    <n-dialog-provider>
      <n-message-provider>
        <Content />
      </n-message-provider>
    </n-dialog-provider>
  </n-config-provider>

到了这里,关于Naive ui主题色修改的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 修改naive ui默认样式,css变量值修改

    新项目开发使用了naive ui组件库,使用组件时涉及到css样式修改,可以直接在组件父容器上使用组件内自带的css变量,组件会自动继承父容器的css变量值,不会影响其他页面使用; 示例:一个注册表单,两个input间隔高度太大,调整高度,组件使用grid布局,代码截图:   浏览

    2024年02月12日
    浏览(53)
  • 前端项目review之修改element-ui全局主题颜色配置element-theme-chalk和gulp

    每个公司的主题风格肯定是不一样的,比如现在的公司主题就是#00ab7a。在PC端TO-B的项目中少不了用 element-ui ,这个时候用 element-theme-chalk 直接本地编译修改了element全局的主题色。 执行 当只有一个主题不需要切换的时候,使用 element-theme-chalk 就足够了,但是当主题很多的时候

    2023年04月09日
    浏览(40)
  • vue naive ui 按钮绑定按键

    知识点: 按键绑定Button 全局挂载使得message,notification, dialog, loadingBar 等NaiveUI 生效 UMD方式使用vue 与 naive ui 将vue默认的 分隔符大括号 替换 为 [[ ]] https://juejin.cn/post/7188032240775856185 https://www.naiveui.com/zh-CN/os-theme/components/discrete

    2024年02月10日
    浏览(41)
  • 使用@zip.js/zip.js与naive-ui的Tree组件实现在线文件解压预览

    用于压缩和解压缩文件的 JavaScript 库 支持Zip64 格式 支持WinZIP AES和 PKWare ZipCrypto 加密 支持同时读取和写入一个或多个 zip 文件 集成工作池管理器 无第三方依赖 该库依赖于Promise、TypedArray、 Streams API 以及以下可选的 API: Web Workers Compression Streams Web Crypto 该库与最新版本的

    2024年02月19日
    浏览(51)
  • Vue3 UI组件库对比,Naive UI、Element Plus、 Ant Design Vue

    Element Plus Naive ui Ant Design Vue 简介 element-ui Vue3版本,国内使用广泛 Vue作者推荐的Vue3ui 组件库 阿里Ant Design设计规范的Vue实现版 地址 https://github.com/element-plus/element-plus https://github.com/tusen-ai/naive-ui https://github.com/vueComponent/ant-design-vue 社区活跃度 高 中 高 ui库组件主要实现方式

    2024年01月25日
    浏览(46)
  • vue3 ,naive-ui,嵌套modal踩坑

    今天写代码,组合使用了,n-modal,n-datatable和n-select,在n-select组件出问题,无法展开,并且报错 先展示错误的demo代码 ModuleView是抽象出来的组件,问题就出在这个抽象里面,下面是子组件代码; 很明显这是一个嵌套modal的代码。 效果图: 大伙都知道,vue2的时候template里面第一层

    2024年04月10日
    浏览(48)
  • 修改element-ui主题颜色

    方法1:创建一个公共的更改的CSS文件,在CSS文件里写入 $–color-primary:加颜色,最后在main.js中引入 方法2:借助在线主题生成工具,设置自己想要的颜色,下载主题,解压之后,在main.js 中引入 方法3:安装主题工具 1、安装主题工具 2、从 npm 安装theme 3、初始化变量文件 4、根

    2024年02月11日
    浏览(69)
  • Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用

    前言 如果对 vue3 的语法不熟悉的,可以移步 Vue3.0 基础入门Vue3.0 基础入门快速入门。 UI 组件请参考官网:Naive Ui 官网 为什么选择 naive ui 不继续用 element ui,因为尤大大推荐,可以尝试下,而且 naive ui 更贴近 vue3 的语法,当然易上手还是element ui 好一点。 github 开源库:Vue

    2024年02月07日
    浏览(78)
  • Vue3的几款UI组件库:Naive UI、Element Plus、 Ant Design Vue、Arco Design

    vue3系列的三款ui框架简要对比: 框架 Element Plus Naive ui Ant Design Vue Arco Design 简介 element-ui Vue3版本,国内使用广泛 Vue作者推荐的Vue3ui 组件库 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步 ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现 社区活跃度

    2024年02月03日
    浏览(47)
  • naive-ui NPopconfirm怎么用vue3的h()渲染

    先看效果 然后我先贴代码, 你们看懂的先运行下, 文章后面我教你怎么 添加这种有template,有slot插槽的组件 正文 以提示窗组件为例,官方地址为==》Naive UI 这个部分 就是下图左边部分驼峰写法 然后你vscode 键盘ctrl+鼠标左键 点击他 然后同样的方法查看ButtonProps,你就知道

    2024年02月13日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包