Vegtex
Фреймворк для фронт-энд разработки сайтов с WebComponents.
Что такое Vegtex?
Vegtex - это крутой фреймворк для фронт-энда сайтов. Этот фреймворк добавляет кучу встроенных тегов (компонентов), а также функционал для определения собственных тегов с помощью технологии WebComponents. Vegtex из коробки имеет следующий функционал:
- Определение собственных тегов
- Компоненты для Лендинга
- Компоненты для SPA (Single Page Application)
- Компоненты для Мобильных приложений
- Темы (выбор базы и акцента)
Установка
Установка фреймворка предельна проста, то есть
через npm
. Использовать Vegtex можно
вместе с любыми упоковщиками кода,
например - Webpack или Parcel.
Для установки фреймворка в ваш проект пропишите:
npm i vegtex -D
Использование
Для инициализации просто используйте функцию
vegtex.use(theme, themeAccent)
.
dark
и light
Доступные акценты:
azure
,amethyst
,toxicyellow
import { vegtex } from 'vegtex'
// Инициализируем vegtex
vegtex.use('dark', 'azure')
Создание компонента
Одна из главных фич фреймфорка - это определение собственных реактивных HTML тегов. Определить свой компонент - несложно, просто создайте инстанс VegtexComponent, укажите название тега в первом аргумента. Пример код:
import { vegtex, VegtexComponent } from 'vegtex'
// Инициализируем vegtex
vegtex.use('dark', 'azure')
// Создаем компонент
new VegtexComponent('my-component')
<my-component></my-component>
Event-handling
Также можно схватывать любые DOM события из любого инстанса определенного компонента.
import { vegtex, VegtexComponent } from 'vegtex'
// Инициализируем vegtex
vegtex.use('dark', 'azure')
// Создаем компонент
new VegtexComponent('my-component', {
events: {
onclick: (instance, event) => {
console.log('Clicked my-component')
}
}
})
Закажи разработку
проекта