MCPcopy Index your code
hub / github.com/FriedRiceNoodles/banana-ui

github.com/FriedRiceNoodles/banana-ui @1.17.2

Chat with this repo
repository ↗ · DeepWiki ↗ · release 1.17.2 ↗ · + Follow
433 symbols 1,012 edges 224 files 0 documented · 0%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

Banana UI

NPM version NPM downloads

Banana UI 是一套底层基于 Web Components 的组件库,它提供了一套常用的组件。

官方文档: https://friedricenoodles.github.io/banana-ui/

⭐️ 特性

  • 🧩 可用于任何 Web 框架(React、Vue、以及其他...)
  • 🌐 可用于原生环境(无框架)
  • 🚀 支持 SSR(甚至能用于 worker 环境)
  • 🛡 良好的 TypeScript 支持
  • 📱 适用于 PC 端,移动端也可用
  • 🧪 完善的单元测试

Banana 解决了什么问题?

Banana 最大的特点是它是一个基于 Web Components 的组件库,这意味着它可以在几乎所有的前端框架中使用,也可以在原生环境(无框架)中使用;并且它还支持服务端渲染(SSR),甚至可以用于 worker 环境。这意味着你几乎可以在任何地方使用它。

Banana 似乎是现在国内唯一一个支持服务端渲染的 Web Components 组件库。

基于这点,Banana 适合这些场景:

  • 你正在开发一个需要支持多种框架的组件/插件/工具。
  • 你有多个项目,它们使用不同的前端框架,你希望能够在这些项目中使用相同的组件库。
  • 你开发的项目正在使用模板引擎,而不是前端框架(比如 Shopify、Wordpress 等)。
  • 你开发的项目没有使用前端框架,而是原生环境。
  • React 用户,我们提供了一个 React 版本,它对 React 做了专门的适配,可以更好地和 React 配合使用。
  • 当然,Vue 项目或其他 Web 框架也可以使用 Banana。

寻求帮助 & 参与贡献

欢迎任何形式的提问和贡献,你可以在 Issues 区 上提出问题或寻求帮助。 如果你想参与贡献,希望可以先查看 贡献指南

Q & A

我可以把它用于生产环境吗?

可以。Banana UI 已经在一些项目中使用。但是请注意,它仍然处于早期阶段,可能会有一些问题。如果你在使用过程中遇到了问题,欢迎在 Issues 区 上提出问题或寻求帮助。

作者注:我目前在一个跨境电商公司工作,公司最大的 C 端项目以及它的一些内部系统都在使用 Banana UI。

LICENSE

MIT

Extension points exported contracts — how you extend this code

BananaFormProperties (Interface)
(no doc)
packages/banana/controllers/form.ts
Window (Interface)
(no doc)
packages/banana/src/message/index.ts

Core symbols most depended-on inside this repo

toCamelCase
called by 22
packages/banana-cli/templates/toCamelCase.js
createComponent
called by 22
packages/banana-cli/bin/index.js
setProperty
called by 19
packages/banana/controllers/form.ts
open
called by 14
packages/banana/src/message/index.ts
closeMessage
called by 11
packages/banana/src/message/index.ts
success
called by 9
packages/banana/src/message/index.ts
getProperty
called by 8
packages/banana/controllers/form.ts
hide
called by 8
packages/banana/src/select/index.ts

Shape

Method 252
Function 129
Class 50
Interface 2

Languages

TypeScript100%

Modules by API surface

packages/banana/src/carousel/index.ts34 symbols
packages/banana/src/select/index.ts33 symbols
packages/banana/src/tooltip/index.ts19 symbols
packages/banana/src/dropdown/index.ts18 symbols
packages/banana/controllers/form.ts17 symbols
packages/banana/src/stepper/index.ts15 symbols
packages/banana/src/rating/index.ts15 symbols
packages/banana/src/message/index.ts15 symbols
packages/banana/src/radio-group/index.ts13 symbols
packages/banana/src/overlay/index.ts12 symbols
packages/banana/src/input/index.ts12 symbols
packages/banana/src/collapse/index.ts12 symbols

For agents

$ claude mcp add banana-ui \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact

Ask about this repo answers extend the page