Naive UI 通过使用n-config-provider调整主题。 默认情况下所有组件均为亮色主题,无需任何配置。 了解更多关于n-config-provider的信息,参见全局化配置。 使用暗色主题 将n-config-provider的theme设为从 naive-ui 导入的darkTheme来设定暗色主题。 若theme为undefined则不会影响内部组件的主题。
无需使用less、sass、css变量或webpack的loaders，简化了主题定制的过程。使用TypeScript编写：Naive UI是第一个全量使用TypeScript编写的Vue 3组件库。TypeScript的静态类型检查和面向对象编程能力，使得开发者可以更好地编写高质量的代码，减少错误，提高开发效率。与您的TypeScript项目无缝衔接，无需导入任何CSS，让组件...
Naive UI在Vue3组件库中算是相当优秀的了,组件完整、主题可调,并且所有组件都可以 treeshaking,整体风格清爽,也得到了尤大赞扬和肯定,目前github 9.2k star,作为一款没有Vue2用户积淀的UI组件库已经很不错了
如上所示,我在vue3中使用 naive UI 并且使用它提供的主题方案,有时候会需要修改一些样式属性,这时候需要使用 naive UI 提供的 useThemeVars 获取变量并通过 v-bind 传入 style 的样式中。我感觉按照上述写法非常麻烦,在任何地方使用都必须用 computed 计算属性去获取指定的变量,这样每多一个变量就要再写多一行代码...
你可能觉得只用内置的组件不够爽,想自己也写适配主题的组件。 Naive UI 提供一些工具帮助开发者简单的创建支持主题的组件。 演示 提供主题 使用n-config-provider来设定它全部的后代组件主题。 深色 浅色 useThemeVars Naive UI 提供useThemeVars,它包含了常见的主题变量。
Naive UI 是一个基于 Vue 3 框架并完全采用 TypeScript 编写的组件库,提供了超过70个组件来满足多样化的开发需求。其不仅支持使用 TypeScript 构建,确保了类型安全,还拥有先进的主题系统,允许开发者轻松定制主题。此外,Naive UI 包含了如 select 和 tree 这样的常用组件,极大地简化了开发流程。
主题(深色/浅色)引用 naiveui 特性,黑暗主题/自定义组件,暗黑主题信手捏来 系统主题(十种安全色,可切换预览,可自定义) 导航风格(三种,可自由搭配,暗色侧边/白色侧边和通栏/暗色侧边和顶部通栏) 多页签,持久化,拖拽,关闭,固定,自适应可左右滚动 面包屑,图标,子菜单下拉联动展示 ...
2 3 4 5 Naive UI 6 一个Vue 3 组件库 7 比较完整,主题可调,使用 TypeScript,快 8 有点意思 9 10 English | 中文 11 12 ## 文档 13 14 [www.naiveui.com](http://www.naiveui.com) 15 16 ## 社区 17 18 - [Discord](...
naive-ui 在使用 CSS in JS 默认情况下,naive-ui 会在组件上绑定 inline 主题样式,这可能会影响 SSR 的尺寸。你可以使用 n-config-provider 的 inline-theme-disabled 属性来优化 调整主题 使用暗色主题 将n-config-provider 的 theme 设为从 naive-ui 导入的 darkTheme 来设定暗色主题 naive-ui 导出了 Globa...
主题:可配置的主题 Mock 数据内置 Mock 数据方案 权限内置完善的动态路由权限生成方案 组件二次封装了多个常用的组件 在线预览 naive-ui-admin 账号:admin,密码:123456(随意) 文档 文档地址 准备 node和git-项目开发环境 Vite- 熟悉 vite 特性 Vue3- 熟悉 Vue 基础语法 ...