# bilibili-ui

> 新增 - 进度条，卡片等组件 # 0.0.8版本 - 修复： - svg图标无法更改颜色的bug - 具体原因： - 处于生产环境时svg需要通过fill属性更改颜色

Latest version **0.2.1** (published 2022-05-22) · 0 weekly downloads

## Install

```sh
npm install bilibili-ui
pnpm add bilibili-ui
yarn add bilibili-ui
bun add bilibili-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2022-05-22 |
| First published | 2020-10-06 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 3.4 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| Author | lc |
| Maintainers | supercll |

## Links

- npm: https://www.npmjs.com/package/bilibili-ui
- npm.io page: https://npm.io/package/bilibili-ui

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^3.0.0
- [marked](https://npm.io/package/marked.md) ^1.1.1
- [prismjs](https://npm.io/package/prismjs.md) ^1.21.0
- [vue-router](https://npm.io/package/vue-router.md) 4.0.0-beta.3
- [github-markdown-css](https://npm.io/package/github-markdown-css.md) ^4.0.0

## Recent versions

- 0.2.1 (latest) — 2022-05-22
- 0.2.0 — 2021-04-15
- 0.1.0 — 2021-04-14
- 0.0.8 — 2020-10-07
- 0.0.7 — 2020-10-07
- 0.0.6 — 2020-10-07
- 0.0.5 — 2020-10-06
- 0.0.4 — 2020-10-06
- 0.0.3 — 2020-10-06
- 0.0.2 — 2020-10-06

## 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 或者布局来展示样式
不管是 vue3.0 还是 vue2.x 的新版本都能正常使用此组件库

注意：

-   这是为了熟悉 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 单文件组件

代码示例：

```
<template>
  <div>
    <Button>按钮</Button>
  </div>
</template>
<script>
import {Button, Tabs, Switch, Dialog} from "bilibili-ui"
export default {
  components: {Button}
}
</script>
```

## 注意

copy 示例代码时，应该将

```
import { Button } from "../lib/index";
```

替换为

```
import { Button } from "bilibili-ui";
```

## vue2.x测试

![vue2.x](https://github.com/supercll/biliui/tree/master/images/1601979658891.png)

```js
<template>
    <Button @click="open">hi</Button>
    <Switch type="tv" v-model:value="isOpen"></Switch>
    <Tabs v-model:selected="tabSelected">
        <Tab title="tab1">内容1</Tab>
        <Tab title="tab2">内容2</Tab>
    </Tabs>
    <hr />
</template>

<script>
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,
    },
};
</script>
```

---
_Source: https://npm.io/package/bilibili-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._