mirror of
https://github.com/bakateam/merakiui.git
synced 2025-12-08 14:43:23 +00:00
Add new components
This commit is contained in:
khatabwedaa
@@ -41,6 +41,10 @@ import AlertsErrorFullWidth from "./ui/Alerts/ErrorFullWidth";
|
||||
// Authentication
|
||||
import AuthenticationSimpleLogin from "./ui/Authentication/SimpleLogin";
|
||||
import AuthenticationLoginWithSideImage from "./ui/Authentication/LoginWithSideImage";
|
||||
// Buttons
|
||||
import ButtonsPrimary from "./ui/Buttons/Primary";
|
||||
import ButtonsWithIcon from "./ui/Buttons/WithIcon";
|
||||
import ButtonsWithMenu from "./ui/Buttons/WithMenu";
|
||||
// Cards
|
||||
import CardsArticle from "./ui/Cards/Article";
|
||||
import CardsArticleWithImage from "./ui/Cards/ArticleWithImage";
|
||||
@@ -51,16 +55,21 @@ import CardsSimpleProduct from "./ui/Cards/SimpleProduct";
|
||||
import CardsTestimonial from "./ui/Cards/Testimonial";
|
||||
import CardsUser from "./ui/Cards/User";
|
||||
import CardsUserWithDetails from "./ui/Cards/UserWithDetails";
|
||||
// Dropdowns
|
||||
import DropdownsSimple from "./ui/Dropdowns/Simple";
|
||||
import DropdownsNotification from "./ui/Dropdowns/Notification";
|
||||
// Forms
|
||||
import FormsNewsletter from "./ui/Forms/Newsletter";
|
||||
import FormsSimple from "./ui/Forms/Simple";
|
||||
// Navbars
|
||||
import NavbarsECommerce from "./ui/Navbars/ECommerce";
|
||||
import NavbarsWithAvatar from "./ui/Navbars/WithAvatar";
|
||||
import NavbarsWithCategories from "./ui/Navbars/WithCategories";
|
||||
import NavbarsWithSearch from "./ui/Navbars/WithSearch";
|
||||
// Heros
|
||||
import HerosECommerce from "./ui/Heros/ECommerce";
|
||||
import HerosWithImage from "./ui/Heros/WithImage";
|
||||
import HerosWithBGImage from "./ui/Heros/WithBGImage";
|
||||
import HerosWithPattern from "./ui/Heros/WithPattern";
|
||||
// Sections
|
||||
import SectionsAboutMe from "./ui/Sections/AboutMe";
|
||||
@@ -74,10 +83,6 @@ import FootersSimple from "./ui/Footers/Simple";
|
||||
import FootersWithDetails from "./ui/Footers/WithDetails";
|
||||
import FootersWithSubscribeForm from "./ui/Footers/WithSubscribeForm";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
import Component from "../models/ComponentsFilter";
|
||||
|
||||
export default {
|
||||
@@ -93,6 +98,9 @@ export default {
|
||||
AlertsErrorFullWidth,
|
||||
AuthenticationSimpleLogin,
|
||||
AuthenticationLoginWithSideImage,
|
||||
ButtonsPrimary,
|
||||
ButtonsWithIcon,
|
||||
ButtonsWithMenu,
|
||||
CardsArticle,
|
||||
CardsArticleWithImage,
|
||||
CardsArticleWithSMIcons,
|
||||
@@ -102,13 +110,17 @@ export default {
|
||||
CardsTestimonial,
|
||||
CardsUser,
|
||||
CardsUserWithDetails,
|
||||
DropdownsSimple,
|
||||
DropdownsNotification,
|
||||
FormsNewsletter,
|
||||
FormsSimple,
|
||||
NavbarsECommerce,
|
||||
NavbarsWithAvatar,
|
||||
NavbarsWithCategories,
|
||||
NavbarsWithSearch,
|
||||
HerosECommerce,
|
||||
HerosWithImage,
|
||||
HerosWithBGImage,
|
||||
HerosWithPattern,
|
||||
SectionsAboutMe,
|
||||
SectionsFeature,
|
||||
|
||||
23
src/components/ui/Buttons/Primary.vue
Normal file
23
src/components/ui/Buttons/Primary.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-8 flex items-center justify-center" slot="component">
|
||||
<button class="flex items-center py-2 px-4 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
|
||||
Primary
|
||||
</button>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Primary',
|
||||
code: `
|
||||
<button class="flex items-center py-2 px-4 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
|
||||
Primary
|
||||
</button>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
29
src/components/ui/Buttons/WithIcon.vue
Normal file
29
src/components/ui/Buttons/WithIcon.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 py-6 flex items-center justify-center" slot="component">
|
||||
<button class="flex items-center py-2 px-2 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
|
||||
<svg class="h-5 w-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="mx-1">Refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'With Icon',
|
||||
code: `
|
||||
<button class="flex items-center py-2 px-2 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
|
||||
<svg class="h-5 w-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="mx-1">Refresh</span>
|
||||
</button>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
58
src/components/ui/Buttons/WithMenu.vue
Normal file
58
src/components/ui/Buttons/WithMenu.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 pt-6 pb-40 flex justify-center" slot="component">
|
||||
<div class="flex items-center">
|
||||
<button class="py-2 px-4 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Download</button>
|
||||
|
||||
<span class="border"></span>
|
||||
|
||||
<div class="relative">
|
||||
<button @click="menuOpen = !menuOpen" class="relative z-10 block bg-gray-800 rounded p-2 hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div v-show="menuOpen" class="absolute right-0 mt-2 w-48 bg-white rounded-md overflow-hidden shadow-xl z-20">
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">small <span class="text-gray-600">(640x426)</span></a>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">medium <span class="text-gray-600">(1920x1280)</span></a>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">large <span class="text-gray-600">(2400x1600)</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'With Menu',
|
||||
code: `
|
||||
<div class="flex items-center">
|
||||
<button class="py-2 px-4 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Download</button>
|
||||
|
||||
<span class="border"></span>
|
||||
|
||||
<div class="relative">
|
||||
<!-- Menu toggle button -->
|
||||
<button class="relative z-10 block bg-gray-800 rounded p-2 hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Menu list -->
|
||||
<div class="absolute right-0 mt-2 w-48 bg-white rounded-md overflow-hidden shadow-xl z-20">
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">small <span class="text-gray-600">(640x426)</span></a>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">medium <span class="text-gray-600">(1920x1280)</span></a>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">large <span class="text-gray-600">(2400x1600)</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
menuOpen: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
96
src/components/ui/Dropdowns/Notification.vue
Normal file
96
src/components/ui/Dropdowns/Notification.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 pt-6 pb-96 flex justify-end md:justify-center" slot="component">
|
||||
<div class="relative">
|
||||
<!-- Dropdown toggle button -->
|
||||
<button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block rounded-md bg-white p-2 focus:outline-none">
|
||||
<svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<div v-show="dropdownOpen" class="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg overflow-hidden z-20">
|
||||
<div class="py-2">
|
||||
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
|
||||
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
|
||||
<p class="text-gray-600 text-sm mx-2">
|
||||
<span class="font-bold" href="#">Sara Salah</span> replied on the <span class="font-bold text-blue-500" href="#">Upload Image</span> artical . 2m
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
|
||||
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="avatar">
|
||||
<p class="text-gray-600 text-sm mx-2">
|
||||
<span class="font-bold" href="#">Slick Net</span> start following you . 45m
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
|
||||
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
|
||||
<p class="text-gray-600 text-sm mx-2">
|
||||
<span class="font-bold" href="#">Jane Doe</span> Like Your reply on <span class="font-bold text-blue-500" href="#">Test with TDD</span> artical . 1h
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 -mx-2">
|
||||
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=398&q=80" alt="avatar">
|
||||
<p class="text-gray-600 text-sm mx-2">
|
||||
<span class="font-bold" href="#">Abigail Bennett</span> start following you . 3h
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<a href="#" class="block bg-gray-800 text-white text-center font-bold py-2">See all notifications</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Notification',
|
||||
code: `
|
||||
<div class="relative">
|
||||
<!-- Dropdown toggle button -->
|
||||
<button class="relative z-10 block rounded-md bg-white p-2 focus:outline-none">
|
||||
<svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<div class="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg overflow-hidden z-20">
|
||||
<div class="py-2">
|
||||
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
|
||||
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
|
||||
<p class="text-gray-600 text-sm mx-2">
|
||||
<span class="font-bold" href="#">Sara Salah</span> replied on the <span class="font-bold text-blue-500" href="#">Upload Image</span> artical . 2m
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
|
||||
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="avatar">
|
||||
<p class="text-gray-600 text-sm mx-2">
|
||||
<span class="font-bold" href="#">Slick Net</span> start following you . 45m
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
|
||||
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
|
||||
<p class="text-gray-600 text-sm mx-2">
|
||||
<span class="font-bold" href="#">Jane Doe</span> Like Your reply on <span class="font-bold text-blue-500" href="#">Test with TDD</span> artical . 1h
|
||||
</p>
|
||||
</a>
|
||||
<a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 -mx-2">
|
||||
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=398&q=80" alt="avatar">
|
||||
<p class="text-gray-600 text-sm mx-2">
|
||||
<span class="font-bold" href="#">Abigail Bennett</span> start following you . 3h
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<a href="#" class="block bg-gray-800 text-white text-center font-bold py-2">See all notifications</a>
|
||||
</div>
|
||||
</div>`,
|
||||
dropdownOpen: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
72
src/components/ui/Dropdowns/Simple.vue
Normal file
72
src/components/ui/Dropdowns/Simple.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="px-3 pt-6 pb-56 flex justify-end sm:justify-center" slot="component">
|
||||
<div class="relative">
|
||||
<!-- Dropdown toggle button -->
|
||||
<button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block rounded-md bg-white p-2 focus:outline-none">
|
||||
<svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<div v-show="dropdownOpen" class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-20">
|
||||
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
|
||||
your profile
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
|
||||
Your projects
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
|
||||
Help
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
|
||||
Settings
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
|
||||
Sign Out
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Simple',
|
||||
code: `
|
||||
<div class="relative">
|
||||
<!-- Dropdown toggle button -->
|
||||
<button class="relative z-10 block rounded-md bg-white p-2 focus:outline-none">
|
||||
<svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<div class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-20">
|
||||
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
|
||||
your profile
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
|
||||
Your projects
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
|
||||
Help
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
|
||||
Settings
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
|
||||
Sign Out
|
||||
</a>
|
||||
</div>
|
||||
</div>`,
|
||||
dropdownOpen: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
94
src/components/ui/Heros/WithBGImage.vue
Normal file
94
src/components/ui/Heros/WithBGImage.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<header>
|
||||
<nav class="bg-white shadow">
|
||||
<div class="container mx-auto px-6 py-3 ">
|
||||
<div class="md:flex md:items-center md:justify-between">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-xl font-semibold text-gray-700">
|
||||
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
|
||||
</div>
|
||||
|
||||
<div @click="isOpen = !isOpen" class="flex md:hidden">
|
||||
<button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="!isOpen ? 'hidden' : ''" class="-mx-4 md:flex md:items-center">
|
||||
<a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Web developers</a>
|
||||
<a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Web Designers</a>
|
||||
<a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">UI/UX Designers</a>
|
||||
<a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="h-128 w-full bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);">
|
||||
<div class="flex items-center justify-center h-full w-full bg-gray-900 bg-opacity-50">
|
||||
<div class="text-center">
|
||||
<h1 class="text-white text-2xl font-semibold uppercase md:text-3xl">Build Your new <span class="underline text-blue-400">Saas</span></h1>
|
||||
<button class="mt-4 px-4 py-2 bg-blue-600 text-white text-sm uppercase font-medium rounded hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'With Background Image',
|
||||
isOpen: false,
|
||||
code: `
|
||||
<header>
|
||||
<nav class="bg-white shadow">
|
||||
<div class="container mx-auto px-6 py-3 ">
|
||||
<div class="md:flex md:items-center md:justify-between">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-xl font-semibold text-gray-700">
|
||||
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="hidden -mx-4 md:flex md:items-center">
|
||||
<a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Web developers</a>
|
||||
<a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Web Designers</a>
|
||||
<a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">UI/UX Designers</a>
|
||||
<a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="h-128 w-full bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);">
|
||||
<div class="flex items-center justify-center h-full w-full bg-gray-900 bg-opacity-50">
|
||||
<div class="text-center">
|
||||
<h1 class="text-white text-2xl font-semibold uppercase md:text-3xl">Build Your new <span class="underline text-blue-400">Saas</span></h1>
|
||||
<button class="mt-4 px-4 py-2 bg-blue-600 text-white text-sm uppercase font-medium rounded hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>`,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
169
src/components/ui/Navbars/WithCategories.vue
Normal file
169
src/components/ui/Navbars/WithCategories.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<nav class="bg-white shadow">
|
||||
<div class="container mx-auto px-6 py-3">
|
||||
<div class="flex flex-col md:flex-row md:justify-between md:items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a>
|
||||
|
||||
<!-- Search input on desktop screen -->
|
||||
<div class="mx-10 hidden md:block">
|
||||
<input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 border border-transparent focus:outline-none focus:bg-white focus:shadow-outline focus:border-blue-400" placeholder="Search" aria-label="Search">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="md:flex items-center" :class="isOpen ? 'block' : 'hidden'">
|
||||
<div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
|
||||
<a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Home</a>
|
||||
<a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
|
||||
<a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
|
||||
<a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center py-2 -mx-1 md:mx-0">
|
||||
<a class="block w-1/2 px-3 py-2 mx-1 rounded text-center text-sm bg-gray-500 font-medium text-white leading-5 hover:bg-blue-600 md:mx-2 md:w-auto" href="#">Login</a>
|
||||
<a class="block w-1/2 px-3 py-2 mx-1 rounded text-center text-sm bg-blue-500 font-medium text-white leading-5 hover:bg-blue-600 md:mx-0 md:w-auto" href="#">Join free</a>
|
||||
</div>
|
||||
|
||||
<!-- Search input on mobile screen -->
|
||||
<div class="mt-3 md:hidden">
|
||||
<input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 focus:outline-none focus:bg-white focus:shadow-outline" placeholder="Search" aria-label="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-no-wrap scroll-hidden">
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">News</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Articles</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Videos</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Tricks</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHP</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Laravel</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Vue</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">React</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Tailwindcss</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Meraki UI</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">CPP</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">JavaScript</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Ruby</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Mysql</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Pest</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHPUnit</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Netlify</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">VS Code</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHPStorm</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Sublime</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'With Categories',
|
||||
isOpen: false,
|
||||
code: `
|
||||
<!-- Require css -->
|
||||
<style>
|
||||
.scroll-hidden::-webkit-scrollbar {
|
||||
height: 0px;
|
||||
background: transparent; /* make scrollbar transparent */
|
||||
}
|
||||
</style>
|
||||
|
||||
<nav class="bg-white shadow">
|
||||
<div class="container mx-auto px-6 py-3">
|
||||
<div class="flex flex-col md:flex-row md:justify-between md:items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a>
|
||||
|
||||
<!-- Search input on desktop screen -->
|
||||
<div class="mx-10 hidden md:block">
|
||||
<input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 border border-transparent focus:outline-none focus:bg-white focus:shadow-outline focus:border-blue-400" placeholder="Search" aria-label="Search">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex md:hidden">
|
||||
<button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="hidden md:flex items-center">
|
||||
<div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
|
||||
<a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Home</a>
|
||||
<a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
|
||||
<a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
|
||||
<a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center py-2 -mx-1 md:mx-0">
|
||||
<a class="block w-1/2 px-3 py-2 mx-1 rounded text-center text-sm bg-gray-500 font-medium text-white leading-5 hover:bg-blue-600 md:mx-2 md:w-auto" href="#">Login</a>
|
||||
<a class="block w-1/2 px-3 py-2 mx-1 rounded text-center text-sm bg-blue-500 font-medium text-white leading-5 hover:bg-blue-600 md:mx-0 md:w-auto" href="#">Join free</a>
|
||||
</div>
|
||||
|
||||
<!-- Search input on mobile screen -->
|
||||
<div class="mt-3 md:hidden">
|
||||
<input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 focus:outline-none focus:bg-white focus:shadow-outline" placeholder="Search" aria-label="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-no-wrap scroll-hidden">
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">News</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Articles</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Videos</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Tricks</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHP</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Laravel</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Vue</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">React</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Tailwindcss</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Meraki UI</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">CPP</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">JavaScript</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Ruby</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Mysql</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Pest</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHPUnit</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Netlify</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">VS Code</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHPStorm</a>
|
||||
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Sublime</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>`,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.scroll-hidden::-webkit-scrollbar {
|
||||
height: 0px;
|
||||
background: transparent; /* make scrollbar transparent */
|
||||
}
|
||||
</style>
|
||||
@@ -35,7 +35,7 @@
|
||||
|
||||
<transition name="fade">
|
||||
<div v-if="copied">
|
||||
<div class="w-full h-full absolute top-0 left-0 z-10">
|
||||
<div class="w-full h-full absolute top-0 left-0 z-50">
|
||||
<div class="bg-gray-300 h-full flex items-center justify-center">
|
||||
<p class="text-gray-700 text-2xl">Copied!</p>
|
||||
</div>
|
||||
|
||||
@@ -17,6 +17,14 @@ export default [
|
||||
name: "Authentication",
|
||||
components: [{ name: "SimpleLogin" }, { name: "LoginWithSideImage" }],
|
||||
},
|
||||
{
|
||||
name: 'Buttons',
|
||||
components: [
|
||||
{ name: "Primary" },
|
||||
{ name: "WithIcon" },
|
||||
{ name: "WithMenu" }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Cards",
|
||||
components: [
|
||||
@@ -35,12 +43,17 @@ export default [
|
||||
name: "Forms",
|
||||
components: [{ name: "Simple" }, { name: "Newsletter" }],
|
||||
},
|
||||
{
|
||||
name: "Dropdowns",
|
||||
components: [{ name: "Simple" }, { name: "Notification" }],
|
||||
},
|
||||
{
|
||||
name: "Navbars",
|
||||
components: [
|
||||
{ name: "ECommerce" },
|
||||
{ name: "WithSearch" },
|
||||
{ name: "WithAvatar" },
|
||||
{ name: "WithCategories" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -48,6 +61,7 @@ export default [
|
||||
components: [
|
||||
{ name: "ECommerce" },
|
||||
{ name: "WithImage" },
|
||||
{ name: "WithBGImage" },
|
||||
{ name: "WithPattern" },
|
||||
],
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user