vegtex
v1.6.8
Published
HTML Framework for easier and faster development of beautiful websites.
Downloads
9
Maintainers
proxymalReadme
About
Vegtex - HTML Framework for easier and faster development of beautiful websites.
Installation
Install via npm:
npm i [email protected] -DHow to use
Vegtex is modern JavaScript Framework that adds alot of features to your web-application, there is guide how to use that features.
Example: Counter
<my-counter></my-counter>import vegtex from 'vegtex'
vegtex.use('light', 'azure')
new vegtex.VegtexComponent('my-counter', {
template() {
return `
<p>Clicked ${this.state.x} times</p>
`
},
style: (Style) => ({
':host': [
// Background & Text color
Style.BgColor.color10,
Style.TextColor.color0,
// Content auto-flow
Style.AutoContent,
Style.Align.Center,
Style.Justify.Center,
// Margin & Padding
Style.Margin.Top.px(25),
Style.Padding.All.px(25),
// Cursor, text selection
Style.Cursor.Clickable,
Style.Selection.None,
// Border rounding
Style.Rounding.Default,
// Smooth transitions
Style.Transition.Smooth
],
':hover': [
Style.BgColor.color9,
]
}),
events: {
click(e) {
this.state.x++
}
},
state: () => ({
x: 0
}),
})Example: SPA
Vegtex Framework has a lot of useful components for your SPA.
Example SPA page with Vegtex:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vegtex Single-Page Application</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body spa>
<vg-sidebar pos-left size-lg>
<vg-item navigate="/dashboard">Dashboard</vg-item>
<vg-item navigate="/messages">Messages</vg-item>
</vg-sidebar>
<script src="./js/index.js"></script>
</body>
</html>import vegtex from 'vegtex'
// vegtex.use(theme, themeAccent)
vegtex.use('light', 'azure')For MA (Mobile Application)
Mobile components isn't done yet, but we are working to make them available!