Component
Installing Bootstrap
We have use bootstrap to design most of the components, make sure you install it and integrate with the project.
step 1:
npm install --save bootstrapstep 2:
In your main.ts file all the following code:
import 'bootstrap/dist/css/bootstrap.css'
import "bootstrap"
import "bootstrap/dist/js/bootstrap.min.js";Basic UI Elements
Buttons Preview link
Inside Your template tags add
<button class="btn " data-bs-toggle="tooltip" :title="'btn ' + item.classes" :class="item.classes" v-for="(item, index) in button" :key="index" type="button">{{item.title}}</button>
Inside Your script tags add
import { Tooltip } from "bootstrap";
import { button } from "@/core/data/buttons"Inside ts add
interface drop {
classes: string,
title: string
}
export const button: drop[]= [
{
classes: "btn-primary",
title: "Primary Button"
},
{
classes: "btn-secondary",
title: "Secondary Button"
},
{
classes: "btn-success",
title: "Success Button"
},
{
classes: "btn-info",
title: "Info Button"
},
{
classes: "btn-warning",
title: "Warning Button"
},
{
classes: "btn-danger",
title: "Danger Button"
},
{
classes: "btn-light",
title: "Light Button"
}
]Tag & pills Preview link
Inside Your template tags add
<span class="badge " :class="item.class" v-for="(item, index) in badges" :key="index">{{item.title}}</span>
Inside Your script tags add
import { badges } from "@/core/data/uikits"Inside ts add
interface subs {
class?: string,
title: string
}
export const badges: subs[] = [
{
class: "badge-primary",
title: "Primary"
},
{
class: "badge-secondary",
title: "Secondary"
},
{
class: "badge-success",
title: "Success"
},
{
class: "badge-info",
title: "Info"
},
{
class: "badge-warning text-dark",
title: "Warning"
},
{
class: "badge-danger",
title: "Danger"
},
{
class: "badge-light text-dark",
title: "Light"
},
{
class: "badge-dark tag-pills-sm-mb",
title: "Dark"
}
]Progressbar Preview link
Inside Your template tags add
<div v-for="(item, index) in basic" :key="index">
<div class="progress-bar " :class="item.class" role="progressbar" :style="{ 'width': item.width }"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{item.width}}</div>
</div>
Inside Your script tags add
import { basic } from "@/core/data/uikits"Inside json add
interface progress {
width: string,
class: string
}
export const basic: progress[] = [
{
width: " 25%",
class: "bg-primary"
},
{
width: "50%",
class: "bg-secondary"
},
{
width: "75%",
class: "bg-success"
},
{
width: "100%",
class: "bg-info"
}
]Alert Preview link
<Alerts color="primary">This is a primary alert—check it out!</Alerts>
<Alerts color="secondary">This is a secondary alert—check it out!</Alerts>
<Alerts color="success">This is a success alert—check it out!</Alerts>
<Alerts color="info">This is a info alert—check it out!</Alerts>
<Alerts color="warning">This is a warning alert—check it out!</Alerts>
<Alerts color="danger">This is a danger alert—check it out!</Alerts>
<Alerts color="light">This is a light alert—check it out!</Alerts>
<Alerts color="dark">This is a dark alert—check it out!</Alerts>
Popover Preview link
npm i vue3-popperInside Your template tags add
<Popper placement="right" arrow disableClickAway>
<button class="btn btn-primary example-popover mb-0 me-0"> Hurry
Up! </button>
<template #content>
<div class="popover bs-popover-auto">
<h3 class="popover-header">Basic Popover</h3>
<div class="popover-body">If the package restore doesn't help, you can look at the Output window in the
Visual Studio.</div>
</div>
</template>
</Popper>Inside Your script tags add
import Popper from "vue3-popper";Tooltip Preview link
Inside Your template tags add
<button class="example-popover btn btn-primary" type="button" data-container="body"
data-bs-toggle="tooltip" data-bs-placement="top" title="Popover title" ref="hover">Hover Me</button>Inside Your script tags add
import { Tooltip } from "bootstrap";
import { ref, onMounted } from "vue";
onMounted(() => {
tooltiplist.value = new Tooltip(hover.value!)
})Dropdown Preview link
Inside Your template tags add
<div class="btn-group" v-for="(item, index) in dropdown" :key="index">
<button class="btn dropdown-toggle" :class="item.class" type="button" data-bs-toggle="dropdown"
aria-expanded="false">{{ item.title }}</button>
<ul class="dropdown-menu dropdown-block">
<li v-for="(items, index) in item.children" :key="index"><a class="dropdown-item" href="#">{{
items.title }}</a></li>
</ul>
</div>Inside Your script tags add
import { dropdown } from "@/core/data/uikits"Inside json add
interface basicdropdown {
class: string,
title: string,
children: subss[]
}
interface subss {
title: string
}
export const dropdown: basicdropdown[] = [
{
class: "btn-primary",
title: "Dashboard",
children: [
{
title: "Project"
},
{
title: "Ecommerce"
},
{
title: "Crypto"
}
]
},
{
class: "btn-secondary",
title: "Ecommerce",
children: [
{
title: "Product"
},
{
title: "Product details"
},
{
title: "Cart"
}
]
},
{
class: "btn-warning text-black",
title: "Ui kits",
children: [
{
title: "Typography"
},
{
title: "Avatars"
},
{
title: "Grid"
}
]
},
{
class: "btn-danger",
title: "Error page",
children: [
{
title: "Error 400"
},
{
title: "Error 403"
},
{
title: "Error 500"
}
]
}
]Tab Preview link
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Inside Your template tags add
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle bg-transparent border-none" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" @click="open()">Dropdown</a>
<div class="dropdown-menu" :class="filter ? 'show' : ''"><a class="dropdown-item" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Separated link</a></div>
</li>
<li class="nav-item"><a class="nav-link" id="profile-tabs" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a></li>
<li class="nav-item"><a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a></li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p class="mb-0 m-t-30">{{desc}}</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p class="mb-0 m-t-30">{{desc}}</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p class="mb-0 m-t-30">{{desc}}</p>
</div>
</div>Inside Your script tags add
import { ref } from 'vue';
const filter = ref(false)
const desc = ref <string >("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum")
function open() {
filter.value = !filter.value
} Accordion Preview link
Inside Your template tags add
<div class="accordion dark-accordion" id="simpleaccordion">
<div class="accordion-item" v-for="(item, index) in simple" :key="index">
<h2 class="accordion-header" :id="item.hederid">
<button class="accordion-button bg-light-primary font-primary " @click="toggleAccordion(index)"
type="button" :data-bs-target="item.id" aria-expanded="true" :aria-controls="item.ids">{{ item.title
}}<vue-feather class="svg-color" type="chevron-down"></vue-feather> </button>
</h2>
<div class="accordion-collapse " v-if="item.isActive" :id="item.ids" :aria-labelledby="item.hederid"
data-bs-parent="#simpleaccordion">
<div class="accordion-body">
<div v-for="(items, index) in item.childern" :key="index">
<p v-html="items.desc" v-if="item.one">
</p>
</div>
<div v-for="(items, index) in item.childern" :key="index">
<p class="mb-3" v-html="items.desc" v-if="item.two">
</p>
</div>
<p v-if="item.three">
The web design process allows designers to adjust to any preferences and provide effective
solutions. There are many standard components of every web design, including:</p>
<div v-for="(items, index) in item.childern" :key="index">
<ul class="d-flex flex-column gap-2 accordions-content" v-if="item.three">
<li>--> {{ items.title }}</li>
</ul>
</div>
</div>
</div>
</div>
</div>Inside Your script tags add
import { ref, defineAsyncComponent } from 'vue'
import { useCommonStore } from "@/store/common"
let store = useCommonStore()
let simple = store.data
const toggleAccordion = (index: number) => {
simple[index].isActive = !simple[index].isActive;
closeOtherAccordions(index);
};
const closeOtherAccordions = (currentIndex: number) => {
simple.forEach((item, index) => {
if (index !== currentIndex) {
item.isActive = false;
}
});
};Inside Your store add
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { computed } from 'vue'
import { simple} from "@/core/data/uikits"
export const useCommonStore = defineStore('Common', () => {
let data = ref(simple)
return {
data,
}
})Inside json add
interface simpleaccordion {
hederid: string;
id: string;
ids?: string;
title: string;
one?: boolean;
two?: boolean;
three?: boolean;
isActive: boolean,
childern?: Child[];
}
interface Child {
desc?: string;
title?: string;
}
export const simple: simpleaccordion[] = [
{
hederid: "headingOne",
id: "#collapseOne",
ids: "collapseOne",
title: "What do web designers do?",
one: true,
isActive: true,
childern: [
{
desc: " Web design <em class='txt-danger'> identifies the goals </em> of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages and integrating applications and other interactive elements."
}
]
},
{
hederid: "headingTwo",
id: "#collapseTwo",
ids: "collapseTwo",
title: "What is the use of web design?",
two: true,
isActive: false,
childern: [
{
desc: " <strong> Search engine optimization: </strong> Search engine optimization (SEO) is a method for improving the chances for a website to be found by search engines. Web design codes information in a way that search engines can read it. It can boost business because the site shows up on the top search result pages, helping people to find it."
},
{
desc: " <strong> Mobile responsiveness: </strong> Mobile responsiveness is the feature of a website that allows it to display on a mobile device and adapt its layout and proportions to be legible. Web design ensures sites are easy to view and navigate from mobile devices. When a website is well-designed and mobile-responsive, customers can reach the business with ease."
},
{
desc: " <strong> Improved sales: </strong>Increasing the number of items sold or acquiring more active customers are objectives of a compelling website. As web design reaches targeted customers and search engines, it helps the business make conversions on their site and improve its sales."
}
]
},
{
hederid: "headingThree",
id: "#collapseThree",
ids: "collapseThree",
title: "What are the elements of web design?",
three: true,
isActive: false,
childern: [
{
title: "Layout"
},
{
title: "Images"
},
{
title: "Visual hierarchy"
},
{
title: "Color scheme"
},
{
title: "Typography"
},
{
title: "Navigation"
},
{
title: "Readability"
},
{
title: "Content"
}
]
}
]Advance UI Element
Scrollable Offical link Preview link
npm i vue3-perfect-scrollbarIn your main.ts file all the following code:
import PerfectScrollbar from 'vue3-perfect-scrollbar'
import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css'
.use(PerfectScrollbar)Inside Your template tags add
<perfect-scrollbar class="vertical-scroll scroll-demo" :settings="settings4">
<h5 class="pb-2">Custom Scrollbar </h5>
<p>I'm quite interested in learning more about <em class="txt-danger">custom scrollbars</em> because
they are becoming more and more common.</p>
<div class="scrollbar-images"><img class="img-fluid" src="@/assets/images/banner/1.jpg" alt="banner">
</div>
<p>
There are various justifications for customizing a scrollbar. For instance, the default scrollbar
can cause an app's user interface to look inconsistent across various operating systems. In this
case, having a single style is helpful.</p>
<p>
I never had the opportunity to learn about CSS scrollbar customization, but I have always been
interested in doing so. I'll take the chance to learn more about them and share my trip in this
essay.</p>
<p>
One crucial point to remember is that, depending on the design, a scrollbar may operate either <em
class="txt-danger">horizontally or vertically</em> . Additionally, it might alter when you work
on a website that is global and operates in both left-to-right and right-to-left orientations.</p>
</perfect-scrollbar>Inside Your script tags add
const settings4 = {
maxScrollbarLength: 60,
suppressScrollY: true,
suppressScrollX: false
}Tree Offical link Preview link
npm i vue3-treeviewInside Your template tags add
<treeview :nodes="nodes" :config="config"/>
Inside Your script tags add
import treeview from "vue3-treeview";
import "vue3-treeview/dist/style.css";
import { defineAsyncComponent, ref } from 'vue'
const Card3 = defineAsyncComponent(() => import("@/components/common/card/CardData3.vue"))
let desc = ref<string>("Use the dynamic tree view with checkboxes.")
interface Node {
text: string;
children?: string[];
}
interface Nodes {
[key: string]: Node;
}
let nodes = ref<Nodes>({
id1: {
text: "Admin",
children: ["id11", "id12"],
},
id11: {
text: "Assets",
children: ["id113", "id118"],
},
id12: {
text: "Default",
children: ["id131", "id122"],
},
id111: {
text: "CSS",
children: ["id114", "id115"],
},
id114: {
text: "Css One",
},
id115: {
text: "Css Two",
},
id113: {
text: "Js",
children: ["id116", "id117"],
},
id116: {
text: "Js One"
},
id117: {
text: "Js Two"
},
id118: {
text: "Scss",
children: ["id119"]
},
id119: {
text: "Sub Child",
children: ["id120", "id121"]
},
id120: {
text: "Sub File"
},
id121: {
text: "Sub File"
},
id131: {
text: "Dashboard"
},
id122: {
text: "Typography"
},
id2: {
text: "index file",
},
});
let config = ref({
roots: ["id1", "id2"],
});Toast Offical link Preview link
npm i vue3-toastifyInside Your template tags add
<class="btn btn-success " type="button" @click="success" variant="success">Success</Button>
Inside Your script tags add
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';
function success() {
toast.success(' New order has been placed ', {
hideProgressBar: true, autoClose: 2000, theme: 'colored', position: 'top-right'
});
}Dropzone Offical link Preview link
npm i dropzone-vueInside Your template tags add
<DropZone
:maxFileSize="Number(60000000)"
:uploadOnDrop="true"
:dropzoneMessageClassName="customClass" :maxFiles="1">
</DropZone>
Inside Your script tags add
import DropZone from "dropzone-vue";
Inside Your style tags add
@import 'dropzone-vue/dist/dropzone-vue.common.css';
Tour Offical link Preview link
npm i v-onboardingInside Your template tags add
<img img class="img-fluid" alt="" src="@/assets/images/user/7.jpg" data-intro="This is Profile image">
<router-link class="icon-wrapper" id="update-profile-tour" to="/users/edit">
<i class="icofont icofont-pencil-alt-5" data-intro="Change Profile image here" id="update-profile-tour" ></i>
</router-link>
<VOnboardingWrapper ref="wrapper" :steps="steps" class="tour-visit"/>Inside Your script tags add
import { VOnboardingWrapper, useVOnboarding } from 'v-onboarding'
import 'v-onboarding/dist/style.css'
const { start, goToStep, finish } = useVOnboarding(wrapper)
let steps = [
{
attachTo: { element: '#profiletour' }, content: { title: "This is Cion profile" }
},
{
attachTo: { element: '#update-profile-tour' }, content: { title: "Change Cion profile image here" }
}
]
onMounted(() => {
start()
});Sweetalert Offical link Preview link
npm i sweetalert2Inside Your template tags add
<button class="btn btn-danger sweet-5" type="button" v-on:click="basic_warning_alert" >Warning alert</button>Inside Your script tags add
import Swal from 'sweetalert2'
function basic_warning_alert() {
Swal.fire({
icon: 'warning',
title: "Are you sure?",
text: 'Once deleted, you will not be able to recover this imaginary file!',
showCancelButton: true,
confirmButtonText: 'Ok',
confirmButtonColor: '#3e5fce',
cancelButtonText: 'Cancel',
cancelButtonColor: '#efefef',
}).then((result) => {
if (result.value) {
Swal.fire({
icon: 'success',
text: 'Poof! Your imaginary file has been deleted!',
confirmButtonColor: '#3e5fce',
});
} else {
Swal.fire({
text: 'Your imaginary file is safe!',
confirmButtonColor: '#3e5fce',
});
}
});
}Range slider Offical link Preview link
npm i vue-slider-componentInside Your template tags add
<VueSlider v-model="one.value" :data="one.data" :tooltip="'always'" :tooltip-placement="'top'" ></VueSlider>Inside Your script tags add
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'
import { ref } from "vue"
const one = ref({
value: 10,
data: [10, 100]
})Image cropper Offical link Preview link
npm i vue-cropperjsInside Your template tags add
<vue-cropper
vue-cropper ref="cropper"
:guides="true"
:view-mode="viewmodeselected"
drag-mode="crop"
:aspectRatio="aspectRatioselected"
:auto-crop-area="0.5"
:min-container-width="250"
:min-container-height="180"
:background="true"
:rotatable="true"
:movable="true"
:src="getImgUrl(myimgSrc)"
alt="Source Image"
:ready="ready"
:crop="cropImage"
img-preview=".img-preview"
:img-style="{ width: '800px', height: '500px' }">
</vue-cropper>
Inside Your script tags add
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
import { Tooltip } from "bootstrap";
import { getImgUrl } from "@/composables/commen/imgMixin"
import { ref, onMounted } from "vue"
let myimgSrc = ref<string>('other-images/img-cropper.jpg')
let imageData = ref<any>({})
let containerData = ref<string>('')
let putData = ref<string>('')
let viewmodeselected = ref<number>(0)
let cropImg = ref<string>('')
let aspectRatioselected = ref<number>(1.7777777777777777)
let cropper = ref()
let convertNumber = (num?: number) => num != null ? Math.round(num) : undefined
function ready() {
containerData.value = cropper.value.getContainerData();
}
function cropImage() {
cropImg.value = cropper.value.getCroppedCanvas().toDataURL();
}
onMounted(() => {
new Tooltip(document.body, {
selector: "[data-bs-toggle='tooltip']",
})
})Timeline Preview link
Inside Your template tags add
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-picture bg-success"><i class="icon-image"></i></div>
<div class="cd-timeline-content">
<div class="timeline-wrapper">
<div class="badge bg-info">Designer</div>
</div>
<h3 class="m-0">Research about most recent design trends.</h3>
<p class="mb-0">
Spend some time looking up current design trend. </p>
<div class="carousel slide" id="carouselExampleIndicators" data-bs-ride="true">
<div class="carousel-indicators">
<button class="active" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="@/assets/images/banner/2.jpg"
alt="office-work"></div>
<div class="carousel-item"><img class="d-block w-100" src="@/assets/images/banner/1.jpg"
alt="office-work"></div>
<div class="carousel-item"><img class="d-block w-100" src="@/assets/images/banner/3.jpg"
alt="office-work"></div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span
class="visually-hidden">Previous</span></button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span
class="visually-hidden">Next</span></button>
</div><span class="cd-date">April 23 2024</span>
</div>
</div>Icons
Flag Icons Offical link Preview link
You have to add the following style and add flag-icon folder in your fonts folder
<!-- flag icon scss -->
@import "./vendors/flag-icon.scss";<!-- some icon display for demo -->
<i class="flag-icon flag-icon-in mx-1"></i>
<i class="flag-icon flag-icon-ad mx-1"></i>
<i class="flag-icon flag-icon-ae mx-1"></i>
<i class="flag-icon flag-icon-af mx-1"></i>Font awesome Offical link Preview link
You have to add the following style and add font-awesome folder in your fonts folder
<!-- font awesome scss -->
@import "./vendors/font-awesome.scss";<!-- some icon display for demo -->
<i class="fa fa-bluetooth mx-1"></i>
<i class="fa fa-bitcoin mx-1"></i>
<i class="fa fa-anchor mx-1"></i>
<i class="fa fa-text-height mx-1"></i>Ico icon Offical link Preview link
You have to add the following style and add ico folder in your fonts folder
<!-- ico icon scss -->
@import "./vendors/icofont.scss";<!-- some icon display for demo -->
<i class="icofont icofont-bow mx-1"></i>
<i class="icofont icofont-animal-dolphin mx-1"></i>
<i class="icofont icofont-brand-apple mx-1"></i>
<i class="icofont icofont-bank-alt mx-1"></i>Themify Offical link Preview link
You have to add the following style and add themify folder in your fonts folder
<!-- themify icon scss -->
@import "./vendors/themify.scss";<!-- some icon display for demo -->
<i class="icon-fullscreen mx-1"></i>
<i class="icon-save-alt mx-1"></i>
<i class="icon-volume mx-1"></i>
<i class="icon-instagram mx-1"></i>Feather icon Offical link Preview link
You have to add the following style and add feather folder in your fonts folder
npm i vue-featherimport VueFeather from "vue-feather";
.component(VueFeather.name, VueFeather)
<!-- some icon display for demo -->
<vue-feather type="activity" class="mx-1"></vue-feather>
<vue-feather type="image" class="mx-1"></vue-feather>
<vue-feather type="phone-forwarded" class="mx-1"></vue-feather>
<vue-feather type="wind" class="mx-1"></vue-feather>Cards
Basic cards Preview link
Basic Card
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
Inside Your template tags add
<div v-for="(item, index) in data" :key="index" :title="item.title" :desc="item.desc";>
<p class="mb-0" v-html="item.body"></p>
</div>Inside Your script tags add
import { card } from "@/core/data/advance"
Inside Your json tags add
interface Card {
title: string;
desc: string;
body: string;
card?: string
}
export const card: Card[] = [
{
title: "Basic Card",
desc: "This is a simple basic card using anywhere.",
body: "Tabs have long been used to show alternative views of the same group of information tabs in software. Known as“module tabs” , these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire."
},
{
title: "Flat Card",
card: "b-r-0",
desc: "For flat cards, make the.b-r-0[border-radius:0]used class.",
body: "A navigation bar is a particularly important feature because it allows visitors to quickly and easily find important pages on your website , like your blog, product pages, pricing, contact info, and documentation. This improves the chances of visitors browsing your site longer, which can boost your page views and reduce your bounce rate."
}
]
Theme card Preview link
Basic Card
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
Inside Your template tags add
<div v-for="(item, index) in positioncard" :key="index"
:title="item.heading" :desc="item.desc">
<p :class="item.bodyTextClass">{{ item.bodyText }}</p>
<p v-if="item.id == 1">Us Technology offers web & mobile development solutions for all industry
verticals.Include a short form
using fields that'll help your business understand who's contacting them.<br><strong>Visit Us: </strong>
2600 Hollywood Blvd,Florida, United States- 33020<br><strong>Mail
Us:</strong>contact@us@gmail.com<br><strong>Contact Number: </strong>(954) 357-7760</p>
<form v-else-if="item.id == 2">
<label class="form-label" for="exampleFormControlInput1">Email address</label>
<input class="form-control" id="exampleFormControlInput1" type="email" placeholder="youremail@gmail.com">
</form>
</div>
Inside Your script tags add
import { positioncard } from "@/core/data/advance"
Inside Your json tags add
interface Positioncard {
id: number;
borderClass: string;
heading: string;
desc: string;
bodyTextClass?: string;
bodyText?: string;
}
export const positioncard: Positioncard[] = [
{
id: 1,
borderClass: "pb-0 border-l-primary",
heading: "Border Left",
desc: "Use the class of.b-l-* for left border.",
bodyTextClass: ""
},
{
id: 2,
borderClass: "pb-0 border-r-secondary",
heading: "Border Right",
desc: "Use the class of.b-r-* for right border.",
bodyTextClass: "",
bodyText: "Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them."
},
{
id: 3,
borderClass: "pb-0 border-t-danger",
heading: "Border Top",
desc: "Use the class of.b-t-* for top border.",
bodyTextClass: "mb-0",
bodyText: "Tabs have long been used to show alternative views of the same group of information tabs in software. Known as“module tabs” , these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire."
},
{
id: 4,
borderClass: "border-b-info",
heading: "Border Bottom",
desc: "Use the class of.b-b-* for bottom border.",
bodyTextClass: "mb-0",
bodyText: "A navigation bar is a particularly important feature because it allows visitors to quickly and easily find important pages on your website , like your blog, product pages, pricing, contact info, and documentation. This improves the chances of visitors browsing your site longer, which can boost your page views and reduce your bounce rate."
}
]
Charts
Google charts Offical link Preview link
npm i vue-google-chartsInside Your template tags add
<GChart
class="chart-overflow"
id="bar-chart2" type="BarChart"
:data="bar_chart.chartData_1"
:options="bar_chart.options_1" />Inside Your script tags add
import { GChart } from "vue-google-charts";
import { bar_chart, } from "@/core/data/google-chart"
Inside Your google-chart.ts tags add
var secondary = localStorage.getItem('secondary_color') || '#FF6150';
var primary = localStorage.getItem('primary_color') || '#35bfbf';
{
export const bar_chart = {
chartData_1: [
["Element", "Density", {
role: "style"
}],
["Copper", 10, "#a927f9"],
["Silver", 12, "#f8d62b"],
["Gold", 14, "#48A3D7"],
["Platinum", 16, "color: #7A70BA"],
],
options_1: {
title: 'Density of Precious Metals, in g/cm^3',
width: '100%',
height: 400,
bar: { groupWidth: '95%' },
legend: { position: 'none' },
}
}Chartist charts Offical link Preview link
npm i vue-chartistInside Your template tags add
<chartist
class="ct-4 flot-chart-container" ratio="" type="Line" :data="chart5.data" :options="chart5.options">
<chartist> In your main.ts file all the following code:
import vueChartist from "vue-chartist";
.use(vueChartist)Inside Your script tags add
import { chart5 } from "@/core/data/chartist-chart"
Inside Your chartist-chart.ts tags add
var secondary = localStorage.getItem('secondary_color') || '#FF6150';
var primary = localStorage.getItem('primary_color') || '#35bfbf';
export const chart5 = {
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[5, 9, 7, 8, 5, 3, 5, 4]
]
},
options: {
low: 0,
showArea: true,
},
}Apex charts Offical link Preview link
npm i vue3-apexchartsIn your main.ts file all the following code:
import VueApexCharts from "vue3-apexcharts";
.use(VueApexCharts)Inside Your template tags add
<apexchart
type="area" height="350"
ref="chart"
:options="chartOptions"
:series="series">
<apexchart>Inside Your script tags add
import { series,chartOptions } from "@/core/data/charts"
Inside Your chart-data.ts tags add
export const monthDataSeries = [{
prices: [
8107.85, 8128.0, 8122.9, 8165.5, 8340.7, 8423.7, 8423.5, 8514.3, 8481.85,
8487.7, 8506.9, 8626.2, 8668.95, 8602.3, 8607.55, 8512.9, 8496.25,
8600.65, 8881.1, 9340.85,
],
dates: [
"13 Nov 2017",
"14 Nov 2017",
"15 Nov 2017",
"16 Nov 2017",
"17 Nov 2017",
"20 Nov 2017",
"21 Nov 2017",
"22 Nov 2017",
"23 Nov 2017",
"24 Nov 2017",
"27 Nov 2017",
"28 Nov 2017",
"29 Nov 2017",
"30 Nov 2017",
"01 Dec 2017",
"04 Dec 2017",
"05 Dec 2017",
"06 Dec 2017",
"07 Dec 2017",
"08 Dec 2017",
],
}]Inside Your google-chart.ts tags add
import { monthDataSeries } from "@/core/data/chart-data"
var secondary = localStorage.getItem('secondary_color') || "#48A3D7";
var primary = localStorage.getItem('primary_color') || "#7A70BA";
export const series = [
{
name: "STOCK ABC",
data: monthDataSeries[0].prices,
},
]
export const chartOptions = {
chart: {
height: 350,
type: "area",
zoom: {
enabled: false,
},
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "straight",
},
title: {
text: "Fundamental Analysis of Stocks",
align: "left",
},
subtitle: {
text: "Price Movements",
align: "left",
},
labels: monthDataSeries[0].dates,
xaxis: {
type: "datetime",
},
yaxis: {
opposite: true,
},
legend: {
horizontalAlign: "left",
},
colors: [primary],
}Maps
Google Maps Offical link Preview link
npm i vue3-google-mapInside Your template tags add
<GoogleMap :center="{lat:20.5937, lng:78.9629}" :zoom="12" style="width: auto; height: 500px"><GoogleMap>
Inside Your script tags add
import { GoogleMap, Marker } from "vue3-google-map";Leaflet Map Offical link Preview link
npm i @vue-leaflet/vue-leafletInside Your template tags add
<l-map :zoom="simple.zoom" global-leaflet="false" :center="simple.center" :useGlobalLeaflet="false"
style="height: 500px">
<l-tile-layer :url="simple.url"><l-tile-layer>
<l-map>
Inside Your script tags add
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
const simple =ref( {
zoom: 5,
center: [49.439557, 234.558105],
url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
})Inside Your style tags add
@import "leaflet/dist/leaflet.css";
Editors
CKeditor Offical link Preview link
npm i @ckeditor/ckeditor5-vueInside Your template tags add
<ckeditor :editor="editor" v-model="editorData"><ckeditor>Inside Your script tags add
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { ref } from "vue"
const ckeditor = CKEditor.component
const editor = ClassicEditor
const editorData = ref<string>('<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>')
Simple Editor Offical link Preview link
npm i vue3-quillIn your main.ts file all the following code:
import { quillEditor } from "vue3-quill";
.use(quillEditor)Inside Your template tags add
<quill-editor
v-model:value="state.content"
:options="state.editorOption"
@change="onEditorChange($event)" />Inside Your script tags add
import { reactive } from 'vue'
const state = reactive({
content: '<h1>Some initial content</h1>',
_content: '',
editorOption: {
placeholder: 'core',
},
disabled: false
})
const onEditorChange = (html: string) => {
state._content = html
}
setTimeout(() => {
state.disabled = true
}, 2000)