# RouterBootUI
**Repository Path**: giteeforsyf/RouterBootUI
## Basic Information
- **Project Name**: RouterBootUI
- **Description**: RouterBoot-UI 是 RouterBoot 的一个UI组件库,我在开发时始终认为多数常规组件Element-Plus|Vant|Bootstrap3已经十分突出,并且优势明显,成熟,所以RouterBoot-UI不去重复做一些挑战“权威”的事情,而是构建一些奇思妙想!
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-04-05
- **Last Updated**: 2024-11-30
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# README
- author：syf20020816@outlook.com
- docName：routerboot-ui README
- createDate：20230405
- updateDate：20230405
- version：1.0.3
- des-tag：正式版
- email：syf20020816@outlook.com
## 版本更新说明(update introduction)
| 版本(version) | 1.0.3 |
| --------------------- | ------------ |
| 版本说明(version tag) | 正式版 |
| 更新时间(update date) | 20230405 |
| 技术(technology) | Vue3+TS+SCSS+Vite |
可用版本(work version):
1. 0.0.3(准备废弃,will abandon)
2. 1.0.3
更新点(update points)：
1. 修正文档(1.0.3)
2. 修复导入，修复文件缺失(1.0.3)
3. 自定义主题色(1.0.3)
## 安装(install)
### npm 安装（npm install）
```bash
npm i routerboot-ui
```
## 使用(use)
在`main.ts`下导入（import in `main.ts`）
```typescript
import { createApp } from "vue";
import App from "./App.vue";
//import routerboot-ui
import RouterBootUI from "routerboot-ui";
//import routerboot-ui style file
import "routerboot-ui/packages/theme-chalk/index.scss";
//create app--------------------
const app = createApp(App);
//app use--------------------
app.use(RouterBootUI);
app.mount("#app");
```
## QuickStart
``` html
test
```
## 证书(license)
MIT
# 主题切换（change theme）
我们当前支持`'primary,success,info,warning,error,dark'`这6种系统内置主题，所有组件默认采用`primary`黑暗主题色，但使用者也可以直接使用type属性直接进行指定
## 指定主题色
如下，我们在按钮组件中使用type属性指定主题为`dark`主题
```html
test
```
## 动态主题色
由于内置6种主题色，我们可以使用一个变量绑定主题，通过修改变量方式进行切换主题色，实现动态主题
### vue
```html
点一下试试
```
### pinia
```typescript
import { defineStore } from "pinia";
export const indexStore = defineStore("index", {
state: () => {
return {
current: 0,
theme: ["primary", "info", "success", "warning", "error", "dark"],
};
},
actions: {
changeTheme() {
console.log(this.current);
if (this.current == 5) {
this.current = 0;
} else {
this.current++;
}
},
},
});
```
## 自定义主题色
编写一个global.scss,然后导入main.ts
> 注意：当前自定义主题色仍存在一定问题
```scss
/* 只需要重写你需要的即可 */
@forward 'routerboot-ui/packages/theme-chalk/src/common/var.scss' with (
$colors: (
'white': #ffffff,
'black': #000000,
'primary': #2a6f94,
'success': #97cd47,
'warning': #f8805d,
'error': #ec5e65,
'info': #788a93,
'dark':#21282c,
),
);
@use "routerboot-ui/packages/theme-chalk/index.scss" as *;
```