78 lines
2.1 KiB
Markdown
78 lines
2.1 KiB
Markdown
# widgets
|
|
|
|
像 flutter 风格用纯粹 js 构建页面
|
|
{ createElement List ListItem Span Button Img Input TextArea Avatar Dialog }
|
|
|
|
(本质上只是给创建 html 的js方法套了一层使其能够链式调用)
|
|
|
|
```bash
|
|
npm i @laniakeasupercluster/widgets
|
|
```
|
|
|
|
```javascript
|
|
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书写划分为两类, 一是外观样式, 一是结构关系
|
|
一个元素的基本构成就是其外观样式, 因此它书写在声明它的同一列
|
|
```javascript
|
|
div.w(128).h(64)
|
|
```
|
|
|
|
嵌套关系则应该换行并缩进, 保持与 HTML 一致的风格
|
|
```javascript
|
|
document.body.appendChild(div.w(128).h(64).children([
|
|
div.text('Hello world!'),
|
|
div.text('Hello world!'),
|
|
div.text('Hello world!')
|
|
]))
|
|
```
|
|
|
|
有时期望复用样式
|
|
```javascript
|
|
const option = { style: { width: '128px', height: '64px' } }
|
|
div(option).children([
|
|
div.text('Hello world!'),
|
|
div.text('Hello world!'),
|
|
div.text('Hello world!')
|
|
])
|
|
```
|
|
|
|
由于返回值是真实的 DOM 对象, 它具有原生 DOM 对象的所有方法, 因而可以这样使用它
|
|
```javascript
|
|
const demo = div.w(128).h(64).children([
|
|
div.text('Hello world!'),
|
|
div.text('Hello world!'),
|
|
div.text('Hello world!')
|
|
])
|
|
demo.textContent = 'hello world!'
|
|
document.body.appendChild(demo)
|
|
```
|
|
|
|
然而 dom 元素的 textContent 并不是一个函数方法而是一个变量值, 自然无法使用链式调用 `demo.textContent('hello world!')`
|
|
为了减少代码量也为了避免破坏dom基本结构, 所有额外提供的方法都使用缩写,
|
|
像是这样 `demo.text('hello world!')`
|