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
<button class="btn " :class="item.classes" v-for="(item, index) in button " :key="index" type="button">{{
item.title }}</button>Inside Your script tags add
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-info text-light",
title: "Info Button"
},
{
classes: "btn-success",
title: "Success Button"
},
{
classes: "btn-warning text-light",
title: "Warning Button"
},
{
classes: "btn-danger",
title: "Danger Button"
},
{
classes: "btn-light text-dark",
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",
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
<div class="alert alert-primary" role="alert">This is a info alert—check it out!</div>
<div class="alert alert-secondary" role="alert">This is a light alert—check it out!</div>
<div class="alert alert-success" role="alert">This is a success alert—check it out!</div>
<div class="alert alert-info" role="alert">This is a danger alert—check it out!</div>
<div class="alert alert-warning" role="alert">This is a secondary alert—check it out!</div>
<div class="alert alert-danger" role="alert">This is a warning alert—check it out!</div>
<div class="alert alert-light font-dark" role="alert">This is a dark alert—check it out!</div>
<div class="alert alert-dark" role="alert">This is a dark alert—check it out!</div>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 { onMounted } from "vue";
onMounted(() => {
new Tooltip(document.body, {
selector: "[data-bs-toggle='tooltip']",
})
})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-white",
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
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.
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.
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.
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
Web design identifies the goals 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.
Search engine optimization: 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.
Mobile responsiveness: 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.
Improved sales: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.
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:
- 1. Layout
- 2. Images
- 3. Visual hierarchy
- 4. Color scheme
- 5. Typography
- 6. Navigation
- 7. Readability
- 8. Content
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='text-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"
}
]
}
]