2024-01-12 01:16:29 +08:00
|
|
|
# chain-depict
|
|
|
|
|
|
2024-04-23 17:50:58 +08:00
|
|
|
受到 pug 和 tailwind, windicss 启发的,
|
2024-01-12 01:19:41 +08:00
|
|
|
使用纯粹 js 书写 UI
|
|
|
|
|
|
2024-04-23 17:50:58 +08:00
|
|
|
0. 创建一个 dom 对象, 每次操作都返回它自身从而能够链式操作
|
2024-01-12 02:09:06 +08:00
|
|
|
1. 提高文字的屏幕占比, 更少的屏幕空间表达更多的描述
|
|
|
|
|
2. 减少文字输入, 省略不必要的属性描述冗余
|
|
|
|
|
3. 响应式元素绑定, 数据变化则ui跟随变化
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### install
|
|
|
|
|
|
|
|
|
|
```bash
|
2024-01-12 05:45:56 +08:00
|
|
|
npm i @laniakeasupercluster/chain-depict
|
2024-01-12 02:09:06 +08:00
|
|
|
```
|
|
|
|
|
|
2024-01-12 01:19:41 +08:00
|
|
|
```javascript
|
2024-01-12 05:45:56 +08:00
|
|
|
import { div } form '@laniakeasupercluster/chain-depict'
|
2024-01-12 01:19:41 +08:00
|
|
|
|
|
|
|
|
div.w(12).h(14).onclick.stop(click).onkeydown.esc(keydown)([
|
|
|
|
|
div.w('auto').h(32).classList(['mdui-btn', 'mdui-btn-icon']),
|
|
|
|
|
div.w('auto').h(32).classList('mdui-btn mdui-btn-icon'),
|
|
|
|
|
])
|
|
|
|
|
```
|
2024-01-12 01:27:32 +08:00
|
|
|
|
2024-01-12 02:09:06 +08:00
|
|
|
### dev
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
git clone git@git.satori.love:LaniakeaSupercluster/chain-depict.git
|
|
|
|
|
npm i
|
|
|
|
|
npm run dev
|
2024-04-23 17:50:58 +08:00
|
|
|
|
|
|
|
|
# 发布到 npm
|
|
|
|
|
npm publish
|
2024-01-12 02:09:06 +08:00
|
|
|
```
|
2024-04-11 03:12:50 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
### doc
|
|
|
|
|
|
|
|
|
|
```javascript
|
2024-04-23 17:50:58 +08:00
|
|
|
import { div } form '@laniakeasupercluster/chain-depict'
|
|
|
|
|
|
2024-04-11 03:12:50 +08:00
|
|
|
// 宽高(width height)
|
|
|
|
|
div.w(32).h(32) // 使用数字
|
|
|
|
|
div.w('32px').h('32em') // 使用文本
|
|
|
|
|
|
|
|
|
|
// 边距(margin padding)
|
|
|
|
|
div.m(32).p(32) // 使用数字
|
|
|
|
|
div.m('32px').p('32px') // 使用文本
|
|
|
|
|
div.m({ top:32, left:12 }) // 使用对象
|
|
|
|
|
div.m([ 32, 12 ]) // 使用数组
|
|
|
|
|
|
|
|
|
|
// 绝对定位(absolute)
|
|
|
|
|
div.absolute({ top: 12, left:'2rem' }) // 使用对象
|
|
|
|
|
div.absolute([ 12, '12px', '2rem', '4em' ]) // 使用数组
|
|
|
|
|
|
|
|
|
|
// 过渡动画(如果声明了且没有指定具体属性, 那么默认所有类型都动画过渡)
|
|
|
|
|
div.transition()
|
|
|
|
|
|
|
|
|
|
// hover
|
|
|
|
|
div.hover(event => event.element.w(12).h(24))
|
|
|
|
|
|
|
|
|
|
// click
|
|
|
|
|
div.click(event => event.element.w(12).h(24))
|
|
|
|
|
|
|
|
|
|
```
|
