@skit/x.naive-ui
TypeScript icon, indicating that this package has built-in type declarations

0.17.1 • Public • Published

X Naive-UI

NPM Version NPM Download License

一个对 Naive-UI 组件库的扩展。

使 DataTable / Dropdown / Menu / Select / Tree 等组件支持插槽模板式的写法。

简体中文 | English


简介

Naive-UI 是一个流行的 Vue 3 组件库。

官方团队出于可维护性的考虑,没有提供 DataTableDropdownMenuSelectCascaderTreeTreeSelect 等组件的 Slot 插槽或 Template 模板式的写法支持。

以下是 GitHub 上的一些相关 Issues:

本项目旨在为上述问题提供解决方案。

🚀 已加入 Awesome Naive-UI 系列。


特性

  • 与 Naive-UI 组件几乎完全一致的 API(最新适配版本:v2.38.2)。只需在原来的组件名前增加 x- 前缀(例如:<n-data-table><x-n-data-table>)。
  • 配合 vue-tsc,在模板中使用插槽也可享受到 TypeScript 的类型约束。
  • DataTable:提供了列头单元格展开行的作用域插槽写法支持。
  • DataTable:提供了总结栏的模板写法支持(即在模板中定义 columnssummary prop)。
  • Dropdown:提供了菜单项图标的作用域插槽写法支持。
  • Dropdown:提供了菜单项菜单分组的模板写法支持(即在模板中定义 options prop)。
  • Menu:提供了菜单项的模板写法支持(即在模板中定义 options prop)。
  • Menu:提供了菜单项图标的作用域插槽写法支持。
  • Select:提供了选项选项组的模板写法支持(即在模板中定义 options prop)。
  • Select:提供了选项标签的作用域插槽写法支持。
  • Popselect:提供了选项选项组的模板写法支持(即在模板中定义 options prop)。
  • Popselect:提供了选项的作用域插槽写法支持。
  • Cascader:提供了选项的作用域插槽写法支持。
  • Tree:提供了数据项开关图标的作用域插槽写法支持。
  • TreeSelect:提供了数据项标签开关图标的作用域插槽写法支持。
  • Button:提供了当仅有图标时显示为正方形的样式效果。

使用手册

点此查看


示例项目

你可以运行 Demo 来查看更多内容。

> pnpm install    # 安装依赖
> pnpm run build  # 构建项目
> pnpm run demo   # 运行示例,访问 http://localhost:8888/

Package Sidebar

Install

npm i @skit/x.naive-ui

Weekly Downloads

21

Version

0.17.1

License

MIT

Unpacked Size

4.49 MB

Total Files

195

Last publish

Collaborators

  • fudiwei