49 lines
2.6 KiB
JavaScript
49 lines
2.6 KiB
JavaScript
import { div, span, pre, h1, p, ul, li, button, createElement } from './main.js'
|
|
import { Dialog } from './widgets/dialog.js'
|
|
|
|
document.body.appendChild(div.absolute.t_2.r_2.bg_red_500.childs([
|
|
div.text('会话/账户')
|
|
]))
|
|
|
|
// cursor-pointer overflow-clip hover:text-pink-500
|
|
document.body.appendChild(div.cursor_pointer.bg_red_500.overflow_clip.w_1000.childs([
|
|
h1.m_2rem.pt_2rem.text('Widgets!'),
|
|
h1.m('2rem').p({ top: '2rem' }).text('Widgets!'),
|
|
p.m('2rem').p({ top: '2rem' }).text('是什么, 为什么, 怎么做?'),
|
|
ul.m('2rem').p({ top: '2rem' }).childs([
|
|
li.text('也许你需要让事情变简单直观, 只使用纯粹的js代码, 整个项目只有js文件, 而不必在 js 和 html 和 css 文件之间跳来跳去'),
|
|
li.text('汲取了 pug 和 winicss 的灵感, 以及 flutter 的嵌套布局方式, pug 减少 html 冗余, winicss 减少 css 冗余'),
|
|
li.text('这个库的唯一作用就是给dom对象添加了额外的操作方法, 且每个方法的返回值都是dom自身, 从而实现对dom对象的链式操作')
|
|
]),
|
|
new button({
|
|
textContent: '模态窗口 dialog',
|
|
onclick: event => {
|
|
document.body.appendChild(Dialog({
|
|
children: [
|
|
new span({ textContent: 'Hello world!' }),
|
|
new span({ textContent: 'Hello world!' }),
|
|
]
|
|
}))
|
|
}
|
|
}),
|
|
new span({ textContent: 'Hello world!' }),
|
|
|
|
// 三类参数
|
|
p.text(`
|
|
span 是一个类(class), 直接实例化 (new span()) 将创建一个 span 元素(DOM对象). 实例化时可以传递参数, 它对应DOM对象的属性.
|
|
span.m('2rem').p({ top: '2rem' }).text('Hello world!') 是一个链式操作, 每个链式操作都是DOM对象的方法缩写. 不同的是它返回的是DOM对象自身.
|
|
span.cursor_pointer.color_ppp.w(128).h(64).childs([span.text('Hello world!')]) 是预定义的链式操作, 在执行函数方法前的静态属性调用并没有实例化对象, 只是缓存了属性值. 当对象被实例化时, 静态属性会被应用到实例对象上. 而静态属性的语法对应 tailwindcss 的类名.
|
|
`)
|
|
]))
|
|
|
|
// 使用 js 文件作为组件管理代码
|
|
document.body.appendChild(div.cursor_pointer.color_ppp.w(128).h(64).childs([
|
|
span.m('2rem').p({ top: '2rem' }).text('Hello world!'),
|
|
new span({ textContent: 'Hello world!' }),
|
|
]))
|
|
|
|
fetch('/index.js').then(res => res.text()).then(text => {
|
|
text = text.replace(/from "\/main.js"/g, "from '@laniakeasupercluster/widgets'")
|
|
document.body.appendChild(pre.overflow_auto.p('2rem').bg('#ececec').text(text.substring(0, text.indexOf('fetch'))))
|
|
})
|