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

feat: Implemented breadcrumbs component

Browse Source
This commit is contained in:
Ilya Sosidka
2022-09-16 17:09:08 +03:00
parent 0edb7fddc3
commit 3876d64b93
11 changed files with 212 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/components/breadcrumb/examples/BreadcrumbCustomIconsExample.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<div class="vp-raw flex flex-col">
<Breadcrumb>
<BreadcrumbItem href="#" home>
<template #home-icon>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg> </template>
Home
</BreadcrumbItem>
<BreadcrumbItem href="#">
<template #arrow-icon>
<svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</template>
Projects
</BreadcrumbItem>
<BreadcrumbItem>
<template #arrow-icon>
<svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</template>
Flowbite
</BreadcrumbItem>
</Breadcrumb>
</div>
</template>
<script setup>
import { Breadcrumb, BreadcrumbItem } from '../../../../src/index'
</script>

14
docs/components/breadcrumb/examples/BreadcrumbExample.vue
View File

@@ -1,8 +1,18 @@
<template>
<div class="vp-raw flex flex-col">
<Breadcrumb></Breadcrumb>
<Breadcrumb>
<BreadcrumbItem href="#" home>
Home
</BreadcrumbItem>
<BreadcrumbItem href="#">
Projects
</BreadcrumbItem>
<BreadcrumbItem>
Flowbite
</BreadcrumbItem>
</Breadcrumb>
</div>
</template>
<script setup>
import { Breadcrumb } from '../../../../src/index'
import { Breadcrumb, BreadcrumbItem } from '../../../../src/index'
</script>

18
docs/components/breadcrumb/examples/BreadcrumbSolidExample.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div class="vp-raw flex flex-col">
<Breadcrumb solid>
<BreadcrumbItem href="#" home>
Home
</BreadcrumbItem>
<BreadcrumbItem href="#">
Projects
</BreadcrumbItem>
<BreadcrumbItem>
Flowbite
</BreadcrumbItem>
</Breadcrumb>
</div>
</template>
<script setup>
import { Breadcrumb, BreadcrumbItem } from '../../../../src/index'
</script>