校对:soup
3 号端口 @cjlapao/ui-kit。相同的组件,同样的尾风
设计系统,同主题/功能层——框架不可知类型Script
(主题类地图、实用图、大多数类型) 与反应包共享 通过
从 ../common,所以两个包保持同步 通过建筑.
使用量
import { createApp } from "vue";
import { BottomSheetProvider, IconProvider, renderIcon } from "@cjlapao/ui-kit-vue";
import "@cjlapao/ui-kit-vue/styles.css";
<template>
<IconProvider :render-icon="renderIcon">
<BottomSheetProvider>
<Button variant="solid" color="brand" leading-icon="Add">New item</Button>
</BottomSheetProvider>
</IconProvider>
</template>
回放 – Vue API 映射
| 反应 | 阴道 |
|---|---|
className 道具 | class attr( 跌倒、 冲突意识合并) |
children | 默认槽 |
反应节点道具( R)title, (中文(简体) ), actions, (...) (中文(简体) ) | 字符串道具 或者说 同一名称的已命名槽 |
value + 键 onChange | v-model (单位:千美元)modelValue 编号 : update:modelValue(中文(简体) ) |
onClose 编号 : onToggle /... (中文(简体) ) | 发送 : @close, (中文(简体) ), @toggle,, , , , , , , , |
钩子(useTheme, (中文(简体) ), useStepper, (...) (中文(简体) ) | 相同名称的堆肥返回 Ref编号 |
IconProvider 编号 : BottomSheetProvider 语境 | 同名提供者组件(提供/输入) |
见 公约》d 完全转换规则.
发展
npm install
npm run lint # vue-tsc typecheck
npm run build # vite lib build + d.ts
npm run generate:icons # regenerate vue/src/icons from react/src/icons
图标生成-编辑 react/src/icons/components/*.tsx 重新运行
npm run generate:icons; 绝不编辑 vue/src/icons 手边.
演示
cd demo
npm install
npm run dev # http://localhost:5175
演示镜镜像 Resact 演示 (../demo页面并消耗工具包
通过Vite别名直接来源.