lits-vue-elements
v0.0.5
Published
Vue based ui library
Downloads
15
Maintainers
sandeep8558Readme
Vue Elements by LITS
A library for quick website development and works with bootstrap.
How To Use
<script lang='ts'>
import { LitsBootstrapNavbar, LitsSimpleFooter } from 'lits-vue-elements/components/elements'; // Enter Correct Path
export default {
components: {
LitsBootstrapNavbar,
LitsSimpleFooter
},
setup(){
NavOptions : {
title: "Title",
};
FooterOptions : {
title: "Title",
};
}
}
</script>
<template>
<div>
<LitsBootstrapNavbar :options="NavOptions"></LitsBootstrapNavbar>
<LitsSimpleFooter :options="FooterOptions"></LitsSimpleFooter>
</div>
</template>LitsBootstrapNavbar
This is the navbar element and has some properties which we can use easily.
<LitsBootstrapNavbar :options="options"></LitsBootstrapNavbar>Example Code for Bootstrap Navbar
options : {
title: "Title",
container: "container",
links: [
{
text: "Home",
to: "/",
}
],
};Simple Properties
title: "Title",
container: "container",
brandClasses: "h3",
linkClasses: "",
menuClasses: "",
listClasses: "",Logo Property
logo: {
src: "",
alt: "",
width: "",
height: "",
show: false, // true | false
},Pages Links Property
links: [
{
text: "Home",
to: "/path",
},
{
text: "Products",
dropdown: [], // Array of links if need dropdown
}
],LitsProfileNavbar
This is the profile navbar element and has some properties which we can use easily.
<LitsProfileNavbar :options="options"></LitsProfileNavbar>Example Code for Profile Navbar
options : {
title: "Title",
logo: "path",
container: "",
links: [
{
icon: "<i class="bi bi-facebook"></i>",
href: "https://facebook.com",
}
],
};Simple Properties
title: "Title",
logo: "path to image",
container: "",Links (array of object)
links: [
{
icon: "<i class="bi bi-facebook"></i>",
href: "https://facebook.com",
}
],LitsSimpleFooter
This is a simple footer which is most commanly used by many developers.
<LitsSimpleFooter :options="options"></LitsSimpleFooter>Simple Properties
title,
description,
address,
phone,
email,
bg1,
bg2,
border,
texttitle,
text1,
text2,Array Properties
social: [
{
icon: '<i class="bi bi-facebook"></i>',
href: 'https://www.facebook.com',
},
],
links: [
{
text: "Home",
to: "/path",
},
],
bottomlinks: [
{
text: "Home",
to: "/path",
},
],