受到 pug 和 tailwind, windicss 启发的, 使用纯粹 js 书写 UI

Go to file

觉 bec48b61ab demo		2024-04-23 17:50:58 +08:00
.gitignore	init	2024-01-12 02:05:28 +08:00
LICENSE	发布配置	2024-01-12 04:39:14 +08:00
README.md	demo	2024-04-23 17:50:58 +08:00
index.html	基础理论实现	2024-01-12 04:17:51 +08:00
index.js	demo	2024-04-23 17:50:58 +08:00
main.js	demo	2024-04-23 17:50:58 +08:00
package.json	demo	2024-04-23 17:50:58 +08:00

README.md

chain-depict

受到 pug 和 tailwind, windicss 启发的, 使用纯粹 js 书写 UI

创建一个 dom 对象, 每次操作都返回它自身从而能够链式操作
提高文字的屏幕占比, 更少的屏幕空间表达更多的描述
减少文字输入, 省略不必要的属性描述冗余
响应式元素绑定, 数据变化则ui跟随变化

install

npm i @laniakeasupercluster/chain-depict

import { div } form '@laniakeasupercluster/chain-depict'

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'),
])

dev

git clone git@git.satori.love:LaniakeaSupercluster/chain-depict.git
npm i
npm run dev

# 发布到 npm
npm publish

doc

import { div } form '@laniakeasupercluster/chain-depict'

// 宽高(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))