Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/supercll/biliui
基于 Vue3.0 + TypeScript 的一款UI组件库
https://github.com/supercll/biliui
typescript vite vue3 vuejs
Last synced: 3 days ago
JSON representation
基于 Vue3.0 + TypeScript 的一款UI组件库
- Host: GitHub
- URL: https://github.com/supercll/biliui
- Owner: supercll
- Created: 2020-08-08T10:41:54.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-08-11T02:10:48.000Z (over 1 year ago)
- Last Synced: 2023-08-11T10:20:38.073Z (over 1 year ago)
- Topics: typescript, vite, vue3, vuejs
- Language: Vue
- Homepage:
- Size: 524 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 0.1.1版本
新增
- 进度条，卡片等组件
# 0.0.8版本
- 修复：
- svg图标无法更改颜色的bug
- 具体原因：
- 处于生产环境时svg需要通过fill属性更改颜色
# biliui
基于Vue3.0 + TypeScript 的一款UI组件库
# 官方文档
http://ui.lhikari.com
# 介绍
BILI UI 是一款基于 Vue 3 和 TypeScript 编写的 UI 组件库。
采取了哔哩哔哩的风格，将会按其颜色、logo 或者布局来展示样式
支持setup和options语法
注意：
- 这是为了熟悉 Vue 3.0 新特性而写的一个娱乐性组件库
- 所以不建议将此 UI 库用于生产环境。
源代码放在了 https://github.com/supercll/biliui
历史提交信息符合开发规范，可以按提交的顺序逐个查看
可以直接查看每个组件的源代码和示例，运行方法见 README.md。
# 安装
执行下列命令：
```
npm install bilibili-ui
```
或
```
yarn add bilibili-ui
```
# 开始使用
请先[安装](#/doc/install)本组件库。
然后在你的代码中写入下面的代码
```
import "bilibili-ui/dist/lib/bili.css";
import {Button, Tabs, Tab, Switch, Dialog, openDialog} from "bilibili-ui"
```
就可以使用我提供的组件了。
## Vue 单文件组件
代码示例：
```
按钮
import {Button, Tabs, Switch, Dialog} from "bilibili-ui"
export default {
components: {Button}
}
```
## 注意
copy 示例代码时，应该将
```
import { Button } from "../lib/index";
```
替换为
```
import { Button } from "bilibili-ui";
```
## options测试
```js
hi
内容1
内容2
import "bilibili-ui/dist/lib/bili.css";
import { Button, Switch, Tabs, Tab, Dialog, openDialog } from "bilibili-ui";
import { ref } from "vue";
export default {
name: "App",
data() {
return {
isOpen: false,
tabSelected: "tab1",
bool: false,
};
},
methods: {
open() {
openDialog({ title: "标题", content: "内容" });
},
},
components: {
Button,
Switch,
Tabs,
Tab,
Dialog,
},
};
```