/
werstak54
/
haval
Обзор
Документация
Войти
/
werstak54
/
haval
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/components/Button.js
58 строк
2 KB
pawel83gt
first
19 май 2026, 15:39
19 май 2026, 15:39
d522f33
Код
Авторство
О чём код?
export class Button { constructor(options) { this.text = options.text || 'Кнопка'; this.padding = options.padding; this.fontSize = options.fontSize; this.color = options.color; this.background = options.background; this.borderColor = options.borderColor; this.borderWidth = options.borderWidth; // ширина рамки this.borderStyle = options.borderStyle; this.customClass = options.class || ''; this.onClick = options.onClick || null; } render() { // Создаём кнопку const button = document.createElement('button'); button.type = 'button'; button.className = `${this.customClass}`.trim(); // Применяем кастомные паддинги (если заданы) if (this.padding) { button.style.padding = this.padding; } if (this.fontSize) { button.style.fontSize = this.fontSize; } if (this.background) { button.style.background = this.background; } if (this.color) { button.style.color = this.color; } if (this.borderColor) { button.style.borderColor = this.borderColor; } button.style.border = `${this.borderWidth} ${this.borderStyle} ${this.borderColor}`; button.style.outline = 'none'; button.style.boxSizing = 'border-box'; // SVG внутрь кнопки button.innerHTML = ` <svg class="border-svg" width="100%" height="100%" viewBox="0 0 100 36" preserveAspectRatio="none"> <rect x="0" y="0" width="100" height="36" fill="none" stroke="#fff" stroke-width="2" stroke-dasharray="272" stroke-dashoffset="272"/> </svg> ${this.text} `; //обработчик клика if (this.onClick) { button.addEventListener('click', this.onClick); } return button; } }