快捷方法 mx

This commit is contained in:
2024-05-16 19:24:21 +08:00
parent c12ca95c42
commit b6df98b35d
2 changed files with 33 additions and 3 deletions

34
main.js
View File

@ -19,13 +19,15 @@ 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.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)
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.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 }
return element
}
@ -57,9 +59,11 @@ export class BaseElement {
return createElement({ children: childs }, this.name)
}
static w(width) {
if (typeof width === 'number') width = width + 'px'
return createElement({ style: { width } }, this.name)
}
static h(height) {
if (typeof height === 'number') height = height + 'px'
return createElement({ style: { height } }, this.name)
}
static bg(color) {
@ -74,6 +78,11 @@ export class BaseElement {
const style = { paddingLeft: left, paddingRight: right, paddingTop: top, paddingBottom: bottom }
return createElement({ style }, this.name)
}
if (args.length === 4) {
const [top, right, bottom, left] = args
const style = { paddingTop: top, paddingRight: right, paddingBottom: bottom, paddingLeft: left }
return createElement({ style }, this.name)
}
}
static m(...args) {
if (args.length === 1 && typeof args[0] === 'string') {
@ -84,6 +93,27 @@ export class BaseElement {
const style = { marginLeft: left, marginRight: right, marginTop: top, marginBottom: bottom }
return createElement({ style }, this.name)
}
if (args.length === 4) {
const [top, right, bottom, left] = args
const style = { marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left }
return createElement({ style }, this.name)
}
}
static mx(value) {
if (typeof value === 'number') value = value + 'px'
return createElement({ style: { marginLeft: value, marginRight: value } }, this.name)
}
static my(value) {
if (typeof value === 'number') value = value + 'px'
return createElement({ style: { marginTop: value, marginBottom: value } }, this.name)
}
static px(value) {
if (typeof value === 'number') value = value + 'px'
return createElement({ style: { paddingLeft: value, paddingRight: value } }, this.name)
}
static py(value) {
if (typeof value === 'number') value = value + 'px'
return createElement({ style: { paddingTop: value, paddingBottom: value } }, this.name)
}
static grid(options) {
return createElement({ style: { display: 'grid', ...options } }, this.name)

View File

@ -1,7 +1,7 @@
{
"name": "@laniakeasupercluster/widgets",
"description": "A simple widgets tracker",
"version": "1.1.2",
"version": "1.1.3",
"type": "module",
"main": "main.js",
"author": "Laniakea Supercluster <huan0016@gmail.com>",