chain-depict/README.md

chain-depict

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

0. 创建一个 dom 对象, 每次操作都返回它自身从而能够链式操作
1. 提高文字的屏幕占比, 更少的屏幕空间表达更多的描述
2. 减少文字输入, 省略不必要的属性描述冗余
3. 响应式元素绑定, 数据变化则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))