{"id":19824546,"url":"https://github.com/belleui/belleui","last_synced_at":"2025-08-25T14:06:13.213Z","repository":{"id":44225119,"uuid":"294913512","full_name":"belleui/belleui","owner":"belleui","description":"Web Components UI library","archived":false,"fork":false,"pushed_at":"2023-04-21T16:27:24.000Z","size":2906,"stargazers_count":37,"open_issues_count":11,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-27T15:47:36.267Z","etag":null,"topics":["lerna","typescript","ui-libary","web-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/belleui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-12T09:38:31.000Z","updated_at":"2024-06-20T16:23:17.526Z","dependencies_parsed_at":"2024-06-20T16:22:44.777Z","dependency_job_id":"645c818e-65b4-4e34-b6c9-070014a5d542","html_url":"https://github.com/belleui/belleui","commit_stats":{"total_commits":100,"total_committers":3,"mean_commits":"33.333333333333336","dds":"0.040000000000000036","last_synced_commit":"b90be24bd0d2cfcbd2a404658e77d91faa1f1123"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/belleui%2Fbelleui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/belleui%2Fbelleui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/belleui%2Fbelleui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/belleui%2Fbelleui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/belleui","download_url":"https://codeload.github.com/belleui/belleui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223390835,"owners_count":17137875,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lerna","typescript","ui-libary","web-components"],"created_at":"2024-11-12T11:04:24.855Z","updated_at":"2024-11-12T11:06:26.820Z","avatar_url":"https://github.com/belleui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Belleui\n\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@belleui/belle-elements)\n\nBellui是一个基于 [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) 的 UI 组件库，您可以在`HTML`中，或者任何框架（如[React](https://github.com/facebook/react), [Vue](https://github.com/vuejs/vue),  [Angular](https://github.com/angular/angular)）中使用。引入组件后，你可以随时随地的像使用原生`html`标签一样使用组件。\n\n## 为什么选择 Belleui\n\n* 基于`Web Components`，能和其他框架结合使用，不用因为切换技术栈从而切换不用的UI框架。\n* 支持主流浏览器。\n* 提供丰富的UI组件。\n\n**相关资源：**\n\n* [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)\n* [LitElement](https://lit-element.polymer-project.org/)\n\n## 组件\n\n| Components | Issues | Version |\n| ---------- | ------- | ------ |\n| [belle-avatar](https://github.com/belleui/belleui/blob/master/packages/avatar) | [Issues](https://github.com/belleui/belleui/issues?q=label%3AComponent%3AAvatar) | [![npm version](https://img.shields.io/npm/v/@belleui/belle-avatar.svg?style=flat)](https://www.npmjs.com/package/@belleui/belle-avatar) |\n| [belle-badge](https://github.com/belleui/belleui/blob/master/packages/badge) | [Issues](https://github.com/belleui/belleui/issues?q=label%3AComponent%3ABadge) | [![npm version](https://img.shields.io/npm/v/@belleui/belle-badge.svg?style=flat)](https://www.npmjs.com/package/@belleui/belle-badge) |\n| [belle-button](https://github.com/belleui/belleui/blob/master/packages/button) | [Issues](https://github.com/belleui/belleui/issues?q=label%3AComponent%3AButton) | [![npm version](https://img.shields.io/npm/v/@belleui/belle-button.svg?style=flat)](https://www.npmjs.com/package/@belleui/belle-button) |\n| [belle-card](https://github.com/belleui/belleui/blob/master/packages/card) | [Issues](https://github.com/belleui/belleui/issues?q=label%3AComponent%3ACard) | [![npm version](https://img.shields.io/npm/v/@belleui/belle-card.svg?style=flat)](https://www.npmjs.com/package/@belleui/belle-card) |\n| [belle-elements](https://github.com/belleui/belleui/blob/master/packages/elements) |  [Issues](https://github.com/belleui/belleui/issues?q=label%3AComponent%3AElements)  | [![npm version](https://img.shields.io/npm/v/@belleui/belle-elements.svg?style=flat)](https://www.npmjs.com/package/@belleui/belle-elements) |\n| [belle-menu](https://github.com/belleui/belleui/blob/master/packages/menu) |  [Issues](https://github.com/belleui/belleui/issues?q=label%3AComponent%3AMenu)  | [![npm version](https://img.shields.io/npm/v/@belleui/belle-menu.svg?style=flat)](https://www.npmjs.com/package/@belleui/belle-menu) |\n| [belle-modal](https://github.com/belleui/belleui/blob/master/packages/modal) |  [Issues](https://github.com/belleui/belleui/issues?q=label%3AComponent%3AModal)  | [![npm version](https://img.shields.io/npm/v/@belleui/belle-modal.svg?style=flat)](https://www.npmjs.com/package/@belleui/belle-modal) |\n| [belle-radio](https://github.com/belleui/belleui/blob/master/packages/radio) |  [Issues](https://github.com/belleui/belleui/issues?q=label%3AComponent%3ARadio)  | [![npm version](https://img.shields.io/npm/v/@belleui/belle-radio.svg?style=flat)](https://www.npmjs.com/package/@belleui/belle-radio)\n| [belle-select](https://github.com/belleui/belleui/blob/master/packages/select) |  [Issues](https://github.com/belleui/belleui/issues?q=label%3AComponent%3ASelect)  |[![npm version](https://img.shields.io/npm/v/@belleui/belle-select.svg?style=flat)](https://www.npmjs.com/package/@belleui/belle-select)\n| [belle-spin](https://github.com/belleui/belleui/blob/master/packages/spin) |  [Issues](https://github.com/belleui/belleui/issues?q=label%3AComponent%Spin)  | [![npm version](https://img.shields.io/npm/v/@belleui/belle-spin.svg?style=flat)](https://www.npmjs.com/package/@belleui/belle-spin) |\n| [belle-switch](https://github.com/belleui/belleui/blob/master/packages/switch) |  [Issues](https://github.com/belleui/belleui/issues?q=label%3AComponent%Switch)  | [![npm version](https://img.shields.io/npm/v/@belleui/belle-switch.svg?style=flat)](https://www.npmjs.com/package/@belleui/belle-switch) |\n| [belle-tag](https://github.com/belleui/belleui/blob/master/packages/tag) |  [Issues](https://github.com/belleui/belleui/issues?q=label%3AComponent%Tag)  | [![npm version](https://img.shields.io/npm/v/@belleui/belle-tag.svg?style=flat)](https://www.npmjs.com/package/@belleui/belle-tag) |\n\n## 开始\n\n在你的项目中使用 `belleui`，你可以安装整个组件库到项目中，或者安装单个组件：\n\n```bash\n# 安装整个组件\nnpm install @belleui/belle-elements\n\n# 安装button组件\nnpm install @belleui/belle-button\n```\n\n使用 Yarn 安装：\n\n```bash\nyarn add @belleui/belle-elements\n```\n\n## 如何使用\n\n在 `Web Components` 项目中使用:\n\n```javascript\nimport { LitElement, html } from 'lit-element'\nimport '@belleui/belle-elements'\n\nclass MyApp extends LitElement {\n  render() {\n    return html`\n      \u003cbelle-button type=\"primary\"\u003eButton\u003c/belle-button\u003e\n    `\n  }\n}\n```\n\n在 `React` 项目中使用：\n\n[![Edit belleui-react-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/belleui-react-demo-iet3z?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n\n## 开发\n\n[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/belleui/belleui)\n\n使用 [yarn](https://yarnpkg.com/) 作为你的包管理工具\n\n```bash\ngit clone https://github.com/belleui/belleui.git\ncd belleui\nyarn\n```\n\n快速预览demo：\n\n```sh\nyarn storybook\n```\n\n开发：\n\n```sh\n# 编译 TS文件\nyarn watch\n\n# 预览demo\nyarn storybook\n```\n\n## 参与贡献\n\n[贡献指南](./docs/contribute.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbelleui%2Fbelleui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbelleui%2Fbelleui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbelleui%2Fbelleui/lists"}