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

Merge branch 'main' into card-component

Browse Source
This commit is contained in:
Ahnaf Ahamed
2022-09-19 19:06:48 +05:30
committed by GitHub
parent dea36eefe1 773e075419
commit 2e57c482b2
11 changed files with 212 additions and 28 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 />

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>