Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fudiwei/x.naive-ui
一个对 Naive-UI 组件库的扩展，使 DataTable/Dropdown/Menu/Select/Tree 等组件支持插槽模板式的写法。An extension to Naive-UI component library, that enables slots and template style API for DataTable/Dropdown/Menu/Select/Tree.
https://github.com/fudiwei/x.naive-ui
component-library naive-ui ui-components vue vue-ui vue-ui-components vue-ui-library vue3
Last synced: about 2 months ago
JSON representation
一个对 Naive-UI 组件库的扩展，使 DataTable/Dropdown/Menu/Select/Tree 等组件支持插槽模板式的写法。An extension to Naive-UI component library, that enables slots and template style API for DataTable/Dropdown/Menu/Select/Tree.
- Host: GitHub
- URL: https://github.com/fudiwei/x.naive-ui
- Owner: fudiwei
- License: mit
- Created: 2023-08-17T19:47:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-30T06:08:40.000Z (4 months ago)
- Last Synced: 2024-12-10T02:20:47.322Z (2 months ago)
- Topics: component-library, naive-ui, ui-components, vue, vue-ui, vue-ui-components, vue-ui-library, vue3
- Language: TypeScript
- Homepage: https://github.com/fudiwei/x.naive-ui
- Size: 402 KB
- Stars: 37
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.en-US.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-naive - X.Naive-UI - An extension to the Naive-UI component library, that enables slots and template style API for DataTable/Dropdown/Menu/Select/Tree. (List / Third-party components for NaiveUI)
README
X Naive-UI
[](https://www.npmjs.com/package/@skit/x.naive-ui)
[](https://www.npmjs.com/package/@skit/x.naive-ui)
[](https://mit-license.org/)
An extension to the Naive-UI component library.
Enables slots and template style for DataTable / Dropdown / Menu / Select / Tree.
简体中文 | English
---
## Introduction
[Naive-UI](https://github.com/tusen-ai/naive-ui) is a popular Vue 3 component library.
Due to the maintainability, the official team does not provide slots or template style APIs for `DataTable`, `Dropdown`, `Menu`, `Select`, `Cascader`, `Tree`, `TreeSelect` _etc._.
Here are some related issues on GitHub:
- [#106 - Table support slot for customColumn](https://github.com/tusen-ai/naive-ui/issues/106)
- [#205 - 增加数据表格展开功能的插槽](https://github.com/tusen-ai/naive-ui/issues/205)
- [#216 - table 使用 template 风格的 API](https://github.com/tusen-ai/naive-ui/issues/216)
- [#307 - NDataTable 和 NTree 组件能够支持使用插槽渲染吗？](https://github.com/tusen-ai/naive-ui/issues/307)
- [#520 - NDropdown support template option](https://github.com/tusen-ai/naive-ui/issues/520)
- [#1136 - 你认同 DataTable 的设计方案么？](https://github.com/tusen-ai/naive-ui/discussions/1136)
- [#2054 - 是否考虑将组件中的 h 函数调整为 template 插槽](https://github.com/tusen-ai/naive-ui/issues/2054)
- [#2252 - 建议 DataTable 组件支持自定义列模板](https://github.com/tusen-ai/naive-ui/issues/2252)
- [#3337 - 使用 h 渲染函数的建议](https://github.com/tusen-ai/naive-ui/issues/3337)
- [#3363 - 所有组件的 render 函数都删掉吧](https://github.com/tusen-ai/naive-ui/issues/3363)
- [#3477 - 建议添加一个组件：菜单项](https://github.com/tusen-ai/naive-ui/issues/3477)
- [#4273 - DataTable 增加 template 支持](https://github.com/tusen-ai/naive-ui/issues/4273)
- [#4663 - 希望 Dropdown 可以增加 slots 插槽](https://github.com/tusen-ai/naive-ui/issues/4663)
- [#5065 - n-data-table slot for row or component for column](https://github.com/tusen-ai/naive-ui/issues/5065)
- [#5134 - datatable 请求提供对外的列插槽，或者 render 提供 jsx 的形式，不必使用 h 函数](https://github.com/tusen-ai/naive-ui/issues/5134)
This project is aimed to provide a solution for these issues above.
🚀 This has been added to [Awesome Naive-UI](https://github.com/naive-ui/awesome-naive).
---
## Features
- Almost the same API to Naive-UI (latest compatible version: `v2.40.1`). You just need to add `x-` before the original component name (example: `` → ``).
- `DataTable`: Scoped slots for **columns**, **cells**, **expandable rows**.
- `DataTable`: Template style API for **columns**, **summary**.
- `Dropdown`: Scoped slots for **options**, **icons**.
- `Dropdown`: Template style API for **options**, **option groups**.
- `Menu`: Template style API for **options**.
- `Menu`: Scoped slots for **options**, **icons**.
- `Select`: Template style API for **options**, **option groups**.
- `Select`: Scoped slots for **options**, **tags**.
- `Popselect`: Template style API for **options**, **option groups**.
- `Popselect`: Scoped slots for **options**.
- `Cascader`: Scoped slots for **options**.
- `Tree`: Scoped slots for **options**, **switcher icon**.
- `TreeSelect`: Scoped slots for **options**, **tags**, **switcher icon**.
- `Button`: Display as a square when only icon.
---
## Documentation
[Click here to view](./docs/en-US/README.md).
---
## Demo
You can run the demo to view more details.
```shell
> pnpm install # install dependencies
> pnpm run build # build
> pnpm run demo # run demo, then visit http://localhost:8888/
```