update the content

This commit is contained in:
sajadevo 2022-08-19 17:33:50 +04:30
parent ef533be92f
commit 89e9116917
57 changed files with 455 additions and 403 deletions

View File

@ -1,7 +1,7 @@
/*!
=========================================================
* Material Kit 2 PRO - v3.0.2
* Material Kit 2 - v3.0.2
=========================================================
* Product Page: https://www.creative-tim.com/product/soft-ui-design-system
@ -22,23 +22,23 @@
function debounce(func, wait, immediate) {
var timeout;
return function() {
return function () {
var context = this,
args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
timeout = setTimeout(function () {
timeout = null;
if (!immediate) func.apply(context, args);
}, wait);
if (immediate && !timeout) func.apply(context, args);
};
};
}
// Function for smooth scroll to element
function smoothToPricing(id) {
if (document.getElementById(id)) {
document.getElementById(id).scrollIntoView({
behavior: 'smooth'
behavior: "smooth"
});
}
}
@ -46,277 +46,341 @@ function smoothToPricing(id) {
// Debounce function
function debounce(func, wait, immediate) {
var timeout;
return function() {
return function () {
var context = this,
args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
timeout = setTimeout(function () {
timeout = null;
if (!immediate) func.apply(context, args);
}, wait);
if (immediate && !timeout) func.apply(context, args);
};
};
}
// initialization of Popovers
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
// initialization of Tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
var tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// helper for adding on all elements multiple attributes
function setAttributes(el, options) {
Object.keys(options).forEach(function(attr) {
Object.keys(options).forEach(function (attr) {
el.setAttribute(attr, options[attr]);
})
});
}
// activate popovers
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
// activate tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
var tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
window.onload = function() {
window.onload = function () {
// Material Design Input function
var inputs = document.querySelectorAll('input');
var inputs = document.querySelectorAll("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('focus', function(e) {
this.parentElement.classList.add('is-focused');
}, false);
inputs[i].addEventListener(
"focus",
function (e) {
this.parentElement.classList.add("is-focused");
},
false
);
inputs[i].onkeyup = function(e) {
inputs[i].onkeyup = function (e) {
if (this.value != "") {
this.parentElement.classList.add('is-filled');
this.parentElement.classList.add("is-filled");
} else {
this.parentElement.classList.remove('is-filled');
this.parentElement.classList.remove("is-filled");
}
};
inputs[i].addEventListener('focusout', function(e) {
if (this.value != "") {
this.parentElement.classList.add('is-filled');
}
this.parentElement.classList.remove('is-focused');
}, false);
inputs[i].addEventListener(
"focusout",
function (e) {
if (this.value != "") {
this.parentElement.classList.add("is-filled");
}
this.parentElement.classList.remove("is-focused");
},
false
);
}
// Ripple Effect
var ripples = document.querySelectorAll('.btn');
var ripples = document.querySelectorAll(".btn");
for (var i = 0; i < ripples.length; i++) {
ripples[i].addEventListener('click', function(e) {
var targetEl = e.target;
var rippleDiv = targetEl.querySelector('.ripple');
ripples[i].addEventListener(
"click",
function (e) {
var targetEl = e.target;
var rippleDiv = targetEl.querySelector(".ripple");
rippleDiv = document.createElement('span');
rippleDiv.classList.add('ripple');
rippleDiv.style.width = rippleDiv.style.height = Math.max(targetEl.offsetWidth, targetEl.offsetHeight) + 'px';
targetEl.appendChild(rippleDiv);
rippleDiv = document.createElement("span");
rippleDiv.classList.add("ripple");
rippleDiv.style.width = rippleDiv.style.height =
Math.max(targetEl.offsetWidth, targetEl.offsetHeight) + "px";
targetEl.appendChild(rippleDiv);
rippleDiv.style.left = (e.offsetX - rippleDiv.offsetWidth / 2) + 'px';
rippleDiv.style.top = (e.offsetY - rippleDiv.offsetHeight / 2) + 'px';
rippleDiv.classList.add('ripple');
setTimeout(function() {
rippleDiv.parentElement.removeChild(rippleDiv);
}, 600);
}, false);
rippleDiv.style.left = e.offsetX - rippleDiv.offsetWidth / 2 + "px";
rippleDiv.style.top = e.offsetY - rippleDiv.offsetHeight / 2 + "px";
rippleDiv.classList.add("ripple");
setTimeout(function () {
rippleDiv.parentElement.removeChild(rippleDiv);
}, 600);
},
false
);
}
};
// Multi Level Dropdown
function dropDown(a) {
if (!document.querySelector('.dropdown-hover')) {
if (!document.querySelector(".dropdown-hover")) {
event.stopPropagation();
event.preventDefault();
var multilevel = a.parentElement.parentElement.children;
for (var i = 0; i < multilevel.length; i++) {
if (multilevel[i].lastElementChild != a.parentElement.lastElementChild) {
multilevel[i].lastElementChild.classList.remove('show');
multilevel[i].firstElementChild.classList.remove('show');
multilevel[i].lastElementChild.classList.remove("show");
multilevel[i].firstElementChild.classList.remove("show");
}
}
if (!a.nextElementSibling.classList.contains("show")) {
a.nextElementSibling.classList.add("show");
a.classList.add("show");
} else {
a.nextElementSibling.classList.remove("show");
a.classList.remove("show");
}
}
}
// Colored shadows from Cards
if (document.querySelector('.blur-shadow-image')) {
var shadowCards = document.querySelectorAll('.blur-shadow-image');
var shadowCardsRounded = document.querySelectorAll('.blur-shadow-image.rounded-circle');
if (document.querySelector(".blur-shadow-image")) {
var shadowCards = document.querySelectorAll(".blur-shadow-image");
var shadowCardsRounded = document.querySelectorAll(
".blur-shadow-image.rounded-circle"
);
if (shadowCardsRounded) {
for (var i = 0; i < shadowCardsRounded.length; i++) {
var div = document.createElement("DIV");
shadowCardsRounded[i].parentElement.appendChild(div);
div.classList.add('colored-shadow', 'rounded');
div.classList.add("colored-shadow", "rounded");
var currentSrc = shadowCardsRounded[i].children[0].getAttribute('src');
var currentSrc = shadowCardsRounded[i].children[0].getAttribute("src");
var el = shadowCardsRounded[i].nextElementSibling;
el.style.backgroundImage = 'url(' + currentSrc + ')';
el.style.backgroundImage = "url(" + currentSrc + ")";
}
}
if (shadowCards) {
for (var i = 0; i < shadowCards.length; i++) {
var div = document.createElement("DIV");
shadowCards[i].parentElement.appendChild(div);
div.classList.add('colored-shadow');
div.classList.add("colored-shadow");
var currentSrc = shadowCards[i].children[0].getAttribute('src');
var currentSrc = shadowCards[i].children[0].getAttribute("src");
var el = shadowCards[i].nextElementSibling;
el.style.backgroundImage = 'url(' + currentSrc + ')';
el.style.backgroundImage = "url(" + currentSrc + ")";
}
}
}
// Colored shadows for Avatars
if (document.querySelector('.blur-shadow-avatar')) {
var shadowCards = document.querySelectorAll('.blur-shadow-avatar');
var shadowCardsRounded = document.querySelectorAll('.blur-shadow-avatar.rounded-circle');
if (document.querySelector(".blur-shadow-avatar")) {
var shadowCards = document.querySelectorAll(".blur-shadow-avatar");
var shadowCardsRounded = document.querySelectorAll(
".blur-shadow-avatar.rounded-circle"
);
if (shadowCardsRounded) {
for (var i = 0; i < shadowCardsRounded.length; i++) {
var div = document.createElement("DIV");
shadowCardsRounded[i].parentElement.appendChild(div);
div.classList.add('colored-shadow', 'rounded', 'start-0', 'end-0', 'mx-auto');
div.classList.add(
"colored-shadow",
"rounded",
"start-0",
"end-0",
"mx-auto"
);
var avatarClasses = ['avatar-xs', 'avatar-sm', 'avatar-lg', 'avatar-xl', 'avatar-xxl'];
var avatarClasses = [
"avatar-xs",
"avatar-sm",
"avatar-lg",
"avatar-xl",
"avatar-xxl"
];
for (var k = 0; k < avatarClasses.length; k++) {
if (shadowCardsRounded[i].firstElementChild.classList.contains(avatarClasses[k])) {
if (
shadowCardsRounded[i].firstElementChild.classList.contains(
avatarClasses[k]
)
) {
div.classList.add(avatarClasses[k]);
}
}
var currentSrc = shadowCardsRounded[i].children[0].getAttribute('src');
var currentSrc = shadowCardsRounded[i].children[0].getAttribute("src");
var el = shadowCardsRounded[i].nextElementSibling;
el.style.backgroundImage = 'url(' + currentSrc + ')';
el.style.backgroundImage = "url(" + currentSrc + ")";
}
}
if (shadowCards) {
for (var i = 0; i < shadowCards.length; i++) {
var div = document.createElement("DIV");
shadowCards[i].parentElement.appendChild(div);
div.classList.add('colored-shadow', 'start-0', 'end-0', 'mx-auto');
div.classList.add("colored-shadow", "start-0", "end-0", "mx-auto");
var avatarClasses = ['avatar-xs', 'avatar-sm', 'avatar-lg', 'avatar-xl', 'avatar-xxl'];
var avatarClasses = [
"avatar-xs",
"avatar-sm",
"avatar-lg",
"avatar-xl",
"avatar-xxl"
];
for (var k = 0; k < avatarClasses.length; k++) {
if (shadowCards[i].firstElementChild.classList.contains(avatarClasses[k])) {
if (
shadowCards[i].firstElementChild.classList.contains(avatarClasses[k])
) {
div.classList.add(avatarClasses[k]);
}
}
var currentSrc = shadowCards[i].children[0].getAttribute('src');
var currentSrc = shadowCards[i].children[0].getAttribute("src");
var el = shadowCards[i].nextElementSibling;
el.style.backgroundImage = 'url(' + currentSrc + ')';
el.style.backgroundImage = "url(" + currentSrc + ")";
}
}
}
//Google Maps
if (document.querySelector('#google-maps')) {
if (document.querySelector("#google-maps")) {
var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
var mapOptions = {
zoom: 13,
center: myLatlng,
scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
styles: [{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#444444"
}]
styles: [
{
featureType: "administrative",
elementType: "labels.text.fill",
stylers: [
{
color: "#444444"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"color": "#f2f2f2"
}]
featureType: "landscape",
elementType: "all",
stylers: [
{
color: "#f2f2f2"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
featureType: "poi",
elementType: "all",
stylers: [
{
visibility: "off"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [{
"saturation": -100
}, {
"lightness": 45
}]
featureType: "road",
elementType: "all",
stylers: [
{
saturation: -100
},
{
lightness: 45
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}]
featureType: "road.highway",
elementType: "all",
stylers: [
{
visibility: "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
featureType: "road.arterial",
elementType: "labels.icon",
stylers: [
{
visibility: "off"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
featureType: "transit",
elementType: "all",
stylers: [
{
visibility: "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [{
"color": "#C5CBF5"
}, {
"visibility": "on"
}]
featureType: "water",
elementType: "all",
stylers: [
{
color: "#C5CBF5"
},
{
visibility: "on"
}
]
}
]
};
var map = new google.maps.Map(document.getElementById("google-maps"), mapOptions);
var map = new google.maps.Map(
document.getElementById("google-maps"),
mapOptions
);
var marker = new google.maps.Marker({
position: myLatlng,
@ -329,111 +393,118 @@ if (document.querySelector('#google-maps')) {
// Tabs navigation
var total = document.querySelectorAll('.nav-pills');
var total = document.querySelectorAll(".nav-pills");
total.forEach(function(item, i) {
var moving_div = document.createElement('div');
var first_li = item.querySelector('li:first-child .nav-link');
total.forEach(function (item, i) {
var moving_div = document.createElement("div");
var first_li = item.querySelector("li:first-child .nav-link");
var tab = first_li.cloneNode();
tab.innerHTML = "-";
moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link');
moving_div.classList.add("moving-tab", "position-absolute", "nav-link");
moving_div.appendChild(tab);
item.appendChild(moving_div);
var list_length = item.getElementsByTagName("li").length;
moving_div.style.padding = '0px';
moving_div.style.width = item.querySelector('li:nth-child(1)').offsetWidth + 'px';
moving_div.style.transform = 'translate3d(0px, 0px, 0px)';
moving_div.style.transition = '.5s ease';
moving_div.style.padding = "0px";
moving_div.style.width =
item.querySelector("li:nth-child(1)").offsetWidth + "px";
moving_div.style.transform = "translate3d(0px, 0px, 0px)";
moving_div.style.transition = ".5s ease";
item.onmouseover = function(event) {
item.onmouseover = function (event) {
let target = getEventTarget(event);
let li = target.closest('li'); // get reference
let li = target.closest("li"); // get reference
if (li) {
let nodes = Array.from(li.closest('ul').children); // get array
let nodes = Array.from(li.closest("ul").children); // get array
let index = nodes.indexOf(li) + 1;
item.querySelector('li:nth-child(' + index + ') .nav-link').onclick = function() {
moving_div = item.querySelector('.moving-tab');
let sum = 0;
if (item.classList.contains('flex-column')) {
for (var j = 1; j <= nodes.indexOf(li); j++) {
sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight;
item.querySelector("li:nth-child(" + index + ") .nav-link").onclick =
function () {
moving_div = item.querySelector(".moving-tab");
let sum = 0;
if (item.classList.contains("flex-column")) {
for (var j = 1; j <= nodes.indexOf(li); j++) {
sum += item.querySelector("li:nth-child(" + j + ")").offsetHeight;
}
moving_div.style.transform = "translate3d(0px," + sum + "px, 0px)";
moving_div.style.height = item.querySelector(
"li:nth-child(" + j + ")"
).offsetHeight;
} else {
for (var j = 1; j <= nodes.indexOf(li); j++) {
sum += item.querySelector("li:nth-child(" + j + ")").offsetWidth;
}
moving_div.style.transform = "translate3d(" + sum + "px, 0px, 0px)";
moving_div.style.width =
item.querySelector("li:nth-child(" + index + ")").offsetWidth +
"px";
}
moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)';
moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight;
} else {
for (var j = 1; j <= nodes.indexOf(li); j++) {
sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth;
}
moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)';
moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';
}
}
};
}
}
};
});
// Tabs navigation resize
window.addEventListener('resize', function(event) {
total.forEach(function(item, i) {
item.querySelector('.moving-tab').remove();
var moving_div = document.createElement('div');
window.addEventListener("resize", function (event) {
total.forEach(function (item, i) {
item.querySelector(".moving-tab").remove();
var moving_div = document.createElement("div");
var tab = item.querySelector(".nav-link.active").cloneNode();
tab.innerHTML = "-";
moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link');
moving_div.classList.add("moving-tab", "position-absolute", "nav-link");
moving_div.appendChild(tab);
item.appendChild(moving_div);
moving_div.style.padding = '0px';
moving_div.style.transition = '.5s ease';
moving_div.style.padding = "0px";
moving_div.style.transition = ".5s ease";
let li = item.querySelector(".nav-link.active").parentElement;
if (li) {
let nodes = Array.from(li.closest('ul').children); // get array
let nodes = Array.from(li.closest("ul").children); // get array
let index = nodes.indexOf(li) + 1;
let sum = 0;
if (item.classList.contains('flex-column')) {
if (item.classList.contains("flex-column")) {
for (var j = 1; j <= nodes.indexOf(li); j++) {
sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight;
sum += item.querySelector("li:nth-child(" + j + ")").offsetHeight;
}
moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)';
moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';
moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight;
moving_div.style.transform = "translate3d(0px," + sum + "px, 0px)";
moving_div.style.width =
item.querySelector("li:nth-child(" + index + ")").offsetWidth + "px";
moving_div.style.height = item.querySelector(
"li:nth-child(" + j + ")"
).offsetHeight;
} else {
for (var j = 1; j <= nodes.indexOf(li); j++) {
sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth;
sum += item.querySelector("li:nth-child(" + j + ")").offsetWidth;
}
moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)';
moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';
moving_div.style.transform = "translate3d(" + sum + "px, 0px, 0px)";
moving_div.style.width =
item.querySelector("li:nth-child(" + index + ")").offsetWidth + "px";
}
}
});
if (window.innerWidth < 991) {
total.forEach(function(item, i) {
if (!item.classList.contains('flex-column')) {
item.classList.add('flex-column', 'on-resize');
total.forEach(function (item, i) {
if (!item.classList.contains("flex-column")) {
item.classList.add("flex-column", "on-resize");
}
});
} else {
total.forEach(function(item, i) {
if (item.classList.contains('on-resize')) {
item.classList.remove('flex-column', 'on-resize');
total.forEach(function (item, i) {
if (item.classList.contains("on-resize")) {
item.classList.remove("flex-column", "on-resize");
}
})
});
}
});
function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
@ -441,7 +512,6 @@ function getEventTarget(e) {
// End tabs navigation
// Copy code function
function copyCode(el) {
@ -451,28 +521,41 @@ function copyCode(el) {
range.selectNodeContents(textToCopy);
selection.removeAllRanges();
selection.addRange(range);
const successful = document.execCommand('copy');
window.getSelection().removeAllRanges()
if (!el.parentElement.querySelector('.alert')) {
var alert = document.createElement('div');
alert.classList.add('alert', 'alert-success', 'position-absolute', 'top-0', 'border-0', 'text-white', 'w-25', 'end-0', 'start-0', 'mt-2', 'mx-auto', 'py-2');
alert.style.transform = 'translate3d(0px, 0px, 0px)'
alert.style.opacity = '0';
alert.style.transition = '.35s ease';
setTimeout(function() {
alert.style.transform = 'translate3d(0px, 20px, 0px)';
const successful = document.execCommand("copy");
window.getSelection().removeAllRanges();
if (!el.parentElement.querySelector(".alert")) {
var alert = document.createElement("div");
alert.classList.add(
"alert",
"alert-success",
"position-absolute",
"top-0",
"border-0",
"text-white",
"w-25",
"end-0",
"start-0",
"mt-2",
"mx-auto",
"py-2"
);
alert.style.transform = "translate3d(0px, 0px, 0px)";
alert.style.opacity = "0";
alert.style.transition = ".35s ease";
setTimeout(function () {
alert.style.transform = "translate3d(0px, 20px, 0px)";
alert.style.setProperty("opacity", "1", "important");
}, 100);
alert.innerHTML = "Code successfully copied!";
el.parentElement.appendChild(alert);
setTimeout(function() {
alert.style.transform = 'translate3d(0px, 0px, 0px)'
setTimeout(function () {
alert.style.transform = "translate3d(0px, 0px, 0px)";
alert.style.setProperty("opacity", "0", "important");
}, 2000);
setTimeout(function() {
el.parentElement.querySelector('.alert').remove();
setTimeout(function () {
el.parentElement.querySelector(".alert").remove();
}, 2500);
}
}
// End copy code function
// End copy code function

View File

@ -7,10 +7,10 @@ defineProps({
logo: String,
route: "",
default: () => ({
name: "Material Kit 2 PRO",
name: "Material Kit 2",
logo: logoDark,
route: "/",
}),
route: "/"
})
},
socials: {
type: Array,
@ -19,25 +19,25 @@ defineProps({
default: () => [
{
icon: '<i class="fab fa-facebook text-lg opacity-8"></i>',
link: "https://www.facebook.com/CreativeTim/",
link: "https://www.facebook.com/CreativeTim/"
},
{
icon: '<i class="fab fa-twitter text-lg opacity-8"></i>',
link: "https://twitter.com/creativetim",
link: "https://twitter.com/creativetim"
},
{
icon: '<i class="fab fa-dribbble text-lg opacity-8"></i>',
link: "https://dribbble.com/creativetim",
link: "https://dribbble.com/creativetim"
},
{
icon: '<i class="fab fa-github text-lg opacity-8"></i>',
link: "https://github.com/creativetimofficial",
link: "https://github.com/creativetimofficial"
},
{
icon: '<i class="fab fa-youtube text-lg opacity-8"></i>',
link: "https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w",
},
],
link: "https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w"
}
]
},
menus: {
type: Array,
@ -45,7 +45,7 @@ defineProps({
items: {
type: Array,
name: String,
href: String,
href: String
},
default: () => [
{
@ -53,18 +53,18 @@ defineProps({
items: [
{
name: "about us",
href: "https://www.creative-tim.com/presentation",
href: "https://www.creative-tim.com/presentation"
},
{
name: "freebies",
href: "https://www.creative-tim.com/templates/free",
href: "https://www.creative-tim.com/templates/free"
},
{
name: "premium tools",
href: "https://www.creative-tim.com/templates/premium",
href: "https://www.creative-tim.com/templates/premium"
},
{ name: "blog", href: "https://www.creative-tim.com/blog" },
],
{ name: "blog", href: "https://www.creative-tim.com/blog" }
]
},
{
name: "resources",
@ -72,54 +72,54 @@ defineProps({
{ name: "illustrations", href: "https://iradesign.io/" },
{
name: "bits & snippets",
href: "https://www.creative-tim.com/bits",
href: "https://www.creative-tim.com/bits"
},
{
name: "affiliate program",
href: "https://www.creative-tim.com/affiliates/new",
},
],
href: "https://www.creative-tim.com/affiliates/new"
}
]
},
{
name: "help & support",
items: [
{
name: "contact us",
href: "https://www.creative-tim.com/contact-us",
href: "https://www.creative-tim.com/contact-us"
},
{
name: "knowledge center",
href: "https://www.creative-tim.com/knowledge-center",
href: "https://www.creative-tim.com/knowledge-center"
},
{
name: "custom development",
href: "https://services.creative-tim.com/",
href: "https://services.creative-tim.com/"
},
{
name: "sponsorships",
href: "https://www.creative-tim.com/sponsorships",
},
],
href: "https://www.creative-tim.com/sponsorships"
}
]
},
{
name: "legal",
items: [
{
name: "terms & conditions",
href: "https://www.creative-tim.com/terms",
href: "https://www.creative-tim.com/terms"
},
{
name: "privacy policy",
href: "https://www.creative-tim.com/privacy",
href: "https://www.creative-tim.com/privacy"
},
{
name: "licenses (EULA)",
href: "https://www.creative-tim.com/license",
},
],
},
],
},
href: "https://www.creative-tim.com/license"
}
]
}
]
}
});
</script>
<template>

View File

@ -120,7 +120,7 @@ watch(
title="Designed and Coded by Creative Tim"
data-placement="bottom"
>
Material Kit 2 PRO
Material Kit 2
</RouterLink>
<RouterLink
class="navbar-brand d-block d-md-none"
@ -789,7 +789,7 @@ watch(
<li class="nav-item list-group-item border-0 p-0">
<a
class="dropdown-item py-2 ps-3 border-radius-md"
href=" https://www.creative-tim.com/learning-lab/bootstrap/overview/material-kit "
href=" https://www.creative-tim.com/learning-lab/vue/overview/material-kit/"
>
<h6
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
@ -805,7 +805,7 @@ watch(
<li class="nav-item list-group-item border-0 p-0">
<a
class="dropdown-item py-2 ps-3 border-radius-md"
href=" https://www.creative-tim.com/learning-lab/bootstrap/colors/material-kit "
href=" https://www.creative-tim.com/learning-lab/vue/colors/material-kit/"
>
<h6
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
@ -820,7 +820,7 @@ watch(
<li class="nav-item list-group-item border-0 p-0">
<a
class="dropdown-item py-2 ps-3 border-radius-md"
href=" https://www.creative-tim.com/learning-lab/bootstrap/alerts/material-kit "
href=" https://www.creative-tim.com/learning-lab/vue/alerts/material-kit/"
>
<h6
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
@ -833,37 +833,6 @@ watch(
>
</a>
</li>
<li class="nav-item list-group-item border-0 p-0">
<a
class="dropdown-item py-2 ps-3 border-radius-md"
href=" https://www.creative-tim.com/learning-lab/bootstrap/datepicker/material-kit "
>
<h6
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
>
Plugins
</h6>
<span class="text-sm"
>Check how you can integrate our plugins</span
>
</a>
</li>
<li class="nav-item list-group-item border-0 p-0">
<a
class="dropdown-item py-2 ps-3 border-radius-md"
href=" https://www.creative-tim.com/learning-lab/bootstrap/utilities/material-kit "
>
<h6
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
>
Utility Classes
</h6>
<span class="text-sm"
>For those who want flexibility, use our utility
classes</span
>
</a>
</li>
</ul>
</div>
<div class="row d-lg-none">

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialAlert from "@/components/MaterialAlert.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
export const simpleAlertsCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialAlert from "@/components/MaterialAlert.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
export const simpleModalCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>

View File

@ -1,6 +1,6 @@
<script setup>
import { onMounted } from "vue";
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
// popover

View File

@ -1,6 +1,6 @@
<script setup>
import { onMounted } from "vue";
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
// popover

View File

@ -1,6 +1,6 @@
export const popoversCode = `<script setup>
import { onMounted } from "vue";
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
// popover
@ -68,7 +68,7 @@ onMounted(() => {
export const tooltipsCode = `<script setup>
import { onMounted } from "vue";
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
// popover

View File

@ -1,7 +1,7 @@
<script setup>
import { onMounted } from "vue";
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialAvatar from "@/components/MaterialAvatar.vue";
// images

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialAvatar from "@/components/MaterialAvatar.vue";
// image

View File

@ -1,7 +1,7 @@
export const avatarGroupCode = `<script setup>
import { onMounted } from "vue";
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialAvatar from "@/components/MaterialAvatar.vue";
// images
@ -71,7 +71,7 @@ onMounted(() => {
`;
export const avatarSizeCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialAvatar from "@/components/MaterialAvatar.vue";
// image

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialBadge from "@/components/MaterialBadge.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialBadge from "@/components/MaterialBadge.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialBadge from "@/components/MaterialBadge.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
export const badgesGradientCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialBadge from "@/components/MaterialBadge.vue";
</script>
<template>
@ -46,7 +46,7 @@ import MaterialBadge from "@/components/MaterialBadge.vue";
`;
export const badgesSimpleCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialBadge from "@/components/MaterialBadge.vue";
</script>
<template>
@ -79,7 +79,7 @@ import MaterialBadge from "@/components/MaterialBadge.vue";
`;
export const badgesRoundedCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialBadge from "@/components/MaterialBadge.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
export const buttonGroupsSimpleCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>
@ -20,7 +20,7 @@ import MaterialButton from "@/components/MaterialButton.vue";
`;
export const buttonGroupsOutlineCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>
@ -93,7 +93,7 @@ export const buttonGroupsRadioCode = `<script setup></script>
`;
export const buttonGroupsSizingCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
export const buttonsGradientCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>
@ -25,7 +25,7 @@ import MaterialButton from "@/components/MaterialButton.vue";
`;
export const buttonsContainedCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>
@ -87,7 +87,7 @@ import MaterialButton from "@/components/MaterialButton.vue";
`;
export const buttonsOutlinedCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>
@ -111,7 +111,7 @@ import MaterialButton from "@/components/MaterialButton.vue";
</template>`;
export const buttonsSizesCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>
@ -130,7 +130,7 @@ import MaterialButton from "@/components/MaterialButton.vue";
`;
export const buttonsIconLeftCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>
@ -167,7 +167,7 @@ import MaterialButton from "@/components/MaterialButton.vue";
`;
export const buttonsIconRightCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>

View File

@ -1,6 +1,6 @@
<script setup>
import { ref } from "vue";
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
let showDropdown = ref(false);

View File

@ -1,6 +1,6 @@
export const dropdownAndDropupCode = `<script setup>
import { ref } from "vue";
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
let showDropdown = ref(false);

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialProgress from "@/components/MaterialProgress.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
export const progressSimpleCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialProgress from "@/components/MaterialProgress.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialSwitch from "@/components/MaterialSwitch.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialSwitch from "@/components/MaterialSwitch.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
export const toggleCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialSwitch from "@/components/MaterialSwitch.vue";
</script>
<template>
@ -20,7 +20,7 @@ import MaterialSwitch from "@/components/MaterialSwitch.vue";
`;
export const toggleContextCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialSwitch from "@/components/MaterialSwitch.vue";
</script>
<template>

View File

@ -1,7 +1,7 @@
<script setup>
import { onMounted } from "vue";
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
import MaterialTextArea from "@/components/MaterialTextArea.vue";
import MaterialButton from "@/components/MaterialButton.vue";

View File

@ -1,5 +1,5 @@
export const formSimpleCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
import MaterialTextArea from "@/components/MaterialTextArea.vue";
import MaterialButton from "@/components/MaterialButton.vue";

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
export const inputStaticCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>
@ -21,7 +21,7 @@ import MaterialInput from "@/components/MaterialInput.vue";
`;
export const inputDynamicCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>
@ -42,7 +42,7 @@ import MaterialInput from "@/components/MaterialInput.vue";
`;
export const inputOutlinedCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>
@ -63,7 +63,7 @@ import MaterialInput from "@/components/MaterialInput.vue";
`;
export const inputIconCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>
@ -85,7 +85,7 @@ import MaterialInput from "@/components/MaterialInput.vue";
`;
export const inputSuccessCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>
@ -107,7 +107,7 @@ import MaterialInput from "@/components/MaterialInput.vue";
`;
export const inputErrorCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>
@ -124,7 +124,7 @@ import MaterialInput from "@/components/MaterialInput.vue";
`;
export const inputDisabledCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialPagination from "@/components/MaterialPagination.vue";
import MaterialPaginationItem from "@/components/MaterialPaginationItem.vue";
</script>

View File

@ -1,5 +1,5 @@
export const paginationSimpleCode = `<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialPagination from "@/components/MaterialPagination.vue";
import MaterialPaginationItem from "@/components/MaterialPaginationItem.vue";
</script>

View File

@ -1,5 +1,5 @@
<script setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
// image
@ -75,7 +75,7 @@ const bgImage =
<div
class="page-header min-vh-100"
:style="{
backgroundImage: `url(${bgImage})`,
backgroundImage: `url(${bgImage})`
}"
loading="lazy"
>

View File

@ -1,6 +1,6 @@
/* eslint-disable no-useless-escape */
export const header1Code = `<setup>
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
<\/script>
<template>

View File

@ -1,6 +1,6 @@
<script setup>
import { onMounted } from "vue";
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
import MaterialButton from "@/components/MaterialButton.vue";

View File

@ -1,6 +1,6 @@
<script setup>
import { onMounted } from "vue";
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue";
import MaterialInput from "@/components/MaterialInput.vue";
import MaterialTextArea from "@/components/MaterialTextArea.vue";

View File

@ -3,7 +3,7 @@
import TransparentBlogCard from "../../../../examples/cards/blogCards/TransparentBlogCard.vue";
import BackgroundBlogCard from "../../../../examples/cards/blogCards/BackgroundBlogCard.vue";
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import post1 from "@/assets/img/examples/testimonial-6-2.jpg";
import post2 from "@/assets/img/examples/testimonial-6-3.jpg";
import post3 from "@/assets/img/examples/blog-9-4.jpg";

View File

@ -1,7 +1,7 @@
<script setup>
import { onMounted } from "vue";
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialAvatar from "@/components/MaterialAvatar.vue";
import MaterialButton from "@/components/MaterialButton.vue";

View File

@ -5,7 +5,7 @@ import { onMounted } from "vue";
import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
import Header from "@/examples/Header.vue";
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue";
import MaterialSwitch from "@/components/MaterialSwitch.vue";
import MaterialButton from "@/components/MaterialButton.vue";
@ -23,7 +23,7 @@ onMounted(() => {
class="page-header align-items-start min-vh-100"
:style="{
backgroundImage:
'url(https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80)',
'url(https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80)'
}"
loading="lazy"
>

View File

@ -5,7 +5,7 @@
class="page-header py-6 py-md-5 my-sm-3 mb-3 border-radius-xl"
:style="{
backgroundImage:
'url(https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/desktop.jpg)',
'url(https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/desktop.jpg)'
}"
loading="lazy"
>
@ -21,7 +21,7 @@
create unlimited combinations for our components.
</p>
<a
href="https://www.creative-tim.com/learning-lab/bootstrap/overview/material-kit"
href="https://www.creative-tim.com/learning-lab/vue/overview/material-kit/"
class="text-white icon-move-right"
>
Read docs

View File

@ -7,7 +7,7 @@ import DefaultFooter from "../../examples/footers/FooterDefault.vue";
import Header from "../../examples/Header.vue";
import FilledInfoCard from "../../examples/cards/infoCards/FilledInfoCard.vue";
//Vue Material Kit 2 Pro components
//Vue Material Kit 2 components
import MaterialSocialButton from "@/components/MaterialSocialButton.vue";
// sections
@ -92,8 +92,8 @@ onUnmounted(() => {
description="Check the possible ways of working with our product and the necessary files for building your own project."
:action="{
route:
'https://www.creative-tim.com/learning-lab/bootstrap/overview/material-kit',
label: { text: 'Let\'s start', color: 'white' },
'https://www.creative-tim.com/learning-lab/vue/overview/material-kit/',
label: { text: 'Let\'s start', color: 'white' }
}"
/>
</div>
@ -107,8 +107,8 @@ onUnmounted(() => {
used to create the Material Kit."
:action="{
route:
'https://www.creative-tim.com/learning-lab/bootstrap/datepicker/material-kit',
label: { text: 'Read more' },
'https://www.creative-tim.com/learning-lab/vue/input/material-kit/',
label: { text: 'Read more' }
}"
/>
</div>
@ -121,8 +121,8 @@ onUnmounted(() => {
who want flexibility, we included many utility classes."
:action="{
route:
'https://www.creative-tim.com/learning-lab/bootstrap/utilities/material-kit',
label: { text: 'Read more' },
'https://www.creative-tim.com/learning-lab/vue/utilities/material-kit/',
label: { text: 'Read more' }
}"
/>
</div>
@ -133,13 +133,13 @@ onUnmounted(() => {
<div
class="container-fluid mt-sm-5 border-radius-xl"
:style="{
background: 'linear-gradient(195deg, rgb(66, 66, 74), rgb(25, 25, 25))',
background: 'linear-gradient(195deg, rgb(66, 66, 74), rgb(25, 25, 25))'
}"
>
<div
class="page-header py-6 py-md-5 my-sm-3 mb-3 border-radius-xl"
:style="{
backgroundImage: `url(${wavesWhite})`,
backgroundImage: `url(${wavesWhite})`
}"
loading="lazy"
>

View File

@ -1,6 +1,6 @@
/*
=========================================================
* Vue Material Kit 2 PRO - v1.0.0
* Vue Material Kit 2 - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vue-material-kit-pro
@ -40,100 +40,100 @@ export default [
title: "Page Headers",
subtitle: "10 Examples",
route: "page-headers",
pro: false,
pro: false
},
{
image: imgFeatures,
title: "Features",
subtitle: "14 Examples",
route: "page-features",
pro: false,
pro: false
},
{
image: imgPricing,
title: "Pricing",
subtitle: "8 Examples",
route: "presentation",
pro: true,
pro: true
},
{
image: `${imagesPrefix}/faq.jpg`,
title: "FAQ",
subtitle: "1 Example",
route: "presentation",
pro: true,
pro: true
},
{
image: imgBlogPosts,
title: "Blog Posts",
subtitle: "11 Examples",
route: "presentation",
pro: true,
pro: true
},
{
image: imgTestimonials,
title: "Testimonials",
subtitle: "11 Examples",
route: "presentation",
pro: true,
pro: true
},
{
image: imgTeam,
title: "Teams",
subtitle: "6 Examples",
route: "presentation",
pro: true,
pro: true
},
{
image: imgStat,
title: "Stats",
subtitle: "3 Examples",
route: "presentation",
pro: true,
pro: true
},
{
image: `${imagesPrefix}/call-to-action.jpg`,
title: "Call to Actions",
subtitle: "8 Examples",
route: "presentation",
pro: true,
pro: true
},
{
image: `${imagesPrefix}/projects.jpg`,
title: "Applications",
subtitle: "6 Examples",
route: "presentation",
pro: true,
pro: true
},
{
image: `${imagesPrefix}/logo-area.jpg`,
title: "Logo Areas",
subtitle: "4 Examples",
route: "presentation",
pro: true,
pro: true
},
{
image: `${imagesPrefix}/footers.jpg`,
title: "Footers",
subtitle: "10 Examples",
route: "presentation",
pro: true,
pro: true
},
{
image: `${imagesPrefix}/general-cards.jpg`,
title: "General Cards",
subtitle: "9 Examples",
route: "presentation",
pro: true,
pro: true
},
{
image: imgContent,
title: "Content Sections",
subtitle: "8 Examples",
route: "presentation",
pro: true,
},
],
pro: true
}
]
},
{
heading: "Navigation",
@ -144,23 +144,23 @@ export default [
title: "Navbars",
subtitle: "4 Examples",
route: "navigation-navbars",
pro: false,
pro: false
},
{
image: `${imagesPrefix}/nav-tabs.jpg`,
title: "Nav Tabs",
subtitle: "2 Nav Tabs",
route: "navigation-navtabs",
pro: false,
pro: false
},
{
image: imgPagination,
title: "Pagination",
subtitle: "3 Examples",
route: "navigation-pagination",
pro: false,
},
],
pro: false
}
]
},
{
heading: "Input Areas",
@ -172,30 +172,30 @@ export default [
title: "Newsletters",
subtitle: "6 Examples",
route: "presentation",
pro: true,
pro: true
},
{
image: `${imagesPrefix}/contact-sections.jpg`,
title: "Contact Sections",
subtitle: "8 Examples",
route: "presentation",
pro: true,
pro: true
},
{
image: `${imagesPrefix}/forms.jpg`,
title: "Forms",
subtitle: "3 Examples",
route: "inputareas-forms",
pro: false,
pro: false
},
{
image: `${imagesPrefix}/inputs.jpg`,
title: "Inputs",
subtitle: "6 Examples",
route: "inputareas-inputs",
pro: false,
},
],
pro: false
}
]
},
{
heading: "Attention Catchers",
@ -207,30 +207,30 @@ export default [
title: "Alerts",
subtitle: "4 Examples",
route: "ac-alerts",
pro: false,
pro: false
},
{
image: `${imagesPrefix}/toasts.jpg`,
title: "Notifications",
subtitle: "3 Examples",
route: "presentation",
pro: true,
pro: true
},
{
image: imgPopover,
title: "Tooltips & Popovers",
subtitle: "2 Examples",
route: "ac-tooltips-popovers",
pro: false,
pro: false
},
{
image: imgModal,
title: "Modals",
subtitle: "5 Examples",
route: "ac-modals",
pro: false,
},
],
pro: false
}
]
},
{
heading: "Elements",
@ -242,71 +242,71 @@ export default [
title: "Buttons",
subtitle: "6 Examples",
route: "el-buttons",
pro: false,
pro: false
},
{
image: `${imagesPrefix}/avatars.jpg`,
title: "Avatars",
subtitle: "2 Examples",
route: "el-avatars",
pro: false,
pro: false
},
{
image: imgDropdowns,
title: "Dropdowns",
subtitle: "2 Examples",
route: "el-dropdowns",
pro: false,
pro: false
},
{
image: `${imagesPrefix}/switch.jpg`,
title: "Toggles",
subtitle: "2 Examples",
route: "el-toggles",
pro: false,
pro: false
},
{
image: `${imagesPrefix}/social-buttons.jpg`,
title: "Social Buttons",
subtitle: "2 Examples",
route: "presentation",
pro: true,
pro: true
},
{
image: `${imagesPrefix}/breadcrumbs.jpg`,
title: "Breadcrumbs",
subtitle: "1 Example",
route: "el-breadcrumbs",
pro: false,
pro: false
},
{
image: `${imagesPrefix}/badges.jpg`,
title: "Badges",
subtitle: "3 Examples",
route: "el-badges",
pro: false,
pro: false
},
{
image: `${imagesPrefix}/progress.jpg`,
title: "Progress Bars",
subtitle: "4 Examples",
route: "el-progress-bars",
pro: false,
pro: false
},
{
image: `${imagesPrefix}/tables.jpg`,
title: "Tables",
subtitle: "3 Examples",
route: "presentation",
pro: true,
pro: true
},
{
image: `${imagesPrefix}/typography.jpg`,
title: "Typography",
subtitle: "2 Examples",
route: "el-typography",
pro: false,
},
],
},
pro: false
}
]
}
];