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

48
docs/components/breadcrumb/breadcrumb.md
View File

@@ -1,15 +1,59 @@
<script setup>
import BreadcrumbExample from './examples/BreadcrumbExample.vue'
import BreadcrumbSolidExample from './examples/BreadcrumbSolidExample.vue'
import BreadcrumbCustomIconsExample from './examples/BreadcrumbCustomIconsExample.vue'
</script>
# Breadcrumb
The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.
Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors.
## Default breadcrumb
<BreadcrumbExample />
```vue
<script setup>
import { Breadcrumb } from 'flowbite-vue'
</script>
<template>
<Breadcrumb></Breadcrumb>
<Breadcrumb>
<BreadcrumbItem href="#" home>
Home
</BreadcrumbItem>
<BreadcrumbItem href="#">
Projects
</BreadcrumbItem>
<BreadcrumbItem>
Flowbite
</BreadcrumbItem>
</Breadcrumb>
</template>
```
<BreadcrumbExample />
## Solid Breadcrumb
<BreadcrumbSolidExample />
```vue
<script setup>
import { Breadcrumb } from 'flowbite-vue'
</script>
<template>
<Breadcrumb solid>
<BreadcrumbItem href="#" home>
Home
</BreadcrumbItem>
<BreadcrumbItem href="#">
Projects
</BreadcrumbItem>
<BreadcrumbItem>
Flowbite
</BreadcrumbItem>
</Breadcrumb>
</template>
```
## Custom Icons
<BreadcrumbCustomIconsExample />