doc

README.md

@@ -30,3 +30,32 @@ git clone git@git.satori.love:LaniakeaSupercluster/chain-depict.git
 npm i
 npm run dev
 ```
+
+
+### doc
+
+```javascript
+// 宽高(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))
+
+```

index.js

@@ -1,11 +1,12 @@
 import { div, pre } from './main.js'
 
-const demo = div.w(128).h(64) //.onclick.stop('click')
-demo.textContent = 'Hello world'
+const main = div.w(64).h(64).text('main').absolute({ top: 32, left: 32 })
+document.body.appendChild(main)
 
-console.log('demo', demo)
-document.body.appendChild(demo)
-document.body.appendChild(div.w(128).h(64).text('Hello world'))
+
+document.body.appendChild(div.w(128).h(64).text('Hello world').click(event => {
+    console.log('click !')
+}))
 
 fetch('./index.js').then(res => res.text()).then(text => {
     document.body.appendChild(pre.text(text))

main.js

@@ -5,6 +5,8 @@ export class pre extends HTMLPreElement {
     static text(text) {
         const pre = new this()
         pre.textContent = text
+        pre.style.backgroundColor = '#eee'
+        pre.style.padding = '1rem'
         return pre
     }
     w(width) {
@@ -30,6 +32,9 @@ export class div extends HTMLDivElement {
     static h(height) {
         return new this({ height })
     }
+    static absolute(absolute) {
+        return new this({ absolute })
+    }
 
     w(width) {
         this.style.width = `${width}px`
@@ -39,20 +44,31 @@ export class div extends HTMLDivElement {
         this.style.height = `${height}px`
         return this
     }
+    absolute({ top, left, right, bottom }) {
+        this.style.position = 'absolute'
+        if (top) this.style.top = top + 'px'
+        if (left) this.style.left = left + 'px'
+        if (right) this.style.right = right + 'px'
+        if (bottom) this.style.bottom = bottom + 'px'
+        return this
+    }
     text(text) {
         this.textContent = text
         return this
     }
-
-    static get onclick() {
-        console.log('onclick event')
-        return {
-            stop: function (event) {
-                console.log(`Stop event: ${event}`)
-                return div
-            }
-        }
+    click(callback) {
+        this.onclick = callback
+        return this
     }
+    //static get onclick() {
+    //    console.log('onclick event')
+    //    return {
+    //        stop: function (event) {
+    //            console.log(`Stop event: ${event}`)
+    //            return div
+    //        }
+    //    }
+    //}
 
     static get onkeydown() {
         console.log('onkeydown event')