widgets

像 flutter 风格用纯粹 js 构建页面 { createElement List ListItem Span Button Img Input TextArea Avatar Dialog }

(本质上只是给创建 html 的js方法套了一层使其能够链式调用)

npm i @laniakeasupercluster/widgets

import { createElement, Button, Span } from '@laniakeasupercluster/widgets'

document.body.appendChild(createElement({
    style: { width: 320, height: 320, padding: 64 },
    children: [
        Span({ textContent: 'hello world!' })
        Button({
            textContent: 'click',
            onclick: event => {
                const randomNumber = Math.floor(Math.random() * 100)
                event.traget.textContent = 'click' + randomNumber
            }
        })
    ]
}))

dev

git clone git@git.satori.love:LaniakeaSupercluster/widgets.git
npm i
npm run dev

HTML 基本概念

对于UI书写划分为两类, 一是外观样式, 一是结构关系 一个元素的基本构成就是其外观样式, 因此它书写在声明它的同一列

div.w(128).h(64)

嵌套关系则应该换行并缩进, 保持与 HTML 一致的风格

document.body.appendChild(div.w(128).h(64).children([
    div.text('Hello world!'),
    div.text('Hello world!'),
    div.text('Hello world!')
]))

有时期望复用样式

const option = { style: { width: '128px', height: '64px' } }
div(option).children([
    div.text('Hello world!'),
    div.text('Hello world!'),
    div.text('Hello world!')
])