routerboot-ui v1.0.6

README

routerboot-ui: 1.0.6routerboot-uirouterboot-ui1.0.61.0.6

• author：syf20020816@outlook.com
• docName：routerboot-ui README
• createDate：20230405
• updateDate：20230405
• version：1.0.6
• des-tag：正式版
• email：syf20020816@outlook.com

版本更新说明(update introduction)

可用版本(work version): 1. 0.0.3(准备废弃,will abandon) 2. 1.0.5 3. 1.0.6

更新点(update points)： 1. 修正文档(1.0.3) 2. 修复导入，修复文件缺失(1.0.3) 3. 自定义主题色(1.0.3) 4. 修复Nav组件iconOnly类型长度缺失(1.0.5) 5. 修复flexbox组件padding长度异常（1.0.6） 6. 修复weather组件占比宽度异常（1.0.6）

安装(install)

npm 安装（npm install）

npm i routerboot-ui

使用(use)

在main.ts下导入（import in main.ts）

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

<template>
  <div id="index">
    <RBIcon icon="rb-icon-hezuo"></RBIcon>
    <RBIcon icon="rb-icon-exchange"></RBIcon>
    <RBButton>test</RBButton>
    
  </div>
</template>

证书(license)

MIT

主题切换（change theme）

我们当前支持'primary,success,info,warning,error,dark'这6种系统内置主题，所有组件默认采用primary黑暗主题色，但使用者也可以直接使用type属性直接进行指定

指定主题色

如下，我们在按钮组件中使用type属性指定主题为dark主题

<RBButton type="dark">test</RBButton>

动态主题色

由于内置6种主题色，我们可以使用一个变量绑定主题，通过修改变量方式进行切换主题色，实现动态主题

vue

<RBButton :type="theme" @click="store.changeTheme()">点一下试试</RBButton>
<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { indexStore } from './store/indexPinia'

const store = indexStore()
let theme = computed(() => {
  return store.theme[store.current]
})

</script>

pinia

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

注意：当前自定义主题色仍存在一定问题

/* 只需要重写你需要的即可 */

@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 *;