feat: Added footer component (#190)
* feat: Added footer component (#126) * add/prepare component files * make footer component basic * improve FooterCopyright component * add FooterLink component * add/add FooterBrand Component * add vertival align to FooterListGroup * add/add footer icon component * add/add FooterSitemapExample * add/FooterSitemapLinks remained part * add/add example --------- Co-authored-by: Ilya Artamonov <hire@ilya-artamonov.ru> * feat: Reworked footer component * docs: Updated components section in README.md --------- Co-authored-by: hirakei1203 <56023847+hirakei1203@users.noreply.github.com>
This commit is contained in:
Ilya Artamonov
GitHub
@@ -1,6 +1,6 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
trailingComma: 'es5',
|
|
||||||
semi: false,
|
semi: false,
|
||||||
singleQuote: true,
|
singleQuote: true,
|
||||||
printWidth: 200,
|
printWidth: 200,
|
||||||
|
trailingComma: 'all',
|
||||||
}
|
}
|
||||||
|
|||||||
12
README.md
12
README.md
@@ -237,7 +237,7 @@ module.exports = {
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">:construction: Footer</td>
|
<td width="33.3333%">Footer</td>
|
||||||
<td width="33.3333%">Accordion</td>
|
<td width="33.3333%">Accordion</td>
|
||||||
<td width="33.3333%">:construction: Sidebar</td>
|
<td width="33.3333%">:construction: Sidebar</td>
|
||||||
</tr>
|
</tr>
|
||||||
@@ -281,8 +281,8 @@ module.exports = {
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">:construction: Input Field</td>
|
<td width="33.3333%">Input Field</td>
|
||||||
<td width="33.3333%">:construction: File Input</td>
|
<td width="33.3333%">File Input</td>
|
||||||
<td width="33.3333%">:construction: Search Input</td>
|
<td width="33.3333%">:construction: Search Input</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -304,7 +304,7 @@ module.exports = {
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">Select</td>
|
<td width="33.3333%">Select</td>
|
||||||
<td width="33.3333%">:construction: Textarea</td>
|
<td width="33.3333%">Textarea</td>
|
||||||
<td width="33.3333%">Checkbox</td>
|
<td width="33.3333%">Checkbox</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -325,9 +325,9 @@ module.exports = {
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">:construction: Radio</td>
|
<td width="33.3333%">Radio</td>
|
||||||
<td width="33.3333%">Toggle</td>
|
<td width="33.3333%">Toggle</td>
|
||||||
<td width="33.3333%">:construction: Range Slider</td>
|
<td width="33.3333%">Range Slider</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
|
|||||||
@@ -38,6 +38,7 @@ function getComponents() {
|
|||||||
{ text: 'Card', link: 'components/card.md' },
|
{ text: 'Card', link: 'components/card.md' },
|
||||||
{ text: 'Carousel', link: 'components/carousel' },
|
{ text: 'Carousel', link: 'components/carousel' },
|
||||||
{ text: 'Dropdown', link: '/components/dropdown' },
|
{ text: 'Dropdown', link: '/components/dropdown' },
|
||||||
|
{ text: 'Footer', link: 'components/footer' },
|
||||||
{ text: 'Pagination', link: 'components/pagination' },
|
{ text: 'Pagination', link: 'components/pagination' },
|
||||||
{ text: 'Progress', link: 'components/progress' },
|
{ text: 'Progress', link: 'components/progress' },
|
||||||
{ text: 'Rating', link: 'components/rating' },
|
{ text: 'Rating', link: 'components/rating' },
|
||||||
@@ -50,8 +51,7 @@ function getComponents() {
|
|||||||
{ text: 'Tooltip', link: 'components/tooltip' },
|
{ text: 'Tooltip', link: 'components/tooltip' },
|
||||||
{ text: 'Modal', link: 'components/modal' },
|
{ text: 'Modal', link: 'components/modal' },
|
||||||
{ text: 'Navbar', link: 'components/navbar' },
|
{ text: 'Navbar', link: 'components/navbar' },
|
||||||
|
{ text: 'Footer', link: 'components/footer' },
|
||||||
{ text: '- Footer', link: 'components/footer' },
|
|
||||||
{ text: '- Sidebar', link: 'components/sidebar' },
|
{ text: '- Sidebar', link: 'components/sidebar' },
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,15 +1,279 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import FooterExample from './footer/examples/FooterExample.vue'
|
import FooterExample from './footer/examples/FooterExample.vue'
|
||||||
|
import FooterWithLogoExample from './footer/examples/FooterWithLogoExample.vue'
|
||||||
|
import FooterSocialMediaIconsExample from './footer/examples/FooterSocialMediaIconsExample.vue'
|
||||||
|
import FooterSitemapLinksExample from './footer/examples/FooterSitemapLinksExample.vue'
|
||||||
|
import StickyFooterExample from './footer/examples/StickyFooterExample.vue'
|
||||||
</script>
|
</script>
|
||||||
# Vue Footer - Flowbite
|
# Vue Footer - Flowbite
|
||||||
|
#### Use the footer section at the bottom of every page to show valuable information to your users, such as sitemap links, a copyright notice, and a logo
|
||||||
|
|
||||||
|
The footer is one of the most underestimated sections of a website being located at the very bottom of every page, however, it can be used as a way to try to convince users to stay on your website if they haven’t found the information they’ve been looking for inside the main content area.
|
||||||
|
|
||||||
|
## Default footer
|
||||||
|
Use this footer component to show a copyright notice and some helpful website links.
|
||||||
|
|
||||||
|
<FooterExample />
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Footer } from 'flowbite-vue'
|
import { Footer, FooterCopyright, FooterLinkGroup, FooterLink } from 'flowbite-vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Footer></Footer>
|
<Footer>
|
||||||
|
<FooterCopyright by="Flowbite™" href="https://flowbite.com/" copyright-message="All Rights Reserved." />
|
||||||
|
<FooterLinkGroup>
|
||||||
|
<FooterLink href="#"> About </FooterLink>
|
||||||
|
<FooterLink href="#"> Privacy Policy </FooterLink>
|
||||||
|
<FooterLink href="#"> Licensing </FooterLink>
|
||||||
|
<FooterLink href="#"> Contact </FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</Footer>
|
||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
|
|
||||||
<FooterExample />
|
## Footer with logo
|
||||||
|
Use this component to show your brand’s logo, a few website links and the copyright notice on a second row.
|
||||||
|
<FooterWithLogoExample />
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterBrand } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Footer footer-type="logo">
|
||||||
|
<div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
|
||||||
|
<div class="sm:flex sm:items-center sm:justify-between">
|
||||||
|
<FooterBrand href="https://flowbite.com" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" name="Flowbite" />
|
||||||
|
<FooterLinkGroup class="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
|
||||||
|
<FooterLink href="/">About</FooterLink>
|
||||||
|
<FooterLink href="/">Privacy Policy</FooterLink>
|
||||||
|
<FooterLink href="/">Licensing</FooterLink>
|
||||||
|
<FooterLink href="/">Contact</FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</div>
|
||||||
|
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
|
||||||
|
<FooterCopyright href="/" by="Flowbite™" />
|
||||||
|
</div>
|
||||||
|
</Footer>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Social media icons
|
||||||
|
This footer component can be used to show your brand’s logo, multiple rows of website links, a copyright notice and social media profile icons including Twitter, Facebook, Instagram, and more.
|
||||||
|
<FooterSocialMediaIconsExample />
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterBrand, FooterIcon } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Footer footer-type="socialmedia">
|
||||||
|
<div class="md:flex md:justify-between">
|
||||||
|
<FooterBrand href="https://flowbite.com" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" name="Flowbite" />
|
||||||
|
<div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
|
||||||
|
<div>
|
||||||
|
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Resources</h2>
|
||||||
|
<FooterLinkGroup class="flex flex-col items-start">
|
||||||
|
<FooterLink class="mb-4" href="/">Flowbite</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Tailwind CSS</FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">Follow us</h2>
|
||||||
|
<FooterLinkGroup class="flex flex-col items-start">
|
||||||
|
<FooterLink class="mb-4" href="/">GitHub</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Discord</FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">Legal</h2>
|
||||||
|
<FooterLinkGroup class="flex flex-col items-start">
|
||||||
|
<FooterLink class="mb-4" href="/">Privacy Policy</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Terms & Conditions</FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
|
||||||
|
<div class="sm:flex sm:items-center sm:justify-between">
|
||||||
|
<FooterCopyright href="/" by="Flowbite™" />
|
||||||
|
<div class="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
|
||||||
|
<FooterIcon href="/">
|
||||||
|
<svg class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
<FooterIcon href="/">
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 21 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
<FooterIcon href="/">
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 17"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
<FooterIcon href="/">
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
<FooterIcon href="/">
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Footer>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Sitemap links
|
||||||
|
If you have a website with many pages you can use this footer component to show a sitemap spanning the entire width of a row followed below by a copyright notice and social media icons.
|
||||||
|
|
||||||
|
<FooterSitemapLinksExample />
|
||||||
|
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterIcon } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Footer footer-type="sitemap">
|
||||||
|
<div class="grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4">
|
||||||
|
<div>
|
||||||
|
<h2 class="mb-6 text-sm font-semibold text-gray-400 uppercase">Company</h2>
|
||||||
|
<FooterLinkGroup class="text-gray-300 flex flex-col items-start">
|
||||||
|
<FooterLink class="mb-4" href="/">About</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Careers</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Brand Center</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Blog</FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Download</h2>
|
||||||
|
<FooterLinkGroup class="text-gray-300 flex flex-col items-start">
|
||||||
|
<FooterLink class="mb-4" href="/">Discord Server</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Twitter</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Facebook</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Contact Us</FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Legal</h2>
|
||||||
|
<FooterLinkGroup class="text-gray-300 flex flex-col items-start">
|
||||||
|
<FooterLink class="mb-4" href="/">Privacy Policy</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Licensing</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Terms & Conditions</FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Download</h2>
|
||||||
|
<FooterLinkGroup class="text-gray-300 flex flex-col items-start">
|
||||||
|
<FooterLink class="mb-4" href="/">iOS</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Android</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Windows</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">MacOS</FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="py-6 px-4 bg-gray-700 md:flex md:items-center md:justify-between">
|
||||||
|
<FooterCopyright class="text-sm text-gray-300 sm:text-center" href="/" by="Flowbite™" />
|
||||||
|
<div class="flex mt-4 space-x-6 sm:justify-center md:mt-0">
|
||||||
|
<FooterIcon href="/" sr-text="Facebook page">
|
||||||
|
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 8 19">
|
||||||
|
<path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
<FooterIcon href="/" sr-text="Discord community">
|
||||||
|
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 21 16">
|
||||||
|
<path
|
||||||
|
d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
<FooterIcon href="/" sr-text="Twitter page">
|
||||||
|
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 17">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
<FooterIcon href="/" sr-text="GitHub account">
|
||||||
|
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
<FooterIcon href="/" sr-text="Dribbble account">
|
||||||
|
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Footer>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Sticky footer
|
||||||
|
Use this example to set create a sticky footer by using a fixed position to the bottom of the document page as the user scrolls up or down the main content area.
|
||||||
|
|
||||||
|
<StickyFooterExample />
|
||||||
|
|||||||
@@ -1,8 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="vp-raw flex flex-col">
|
<div class="vp-raw">
|
||||||
<Footer></Footer>
|
<Footer>
|
||||||
|
<FooterCopyright by="Flowbite™" href="https://flowbite.com/" copyright-message="All Rights Reserved." />
|
||||||
|
<FooterLinkGroup>
|
||||||
|
<FooterLink href="#"> About </FooterLink>
|
||||||
|
<FooterLink href="#"> Privacy Policy </FooterLink>
|
||||||
|
<FooterLink href="#"> Licensing </FooterLink>
|
||||||
|
<FooterLink href="#"> Contact </FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</Footer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Footer } from '../../../../src/index'
|
import { Footer, FooterCopyright, FooterLinkGroup, FooterLink } from '../../../../src/index'
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw">
|
||||||
|
<Footer footer-type="sitemap">
|
||||||
|
<div class="grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4">
|
||||||
|
<div>
|
||||||
|
<h2 class="mb-6 text-sm font-semibold text-gray-400 uppercase">Company</h2>
|
||||||
|
<FooterLinkGroup class="text-gray-300 flex flex-col items-start">
|
||||||
|
<FooterLink class="mb-4" href="/">About</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Careers</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Brand Center</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Blog</FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Download</h2>
|
||||||
|
<FooterLinkGroup class="text-gray-300 flex flex-col items-start">
|
||||||
|
<FooterLink class="mb-4" href="/">Discord Server</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Twitter</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Facebook</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Contact Us</FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Legal</h2>
|
||||||
|
<FooterLinkGroup class="text-gray-300 flex flex-col items-start">
|
||||||
|
<FooterLink class="mb-4" href="/">Privacy Policy</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Licensing</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Terms & Conditions</FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Download</h2>
|
||||||
|
<FooterLinkGroup class="text-gray-300 flex flex-col items-start">
|
||||||
|
<FooterLink class="mb-4" href="/">iOS</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Android</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Windows</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">MacOS</FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="py-6 px-4 bg-gray-700 md:flex md:items-center md:justify-between">
|
||||||
|
<FooterCopyright class="text-sm text-gray-300 sm:text-center" href="/" by="Flowbite™" />
|
||||||
|
<div class="flex mt-4 space-x-6 sm:justify-center md:mt-0">
|
||||||
|
<FooterIcon href="/" sr-text="Facebook page">
|
||||||
|
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 8 19">
|
||||||
|
<path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
<FooterIcon href="/" sr-text="Discord community">
|
||||||
|
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 21 16">
|
||||||
|
<path
|
||||||
|
d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
<FooterIcon href="/" sr-text="Twitter page">
|
||||||
|
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 17">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
<FooterIcon href="/" sr-text="GitHub account">
|
||||||
|
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
<FooterIcon href="/" sr-text="Dribbble account">
|
||||||
|
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Footer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterIcon } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,110 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw w-full">
|
||||||
|
<Footer footer-type="socialmedia">
|
||||||
|
<div class="md:flex md:justify-between">
|
||||||
|
<FooterBrand href="https://flowbite.com" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" name="Flowbite" />
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
|
||||||
|
<div>
|
||||||
|
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Resources</h2>
|
||||||
|
<FooterLinkGroup class="flex flex-col items-start">
|
||||||
|
<FooterLink class="mb-4" href="/">Flowbite</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Tailwind CSS</FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">Follow us</h2>
|
||||||
|
<FooterLinkGroup class="flex flex-col items-start">
|
||||||
|
<FooterLink class="mb-4" href="/">GitHub</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Discord</FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">Legal</h2>
|
||||||
|
<FooterLinkGroup class="flex flex-col items-start">
|
||||||
|
<FooterLink class="mb-4" href="/">Privacy Policy</FooterLink>
|
||||||
|
<FooterLink class="mb-4" href="/">Terms & Conditions</FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
|
||||||
|
<div class="sm:flex sm:items-center sm:justify-between">
|
||||||
|
<FooterCopyright href="/" by="Flowbite™" />
|
||||||
|
<div class="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
|
||||||
|
<FooterIcon href="/">
|
||||||
|
<svg class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
<FooterIcon href="/">
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 21 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
<FooterIcon href="/">
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 17"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
<FooterIcon href="/">
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
<FooterIcon href="/">
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</FooterIcon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Footer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterBrand, FooterIcon } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
23
docs/components/footer/examples/FooterWithLogoExample.vue
Normal file
23
docs/components/footer/examples/FooterWithLogoExample.vue
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw">
|
||||||
|
<Footer footer-type="logo">
|
||||||
|
<div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
|
||||||
|
<div class="sm:flex sm:items-center sm:justify-between">
|
||||||
|
<FooterBrand href="https://flowbite.com" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" name="Flowbite" />
|
||||||
|
<FooterLinkGroup class="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
|
||||||
|
<FooterLink href="/">About</FooterLink>
|
||||||
|
<FooterLink href="/">Privacy Policy</FooterLink>
|
||||||
|
<FooterLink href="/">Licensing</FooterLink>
|
||||||
|
<FooterLink href="/">Contact</FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</div>
|
||||||
|
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
|
||||||
|
<FooterCopyright href="/" by="Flowbite™" />
|
||||||
|
</div>
|
||||||
|
</Footer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterBrand } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
18
docs/components/footer/examples/StickyFooterExample.vue
Normal file
18
docs/components/footer/examples/StickyFooterExample.vue
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw relative">
|
||||||
|
<div style="height: 300px" class="overflow-scroll pb-16 pt-4 px-4 bg-white dark:bg-gray-900">Some content</div>
|
||||||
|
<Footer sticky class="rounded-none">
|
||||||
|
<FooterCopyright by="Flowbite™" href="https://flowbite.com/" copyright-message="All Rights Reserved." />
|
||||||
|
<FooterLinkGroup>
|
||||||
|
<FooterLink href="#"> About </FooterLink>
|
||||||
|
<FooterLink href="#"> Privacy Policy </FooterLink>
|
||||||
|
<FooterLink href="#"> Licensing </FooterLink>
|
||||||
|
<FooterLink href="#"> Contact </FooterLink>
|
||||||
|
</FooterLinkGroup>
|
||||||
|
</Footer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { Footer, FooterCopyright, FooterLinkGroup, FooterLink } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
687
package-lock.json
generated
687
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -39,7 +39,7 @@
|
|||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"tailwindcss": "^3",
|
"tailwindcss": "^3",
|
||||||
"vue": "^3.2.41"
|
"vue": "^3.3.x"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/lodash-es": "4.17.6",
|
"@types/lodash-es": "4.17.6",
|
||||||
|
|||||||
@@ -1,42 +1,32 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { useAttrs } from 'vue'
|
||||||
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
})
|
||||||
|
type FooterType = 'sitemap' | 'default' | 'logo' | 'socialmedia'
|
||||||
|
interface IFooterProps {
|
||||||
|
sticky?: boolean
|
||||||
|
footerType?: FooterType
|
||||||
|
}
|
||||||
|
const props = withDefaults(defineProps<IFooterProps>(), {
|
||||||
|
sticky: false,
|
||||||
|
footerType: 'default',
|
||||||
|
})
|
||||||
|
const attrs = useAttrs()
|
||||||
|
const wrapperClasses = twMerge(
|
||||||
|
props.footerType === 'sitemap' && 'bg-gray-800',
|
||||||
|
props.footerType === 'socialmedia' && 'p-4 bg-white sm:p-6 dark:bg-gray-800',
|
||||||
|
props.footerType === 'logo' && 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800',
|
||||||
|
props.footerType === 'default' && 'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800',
|
||||||
|
props.sticky && 'absolute bottom-0 left-0 z-20 w-full border-t border-gray-200 dark:border-gray-600',
|
||||||
|
attrs.class as string,
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<footer class="p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800">
|
<footer v-bind="$attrs" :class="wrapperClasses">
|
||||||
<span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2022 <a href="https://flowbite.com/" class="hover:underline">Flowbite™</a>. All Rights Reserved.
|
<slot></slot>
|
||||||
</span>
|
|
||||||
<ul class="flex flex-wrap items-center mt-3 text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
|
|
||||||
<li>
|
|
||||||
<a href="#" class="mr-4 hover:underline md:mr-6 ">About</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="mr-4 hover:underline md:mr-6">Privacy Policy</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="mr-4 hover:underline md:mr-6">Licensing</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#" class="hover:underline">Contact</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</footer>
|
</footer>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed, toRefs } from 'vue'
|
|
||||||
import type { PropType } from 'vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
children: {
|
|
||||||
type: Array,
|
|
||||||
default() {
|
|
||||||
return []
|
|
||||||
},
|
|
||||||
},
|
|
||||||
bgDark: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
container: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|||||||
40
src/components/Footer/FooterBrand.vue
Normal file
40
src/components/Footer/FooterBrand.vue
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
import { useAttrs } from 'vue'
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
})
|
||||||
|
const attrs = useAttrs()
|
||||||
|
interface IFooterProps {
|
||||||
|
href: string
|
||||||
|
src: string
|
||||||
|
alt?: string
|
||||||
|
name: string
|
||||||
|
imageClass?: string
|
||||||
|
nameClass?: string
|
||||||
|
aClass?: string
|
||||||
|
}
|
||||||
|
const props = withDefaults(defineProps<IFooterProps>(), {
|
||||||
|
href: '',
|
||||||
|
src: '',
|
||||||
|
alt: '',
|
||||||
|
name: '',
|
||||||
|
imageClass: '',
|
||||||
|
nameClass: '',
|
||||||
|
aClass: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const wrapperClasses = twMerge('mb-6 md:mb-0', attrs.class as string)
|
||||||
|
const aClasses = twMerge('flex items-center', props.aClass)
|
||||||
|
const imageClasses = twMerge('h-8 mr-3', props.imageClass)
|
||||||
|
const mameClasses = twMerge('self-center text-2xl font-semibold whitespace-nowrap dark:text-white', props.nameClass)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div v-bind="$attrs" :class="wrapperClasses">
|
||||||
|
<a :href="href" :class="aClasses">
|
||||||
|
<img :src="src" :class="imageClasses" :alt="alt" />
|
||||||
|
<span :class="mameClasses">{{ name }}</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
34
src/components/Footer/FooterCopyright.vue
Normal file
34
src/components/Footer/FooterCopyright.vue
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
import { useAttrs } from 'vue'
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
})
|
||||||
|
interface IFooterCopyrigthProps {
|
||||||
|
year?: string | number
|
||||||
|
by?: string
|
||||||
|
href?: string
|
||||||
|
aClass?: string
|
||||||
|
copyrightMessage?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<IFooterCopyrigthProps>(), {
|
||||||
|
year: new Date().getFullYear(),
|
||||||
|
by: '',
|
||||||
|
href: '',
|
||||||
|
aClass: '',
|
||||||
|
copyrightMessage: 'All Rights Reserved.',
|
||||||
|
})
|
||||||
|
const attrs = useAttrs()
|
||||||
|
const spanClasses = twMerge('block text-sm text-gray-500 sm:text-center dark:text-gray-400', attrs.class as string)
|
||||||
|
const aClasses = twMerge(props.href ? 'hover:underline' : 'ml-1', props.aClass)
|
||||||
|
const byComponent = props.href ? 'a' : 'span'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<span v-bind="$attrs" :class="spanClasses">
|
||||||
|
© {{ year }}
|
||||||
|
<component :is="byComponent" :href="href" :class="aClasses">{{ by }}</component>
|
||||||
|
{{ copyrightMessage }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
28
src/components/Footer/FooterIcon.vue
Normal file
28
src/components/Footer/FooterIcon.vue
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
import { useAttrs } from 'vue'
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
})
|
||||||
|
const attrs = useAttrs()
|
||||||
|
interface IFooterIconProps {
|
||||||
|
href?: string
|
||||||
|
ariaLabel?: string
|
||||||
|
srText?: string
|
||||||
|
}
|
||||||
|
const props = withDefaults(defineProps<IFooterIconProps>(), {
|
||||||
|
href: '',
|
||||||
|
ariaLabel: '',
|
||||||
|
srText: '',
|
||||||
|
})
|
||||||
|
const iconComponent = props.href ? 'a' : 'span'
|
||||||
|
|
||||||
|
const aClasses = twMerge('text-gray-500 hover:text-gray-900 dark:hover:text-white', attrs.class as string)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<component v-bind="$attrs" :is="iconComponent" :href="href" :aria-label="ariaLabel" :class="aClasses">
|
||||||
|
<slot />
|
||||||
|
<span class="sr-only">{{ srText }}</span>
|
||||||
|
</component>
|
||||||
|
</template>
|
||||||
30
src/components/Footer/FooterLink.vue
Normal file
30
src/components/Footer/FooterLink.vue
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { resolveComponent, useAttrs } from 'vue'
|
||||||
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
})
|
||||||
|
const attrs = useAttrs()
|
||||||
|
interface IFooterLinkProps {
|
||||||
|
href: string
|
||||||
|
aClass?: string
|
||||||
|
component?: string
|
||||||
|
}
|
||||||
|
const props = withDefaults(defineProps<IFooterLinkProps>(), {
|
||||||
|
href: '',
|
||||||
|
aClass: '',
|
||||||
|
component: 'a',
|
||||||
|
})
|
||||||
|
const linkComponent = props.component === 'a' ? 'a' : resolveComponent(props.component)
|
||||||
|
const linkAttr = props.component === 'router-link' ? 'to' : 'href'
|
||||||
|
const aClasses = twMerge('hover:underline', props.aClass)
|
||||||
|
const liClasses = twMerge('mr-4 md:mr-6 last:mr-0', attrs.class as string)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<li v-bind="$attrs" :class="liClasses">
|
||||||
|
<component :is="linkComponent" :[linkAttr]="href" :class="aClasses">
|
||||||
|
<slot />
|
||||||
|
</component>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
15
src/components/Footer/FooterLinkGroup.vue
Normal file
15
src/components/Footer/FooterLinkGroup.vue
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { useAttrs } from 'vue'
|
||||||
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
})
|
||||||
|
const attrs = useAttrs()
|
||||||
|
const wrapperClasses = twMerge('flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0', attrs.class as string)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ul v-bind="$attrs" :class="wrapperClasses">
|
||||||
|
<slot></slot>
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
@@ -20,6 +20,11 @@ export { default as Badge } from './components/Badge/Badge.vue'
|
|||||||
export { default as TheCard } from './components/Card/TheCard.vue'
|
export { default as TheCard } from './components/Card/TheCard.vue'
|
||||||
export { default as Carousel } from './components/Carousel/Carousel.vue'
|
export { default as Carousel } from './components/Carousel/Carousel.vue'
|
||||||
export { default as Footer } from './components/Footer/Footer.vue'
|
export { default as Footer } from './components/Footer/Footer.vue'
|
||||||
|
export { default as FooterBrand } from './components/Footer/FooterBrand.vue'
|
||||||
|
export { default as FooterCopyright } from './components/Footer/FooterCopyright.vue'
|
||||||
|
export { default as FooterLink } from './components/Footer/FooterLink.vue'
|
||||||
|
export { default as FooterLinkGroup } from './components/Footer/FooterLinkGroup.vue'
|
||||||
|
export { default as FooterIcon } from './components/Footer/FooterIcon.vue'
|
||||||
export { default as ListGroup } from './components/ListGroup/ListGroup.vue'
|
export { default as ListGroup } from './components/ListGroup/ListGroup.vue'
|
||||||
export { default as ListGroupItem } from './components/ListGroup/components/ListGroupItem/ListGroupItem.vue'
|
export { default as ListGroupItem } from './components/ListGroup/components/ListGroupItem/ListGroupItem.vue'
|
||||||
export { default as Modal } from './components/Modal/Modal.vue'
|
export { default as Modal } from './components/Modal/Modal.vue'
|
||||||
|
|||||||
Reference in New Issue
Block a user