ginkyoOne / gnk.core

Vue 3 UI Framework

Vue 3 UI Framework

DEMO vue gnk.core v0.1 alfa

Built With

• 🖊️ scss
• 🐙 Vue 3 (options api)
• 💻 Vite
• ☕ Coffee
• 💕 Love

• .core.autoLoader(FULL)
• .core.autoLoader(mobile)
• .core.autoLoader(WEB)
• .core.configs
• .core.grid
• .core.theme
• Alert
• Avatar
• Backdrop
• Breadcrumb
• Button
• Calendar/Date picker
• Card/Expandable Card
• Checkbox
• Chip
• Collapse
• Contacts List
• Data Table
• Dialogs
• Divider
• Dropdown
• Editable
• Export pdf/xls
• Images
• Input
• List
• Loading
• Navbar
• Notification
• Number Input
• Pagination
• Picker
• PopOver
• Popup
• Progress
• Properties Grid
• Radio
• SearchBar
• Select
• Sheet Modal
• Sidebar
• Skeleton
• Expand Pannel
• Slider
• Sortable/Drag list
• Swipeout
• Swiper
• Switch
• Tabs
• Textarea
• Timeline
• Tooltip
• Treeview
• Upload
• Video player

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

• Node : 16.10.0
• Vscode

Installation

1. Clone the repo

git clone https://github.com/ginkyoOne/gnk.core/

2. Open VS Code
3. On your project main.js

import { createApp, h } from 'vue'
import App from './App.vue'
import GNK from 'gnk.core'
import routes from './router'


import "gnk.core/dist/style.css"

//CREATE APP
window.APP = createApp({
    render: () => h(App)
})


//REGISTER GNK FRAMEWORK
GNK.registerModuleComponents( GNK)
GNK.registerRoutes( routes)

//MOUNT APP
window.APP.mount('#app')

Usage

    <gnk-button primary size="xl" > xl</gnk-button>
    <gnk-button info size="xl" > xl</gnk-button>
    <gnk-button warning size="l"> l </gnk-button>
    <gnk-button danger size="default"> default </gnk-button>
    <gnk-button success size="small"> small </gnk-button>

Contact

Project Link: https://github.com/ginkyoOne/gnk.core/

Acknowledgements

• This is still an alfa version, dont use it in production.