kaza-ui v0.1.2

:gear: Vue3 kaza-UI

哈哈哈哈:shit:

GITHUB https://github.com/kazawan/kaza-vue-ui

:tada:安装 install

npm i kaza-ui

:unlock:使用

引入

import kazaUI from 'kaza-ui'
import 'kaza-ui/lib/style.css'
app.use(kazaUI)

使用

<kazaCharts options="{}" />
<kazaProgressBar  ...args />

:floppy_disk: Doc文档

• kazaCharts

• :chart_with_upwards_trend: kazaCharts使用 README 使用

<template>
    <div class="container">
        <kazaCharts :options="chartOptions" />
    </div>
</template>

<script setup>
import { reactive } from 'vue' //推荐使用reactive
const chartOptions = reactive({
  id:'kazaChart', //id 必须填写 否则图标不生效并在图表中显示'Error no id input'
  color:'#3A98B9', //线的颜色 
  fontColor:'#fff', //字体的颜色
  width: 200, //图标宽度 高度按比例自动设置
  min_ranger: 0, //自定义最小值
  max_ranger: 100, //自定义最大值
  auto_normalize: true, //按value的最小值最大值自动设置范围 此时min_ranger max_ranger 无效
  value: [-1.5,5.55,3.33] // 数值 如果没有数据请填 []
})


</script>

:floppy_disk:Api

<template>

    <kazaCharts options="{}" />
</template>

kazaProgressBar

• :bar_chart:kazaProgressBar README。

:floppy_disk:Api

使用

<bar width="200px" height="200px" :count='getCount' barColor="#02C874" boardColor="000" title="usage" titleFont_size="20px"
      titleTop="32%" />

kazaLayout

• :bar_chart:kazaLayout README。

:floppy_disk:Api

使用

<krow>
      <kcol span="24">
        <div >...</div>
      </kcol>
</krow>

kRow api

kCol api

<kcol span="6"  xs="12"  md="6" animation animation-delay=".1">

kRow api

响应式

kazaSuperbody

• :bar_chart:kazaSuperbody README。

:floppy_disk:Api

• 带字体响应式（手机端）解决老人看不到的问题。。。哈哈哈哈
• 实时显示平台 show-device 根据不同平台顶部topbar颜色有区别
• 实时显示浏览器尺寸 show-size

<superbody show-device show-size iphone-size="32px" win-size="24px">
    <krow>
      <kcol span="24">
        <div >...</div>
      </kcol>
    </krow>
</superbody>

Calender

• :bar_chart:kaza-cals README。

:floppy_disk:Api

使用

<kcals ref="calsbox" v-on:click-item="showmethedata" :data="todolists"></kcals>

<script setup>
const yymmdd = ref(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`)
// 定义一个函数，用于显示数据
const showmethedata = (data) => {
  yymmdd.value = data
}

:floppy_disk:Api

<template>

    <kazaCharts options="{}" />
</template>

数据结构

const todolist = {
    '2023-3-26': {
    todo: [
      {
        id: 1,
        content: '调音',
        timestart :'19:00',
        workzone:'希尔顿酒店',
        tags:'调音',
        payment:'1000元',
        color:'#EAB543'
      },
      {
        id: 2,
        content: 'shop333ping',
        timestart:'22:00',
        workzone:'利和超市',
        tags:'私人',
        color:'#FC427B'
      },]
    }
}