LaniakeaSupercluster/widgets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

模态窗

Browse Source
This commit is contained in:
satori 2024-09-06 01:08:14 +08:00
parent a229600fc4
commit 4b82c1afde
3 changed files with 129 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
index.js
View File

@ -1,6 +1,9 @@
import { div, span, pre, h1, p, ul, li, button, createElement } from './main.js'
import { div, span, pre, h1, h2, p, ul, li, button, createElement } from './main.js'
import { Dialog } from './widgets/dialog.js'
document.body.style.fontFamily = 'Arial, sans-serif'
document.body.style.fontSize = '14px'
document.body.appendChild(div.absolute.t_2.r_2.bg_red_500.childs([
div.text('会话/账户')
]))
@ -8,8 +11,8 @@ document.body.appendChild(div.absolute.t_2.r_2.bg_red_500.childs([
// 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!'),
p.m('2rem').p({ top: '2rem' }).text('是什么, 为什么, 怎么做?'),
ul.m('2rem').p({ top: '2rem' }).childs([
p.m('1rem').p({ top: '1rem' }).text('是什么, 为什么, 怎么做?'),
ul.m('1rem').p({ top: '1rem' }).childs([
li.text('让事情变简单直观, 仅使用js代码, 而不必在 js/html/css 文件之间来回翻找'),
li.text('大幅提高代码信息密度, 灵感来自 pug/winicss/flutter, 减少布局与样式冗余'),
li.text('为dom对象添加链式操作方法, 使其返回值都是dom自身')
@ -18,14 +21,20 @@ document.body.appendChild(div.cursor_pointer.bg_red_500.overflow_clip.w_1000.chi
textContent: '模态窗口 dialog',
onclick: event => {
document.body.appendChild(Dialog({
style: { width: '32rem', padding: '24px' },
children: [
new span({ textContent: 'Hello world!' }),
new span({ textContent: 'Hello world!' }),
div.childs([
h2.m_0.font_semibold.text('Are you absolutely sure?'),
p.mt_8.color('#71717a').text('This action cannot be undone. This will permanently delete your account and remove your data from our servers.')
]),
div.flex.justify_end.gap_8.childs([
button.text('Cancel'),
button.text('Delete'),
]),
]
}))
}
}),
new span({ textContent: 'Hello world!' }),
// 三类参数
p.text(`

136
main.js
View File

@ -71,7 +71,8 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
'l': ['left'],
'r': ['right'],
'x': ['left', 'right'],
'y': ['top', 'bottom']
'y': ['top', 'bottom'],
'gap': ['gap'],
}
if (styleMap.hasOwnProperty(key)) {
@ -93,10 +94,86 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
return
}
if (key === 'justify') {
if (value === 'center') {
element.style.justifyContent = 'center'
return
}
if (value === 'end') {
element.style.justifyContent = 'flex-end'
return
}
return
}
if (key === 'font') {
if (value === 'bold') {
element.style.fontWeight = value
return
}
if (value === 'semibold') {
element.style.fontWeight = 600
return
}
element.style.font = value
return
}
if (key === 'text') {
// 字体常用尺寸
if (value === 'xs') {
element.style.fontSize = '0.75rem'
element.style.lineHeight = '1rem'
return
}
if (value === 'sm') {
element.style.fontSize = '0.875rem'
element.style.lineHeight = '1.25rem'
return
}
if (value === 'base') {
element.style.fontSize = '1rem'
element.style.lineHeight = '1.5rem'
return
}
if (value === 'lg') {
element.style.fontSize = '1.125rem'
element.style.lineHeight = '1.75rem'
return
}
if (value === 'xl') {
element.style.fontSize = '1.25rem'
element.style.lineHeight = '1.75rem'
return
}
if (value === '2xl') {
element.style.fontSize = '1.5rem'
element.style.lineHeight = '2rem'
return
}
if (value === '3xl') {
element.style.fontSize = '1.875rem'
element.style.lineHeight = '2.25rem'
return
}
if (value === '4xl') {
element.style.fontSize = '2.25rem'
element.style.lineHeight = '2.5rem'
return
}
// 字体对齐方式
if (value === 'center') {
element.style.textAlign = value
return
}
element.textContent = value
return
}
}
// 三个参数的情况下, 第一个参数是样式名, 第二个参数是样式, 第三个参数是数值
@ -122,13 +199,25 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
element.grid = (options) => { element.style.display = 'grid'; Object.assign(element.style, options); return element }
element.flex = (options) => { element.style.display = 'flex'; Object.assign(element.style, options); return element }
element.radius = (radius) => { element.style.borderRadius = radius; return element }
element.p = (padding) => applyStyle(element, 'padding', padding)
element.m = (margin) => applyStyle(element, 'margin', margin)
element.mx = (value) => { element.style.marginLeft = value; element.style.marginRight = value; return element }
element.my = (value) => { element.style.marginTop = value; element.style.marginBottom = value; return element }
element.mt = (value) => { element.style.marginTop = value; return element }
element.ml = (value) => { element.style.marginLeft = value; return element }
element.mr = (value) => { element.style.marginRight = value; return element }
element.mb = (value) => { element.style.marginBottom = value; return element }
element.p = (padding) => applyStyle(element, 'padding', padding)
element.px = (value) => { element.style.paddingLeft = value; element.style.paddingRight = value; return element }
element.py = (value) => { element.style.paddingTop = value; element.style.paddingBottom = value; return element }
element.pt = (value) => { element.style.paddingTop = value; return element }
element.pl = (value) => { element.style.paddingLeft = value; return element }
element.pr = (value) => { element.style.paddingRight = value; return element }
element.pb = (value) => { element.style.paddingBottom = value; return element }
element.font = (font) => { element.style.font = font; return element }
element.color = (color) => { element.style.color = color; return element }
return element
}
@ -153,8 +242,8 @@ export class BaseElement {
static text(text, tagName, names) {
return createElement({ textContent: text }, tagName, names)
}
static html(html) {
return createElement({ innerHTML: html }, this.name)
static html(html, tagName, names) {
return createElement({ innerHTML: html }, tagName, names)
}
static childs(childs, tagName, names) {
return createElement({ children: childs }, tagName, names)
@ -163,12 +252,12 @@ export class BaseElement {
if (typeof width === 'number') width = width + 'px'
return createElement({ style: { width } }, tagName, names)
}
static h(height) {
static h(height, tagName, names) {
if (typeof height === 'number') height = height + 'px'
return createElement({ style: { height } }, this.name)
return createElement({ style: { height } }, tagName, names)
}
static bg(color) {
return createElement({ style: { backgroundColor: color } }, this.name)
static bg(color, tagName, names) {
return createElement({ style: { backgroundColor: color } }, tagName, names)
}
static p(args, tagName, names) {
if (typeof args === 'string') {
@ -200,33 +289,30 @@ export class BaseElement {
return createElement({ style }, tagName, names)
}
}
static mx(value) {
static mx(value, tagName, names) {
if (typeof value === 'number') value = value + 'px'
return createElement({ style: { marginLeft: value, marginRight: value } }, this.name)
return createElement({ style: { marginLeft: value, marginRight: value } }, tagName, names)
}
static my(value) {
static my(value, tagName, names) {
if (typeof value === 'number') value = value + 'px'
return createElement({ style: { marginTop: value, marginBottom: value } }, this.name)
return createElement({ style: { marginTop: value, marginBottom: value } }, tagName, names)
}
static px(value) {
static px(value, tagName, names) {
if (typeof value === 'number') value = value + 'px'
return createElement({ style: { paddingLeft: value, paddingRight: value } }, this.name)
return createElement({ style: { paddingLeft: value, paddingRight: value } }, tagName, names)
}
static py(value) {
static py(value, tagName, names) {
if (typeof value === 'number') value = value + 'px'
return createElement({ style: { paddingTop: value, paddingBottom: value } }, this.name)
return createElement({ style: { paddingTop: value, paddingBottom: value } }, tagName, names)
}
static grid(options) {
return createElement({ style: { display: 'grid', ...options } }, this.name)
static radius(radius, tagName, names) {
return createElement({ style: { borderRadius: radius } }, tagName, names)
}
static flex(options) {
return createElement({ style: { display: 'flex', ...options } }, this.name)
static font(font, tagName, names) {
return createElement({ style: { font } }, tagName, names)
}
static radius(radius) {
return createElement({ style: { borderRadius: radius } }, this.name)
}
static font(font) {
return createElement({ style: { font } }, this.name)
static color(color, tagName, names) {
return createElement({ style: { color } }, tagName, names)
}
}

7
widgets/dialog.js
View File

@ -11,8 +11,8 @@ export function Dialog(options) {
width: '100%',
height: '100%',
backdropFilter: 'blur(5px)',
duration: '0.5s',
transition: 'all 0.5s'
duration: '0.2s',
transition: 'all 0.2s'
},
onclick: async event => {
if (event.target !== event.currentTarget) return
@ -33,10 +33,9 @@ export function Dialog(options) {
left: '50%',
transform: 'translate(-50%, -50%)',
backgroundColor: '#fff',
borderRadius: '150px',
borderRadius: '0.5rem',
boxShadow: '0 0 1em #ccc',
overflow: 'hidden',
display: 'flex',
justifyContent: 'center',
...options.style,
}