jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Megamenu test

Browse Source
This commit is contained in:
Jaroslav Drzik
2024-03-09 17:54:27 +01:00
parent e274e4472b
commit 114dfed7cc
7 changed files with 3569 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
docs/components/navbar.md
View File

@@ -3,6 +3,7 @@ import FwbNavbarExample from './navbar/examples/FwbNavbarExample.vue'
import FwbNavbarExampleSolid from './navbar/examples/FwbNavbarExampleSolid.vue'
import FwbNavbarExampleActionButton from './navbar/examples/FwbNavbarExampleActionButton.vue'
import FwbNavbarExampleCustomMobileIcon from './navbar/examples/FwbNavbarExampleCustomMobileIcon.vue'
import FwbNavbarExampleMegamenu from './navbar/examples/FwbNavbarExampleMegamenu.vue'
</script>
# Vue Navbar – Flowbite
@@ -50,7 +51,7 @@ import {
## Solid navbar
<fwb-navbar-example-solid />
```vue
<template>
<fwb-navbar solid>
@@ -137,6 +138,42 @@ import {
## Navbar with custom mobile icon
<fwb-navbar-example-custom-mobile-icon />
```vue
<template>
<fwb-navbar>
<template #logo>
<fwb-navbar-logo alt="Flowbite logo" image-url="/images/logo.svg" link="#">
Flowbite
</fwb-navbar-logo>
</template>
<template #default="{isShowMenu}">
<fwb-navbar-collapse :is-show-menu="isShowMenu">
<fwb-navbar-link is-active link="#">
Home
</fwb-navbar-link>
<fwb-navbar-link link="#">
Services
</fwb-navbar-link>
<fwb-navbar-link link="#">
Pricing
</fwb-navbar-link>
<fwb-navbar-link link="#">
Contact
</fwb-navbar-link>
</fwb-navbar-collapse>
</template>
<template #menu-icon>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
</svg>
</template>
</fwb-navbar>
</template>
```
## Navbar with Megamenu
<fwb-navbar-example-megamenu />
```vue
<template>
<fwb-navbar>

50
docs/components/navbar/examples/FwbNavbarExampleMegamenu.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<div class="vp-raw">
<fwb-navbar>
<template #logo>
<fwb-navbar-logo alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg" link="https://www.google.com/">
Flowbite
</fwb-navbar-logo>
</template>
<template #default="{isShowMenu}">
<fwb-navbar-collapse :is-show-menu="isShowMenu">
<fwb-navbar-link is-active link="#">
Home
</fwb-navbar-link>
<fwb-navbar-link link="#">
Services
</fwb-navbar-link>
<fwb-mega-menu link="#">
Company
</fwb-mega-menu>
<fwb-navbar-link link="#">
Contact
</fwb-navbar-link>
</fwb-navbar-collapse>
</template>
<template #right-side>
<fwb-button>
Get started
</fwb-button>
</template>
<template #mega-menu-dropdown>
<fwb-mega-menu-dropdown />
</template>
</fwb-navbar>
</div>
</template>
<script setup>
import {
FwbButton,
FwbNavbar,
FwbNavbarCollapse,
FwbNavbarLink,
FwbNavbarLogo,
FwbMegaMenu,
FwbMegaMenuDropdown,
} from '../../../../src/index'
</script>