https://github.com/electroluxcode/webzen-ui
兴趣使然的 原生webcomponent 组件库
https://github.com/electroluxcode/webzen-ui
Last synced: 9 months ago
JSON representation
兴趣使然的 原生webcomponent 组件库
- Host: GitHub
- URL: https://github.com/electroluxcode/webzen-ui
- Owner: electroluxcode
- Created: 2023-05-06T07:40:38.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-18T06:41:26.000Z (about 2 years ago)
- Last Synced: 2025-04-12T06:04:57.687Z (9 months ago)
- Language: JavaScript
- Homepage: https://electroluxcode.github.io/webzen-ui/
- Size: 3.2 MB
- Stars: 13
- Watchers: 5
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
由web-component构成的 前端框架
## Quick start
```shell
npm install webzen-ui
```
## Features
- table
- card
- button
- layout
## Developer
- step1：根目录的src/components 文件中。新建你的组件文件夹,用icon做一个示例
结构如下
-wz-icon
--index.ts
--index.less
--index.html
--assets
- step2：如果你的组件编写完 运行 sh build.sh 进行 编译 .这个脚本会对 ts和 less进行编译(暂时不做这一块)
```shell
# 由于web component 的 一系列 不可控因素。因此 我们每一个 组件都必须 经过以下个流程
# step3：最终传入 core/.ts 进行引用
注意区分按需引入(import xx.js )
全量引入 (全部引入)
# step???：你的测试用例应该包括
-- 1.判断shadow dom 存不存在
-- 2.判断属性是否能够设置成功，判断属性设置之后能不能渲染出指定的dom数
-- 3.判断是否能够在50ms 渲染不大的数据
-- 4.判断工具方法是否能够生效
```
## Docs
```shell
# 全局安装 docsify-cli 工具
npm i docsify-cli -g
# 初始化项目
docsify init ./docs
# docs 的 意思 就是在 docs 中 新开一个 端口
docsify serve docs
# _navbar.md 文件可以修改侧边栏
```
## Todo
```
caiIpt.addEventListener('change', function(e) {
console.log(e); // e.detail 为表单的值
})
```
## Knowledge
### 1. webcomponent | 深浅色模式
一般我们说的深色浅色模式，有以下几种方案
- 例如vitepress 他是在头部添加class为night的变量,然后通过优先级控制的方法进行控制
- 例如antd 他是在 body 添加一个属性是data-theme 的字段
- 利用浏览器自身的方案：例如是prefer-color-theme 或者
我这里沿用 vitepress的 方案，但是区别是在头部加会因为shadow dom 的原因，而不能进行穿透。
我采用的方案如下
- 利用 发布者/订阅者模式，在我的基类元素初始化的时候给基类的头部添加元素就可以了，并且引入 dark/light的 样式文件
遇到的问题是 webcomponent是 异步的 ，因此需要引入声明周期的概念,
