Sharkquila_ui_toolkit NPM

sharkquila_ui_toolkit

NPM License npm npm bundle size

Sharkquila UI toolkits were designed for minimizing the amount of effot that spend on writting the basic UI components while building a website. Those toolkits will handle not only the visual effects of the control but also provide a standardlize UX experience across all the pages.

All the stylesheets were written in less, you will need to use webpack:less-loader or any equivalent tools to bake the style into your own project.

You can initiate your own project with this template as a quick startup.

To need a less file to load all the relavent styles:

@import "sharkquila_ui_toolkit/src/style/theme/index.less";

// add custom theme variable here (themable feature)

@import "sharkquila_ui_toolkit/src/components/index.less";

Please view the Demo repo page for more information.

Or, see the demo site at Docker image

Install

Install the package using npm:

npm install sharkquila_ui_toolkit

Usage

Firstly, installing plugins at the mounting file.

import Vue from 'vue';
import SKPlugins from "sharkquila_ui_toolkit";

// import your root style.less file here
import "./style/style.less";

Vue.use(SKPlugins)

new Vue({
    ...
}).$mount('#main');

Then you can referring the pre-defined control by calling its name directly.

<template>
    <l-label-wrapper 
        value="Title:" 
        size="small"
    >
        <l-input-text
            slot="labelContent"
            @blur="updateOnLabel"
        />
    </l-label-wrapper>
</template>
<script>
export default {
    name: "<name>",
    data: function () {},
    ...
}
</script>