Files
flowbite-vue/docs/components/navbar/examples/NavbarActionButtonExample.vue
2022-11-17 21:05:24 +03:00

26 lines
1.0 KiB
Vue

<template>
<div class="vp-raw flex flex-col">
<Navbar>
<template #logo>
<NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
Flowbite
</NavbarLogo>
</template>
<template #default="{isShowMenu}">
<NavbarCollapse :isShowMenu="isShowMenu">
<NavbarLink is-active>Home</NavbarLink>
<NavbarLink>Services</NavbarLink>
<NavbarLink>Pricing</NavbarLink>
<NavbarLink>Contact</NavbarLink>
</NavbarCollapse>
</template>
<template #right-side>
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Get started</button>
</template>
</Navbar>
</div>
</template>
<script setup>
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from '../../../../src/index'
</script>