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

支持多类型参数

Browse Source
This commit is contained in:
觉 2024-05-16 06:46:41 +08:00
parent 8b12e63fbb
commit c12ca95c42
2 changed files with 40 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.js
View File

@ -1,7 +1,7 @@
import { div, span, pre } from './main.js'
document.body.appendChild(div.w(128).h(64).childs([
span.text('Hello world!'),
span.m('2rem').p({ top: '2rem' }).text('Hello world!'),
new span({ textContent: 'Hello world!' }),
]))

45
main.js
View File

@ -19,13 +19,29 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
element.html = (html) => { element.innerHTML = html; return element }
element.childs = (childs) => { childs.forEach(child => element.appendChild(child)); return element }
element.bg = (color) => { element.style.backgroundColor = color; return element }
element.p = (padding) => { element.style.padding = padding; return element }
element.m = (margin) => { element.style.margin = margin; return element }
//element.p = (padding) => { element.style.padding = padding; return element }
//element.m = (margin) => { element.style.margin = margin; return element }
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.borderRadius = (radius) => { element.style.borderRadius = radius; return element }
element.p = (padding) => applyStyle(element, 'padding', padding)
element.m = (margin) => applyStyle(element, 'margin', margin)
return element
}
function applyStyle(element, styleName, value) {
if (typeof value === 'string') {
element.style[styleName] = value;
} else if (typeof value === 'object') {
const { left = 0, right = 0, top = 0, bottom = 0 } = value;
element.style[`${styleName}Left`] = left;
element.style[`${styleName}Right`] = right;
element.style[`${styleName}Top`] = top;
element.style[`${styleName}Bottom`] = bottom;
}
return element;
}
/* HTML5 语义标签 */
export class BaseElement {
constructor(options) {
@ -49,11 +65,25 @@ export class BaseElement {
static bg(color) {
return createElement({ style: { backgroundColor: color } }, this.name)
}
static p(padding) {
return createElement({ style: { padding } }, this.name)
static p(...args) {
if (args.length === 1 && typeof args[0] === 'string') {
return createElement({ style: { padding: args[0] } }, this.name)
}
if (args.length === 1 && typeof args[0] === 'object') {
const { left = 0, right = 0, top = 0, bottom = 0 } = args[0]
const style = { paddingLeft: left, paddingRight: right, paddingTop: top, paddingBottom: bottom }
return createElement({ style }, this.name)
}
}
static m(margin) {
return createElement({ style: { margin } }, this.name)
static m(...args) {
if (args.length === 1 && typeof args[0] === 'string') {
return createElement({ style: { margin: args[0] } }, this.name)
}
if (args.length === 1 && typeof args[0] === 'object') {
const { left = 0, right = 0, top = 0, bottom = 0 } = args[0]
const style = { marginLeft: left, marginRight: right, marginTop: top, marginBottom: bottom }
return createElement({ style }, this.name)
}
}
static grid(options) {
return createElement({ style: { display: 'grid', ...options } }, this.name)
@ -61,6 +91,9 @@ export class BaseElement {
static flex(options) {
return createElement({ style: { display: 'flex', ...options } }, this.name)
}
static radius(radius) {
return createElement({ style: { borderRadius: radius } }, this.name)
}
}
export class div extends BaseElement {