https://github.com/weimob-tech/titian-h5
Titian H5 组件库
https://github.com/weimob-tech/titian-h5
react-library ui-components ui-library uikit vue-library web-components-library
Last synced: 8 months ago
JSON representation
Titian H5 组件库
- Host: GitHub
- URL: https://github.com/weimob-tech/titian-h5
- Owner: weimob-tech
- License: mit
- Created: 2021-11-15T06:24:53.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-08-18T06:52:09.000Z (almost 3 years ago)
- Last Synced: 2025-04-19T19:22:10.110Z (about 1 year ago)
- Topics: react-library, ui-components, ui-library, uikit, vue-library, web-components-library
- Language: TypeScript
- Homepage: https://titian.design.weimob.com
- Size: 1.67 MB
- Stars: 34
- Watchers: 5
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
[![NPM][npm-badge]][npm-url] [![FIGMA][figma-badge]][figma-url] [![LICENSE][license-badge]][license-url] [![NPM downloads][download-image]][download-url]
[npm-badge]: https://img.shields.io/npm/v/@titian-design/h5.svg
[npm-url]: https://www.npmjs.com/package/@titian-design/h5
[figma-badge]: https://img.shields.io/badge/Figma-UIKit-%2318a0fb
[figma-url]: https://www.figma.com/community/file/1194917512409387064
[license-badge]: https://img.shields.io/npm/l/@titian-design/h5
[license-url]: https://github.com/weimob-tech/titian-h5/blob/master/LICENSE
[download-image]: https://img.shields.io/npm/dm/@titian-design/h5
[download-url]: https://npmjs.org/package/@titian-design/h5
[Titian Design](https://github.com/weimob-tech/titian-design) 适配移动端H5组件库。
## 🎉 特性
- 60+ 高质量组件
- 适配移动端交互
- 支持多框架，包括Web Components 、React和Vue 3.0
- 支持按需加载
- 支持主题定制，内置三种风格
- 支持 SSR
- 国际化支持
## 🔥 安装
React 项目
```shell
npm install @titian-design/mobile-react
```
Vue 3.0 项目
```shell
npm install @titian-design/mobile-vue
```
## 👍 使用
React 项目
```js
import { TiButton } from '@titian-design/mobile-react';
const App = () => (
Button
);
export default App;
```
Vue 3.0 项目
```js
import { createApp } from 'vue'
import { TitianUI } from '@titian-design/mobile-vue'
import App from './App.vue'
const app = createApp(App)
app.use(TitianUI)
app.mount('#app')
```
## 🔨 本地开发
```bash
$ git clone git@github.com:weimob-tech/titian-h5.git
$ cd titian-h5
$ npm install pnpm -g
$ pnpm install
$ pnpm start
```
### packages
| 代码路径 | npm 包名 | 说明 | 依赖于 |
| ----------------- | ---------------------- | -------------------------------------------- | ---------------------- |
| packages/h5 | `@titian-design/h5` | `H5` 组件库源文件，是以 [`stencil`](https://stenciljs.com/docs/introduction) 为基础。 | `@stencil/core` |
| packages/h5-react | `@titian-design/mobile-react` | 基于 `@titian-design/h5` 搭建的 react 组件库 | `@titian-design/h5` |
| packages/h5-vue | `@titian-design/mobile-vue` | 基于 `@titian-design/h5` 搭建的 vue 3 组件库 | `@titian-design/h5` |
| packages/doc-web | - | 基于 `docusaurus` 搭建的 API 文档 | `@titian-design/mobile-react` |
## 🎈 协议
Titian Design 使用 [MIT 协议](LICENSE)