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

resolve conflict

Browse Source
This commit is contained in:
hirakei1203
2022-11-25 14:19:21 +09:00
parent 9ed0804cea d7fb36c616
commit 86535656e0
29 changed files with 11184 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
docs/components/navbar/examples/NavbarActionButtonExample.vue Normal file
View File

@@ -0,0 +1,25 @@
<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>

25
docs/components/navbar/examples/NavbarCustomMobileIconExample.vue Normal file
View File

@@ -0,0 +1,25 @@
<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 #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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path></svg>
</template>
</Navbar>
</div>
</template>
<script setup>
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from '../../../../src/index'
</script>

18
docs/components/navbar/examples/NavbarExample.vue
View File

@@ -1,8 +1,22 @@
<template>
<div class="vp-raw flex flex-col">
<Navbar></Navbar>
<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 isActive link="#">Home</NavbarLink>
<NavbarLink link="#">Services</NavbarLink>
<NavbarLink link="#">Pricing</NavbarLink>
<NavbarLink link="#">Contact</NavbarLink>
</NavbarCollapse>
</template>
</Navbar>
</div>
</template>
<script setup>
import { Navbar } from '../../../../src/index'
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from '../../../../src/index'
</script>

22
docs/components/navbar/examples/NavbarSolidExample.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<div class="vp-raw flex flex-col">
<Navbar solid>
<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>
</Navbar>
</div>
</template>
<script setup>
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from '../../../../src/index'
</script>

110
docs/components/navbar/navbar.md
View File

@@ -1,15 +1,119 @@
<script setup>
import NavbarExample from './examples/NavbarExample.vue'
import NavbarSolidExample from './examples/NavbarSolidExample.vue'
import NavbarActionButtonExample from './examples/NavbarActionButtonExample.vue'
import NavbarCustomMobileIconExample from './examples/NavbarCustomMobileIconExample.vue'
</script>
# Vue Navbar Component - Flowbite
# Navbar Component – Flowbite
The navbar component can be used to show a list of navigation links positioned on the top side of your page based on multiple layouts, sizes, and dropdowns
## Default navbar
```vue
<script setup>
import { Navbar } from 'flowbite-vue'
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from 'flowbite-vue'
</script>
<template>
<Navbar></Navbar>
<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 isActive link="#">Home</NavbarLink>
<NavbarLink link="#">Services</NavbarLink>
<NavbarLink link="#">Pricing</NavbarLink>
<NavbarLink link="#">Contact</NavbarLink>
</NavbarCollapse>
</template>
</Navbar>
</template>
```
<NavbarExample />
## Solid navbar
```vue
<script setup>
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from 'flowbite-vue'
</script>
<template>
<Navbar solid>
<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>
</Navbar>
</template>
```
<NavbarSolidExample />
## Navbar with action button
```vue
<script setup>
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from 'flowbite-vue'
</script>
<template>
<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>
</template>
```
<NavbarActionButtonExample />
## Navbar with custom mobile icon
```vue
<script setup>
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from 'flowbite-vue'
</script>
<template>
<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 #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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path></svg>
</template>
</Navbar>
</template>
```
<NavbarCustomMobileIconExample />

15
docs/components/progress/examples/ProgressColorExample.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="vp-raw flex flex-col grid gap-4">
<Progress label="Default" progress="45"></Progress>
<Progress color="dark" label="Dark" progress="45"></Progress>
<Progress color="blue" label="Blue" progress="45"></Progress>
<Progress color="red" label="Red" progress="45"></Progress>
<Progress color="green" label="Green" progress="45"></Progress>
<Progress color="yellow" label="Yellow" progress="45"></Progress>
<Progress color="indigo" label="Indigo" progress="45"></Progress>
<Progress color="purple" label="Purple" progress="45"></Progress>
</div>
</template>
<script setup>
import { Progress } from '../../../../src/index'
</script>

2
docs/components/progress/examples/ProgressExample.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="vp-raw flex flex-col">
<Progress></Progress>
<Progress progress="45"></Progress>
</div>
</template>
<script setup>

6
docs/components/progress/examples/ProgressInsideLabelExample.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
</template>
<script setup>
import { Progress } from '../../../../src/index'
</script>

6
docs/components/progress/examples/ProgressOutsideLabelExample.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
</template>
<script setup>
import { Progress } from '../../../../src/index'
</script>

11
docs/components/progress/examples/ProgressSizeExample.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div class="flex flex-col grid gap-4">
<Progress size="sm" label="Small" progress="45"></Progress>
<Progress size="md" label="Medium" progress="45"></Progress>
<Progress size="lg" label="Large" progress="45"></Progress>
<Progress size="xl" label="Extra Large" progress="45"></Progress>
</div>
</template>
<script setup>
import { Progress } from '../../../../src/index'
</script>

89
docs/components/progress/progress.md
View File

@@ -1,15 +1,102 @@
<script setup>
import ProgressExample from './examples/ProgressExample.vue'
import ProgressSizeExample from './examples/ProgressSizeExample.vue'
import ProgressInsideLabelExample from './examples/ProgressInsideLabelExample.vue'
import ProgressOutsideLabelExample from './examples/ProgressOutsideLabelExample.vue'
import ProgressColorExample from './examples/ProgressColorExample.vue'
</script>
# Vue Progress Bar Component - Flowbite
## Default
```vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
<Progress></Progress>
<Progress progress="45"></Progress>
</template>
```
<ProgressExample />
## Sizes
You can also use different sizes by using various sizing.
```vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
<!-- small size -->
<Progress size="sm" label="Small" progress="45"></Progress>
<!-- medium size -->
<Progress size="md" label="Medium" progress="45"></Progress>
<!-- large size -->
<Progress size="lg" label="Large" progress="45"></Progress>
<!-- extra large size -->
<Progress size="xl" label="Extra Large" progress="45"></Progress>
</template>
```
<ProgressSizeExample />
## With label inside
Here is an example of using a progress bar with the label inside the bar.
```vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
<Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
</template>
```
<ProgressInsideLabelExample />
## With label outside
And this is an example of using a progress bar outside the bar.
```vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
<Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
</template>
```
<ProgressOutsideLabelExample />
## Colors
You can also apply color.
```vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
<!-- Default color -->
<Progress label="Default" progress="45"></Progress>
<!-- Dark -->
<Progress color="dark" label="Dark" progress="45"></Progress>
<!-- Blue -->
<Progress color="blue" label="Blue" progress="45"></Progress>
<!-- Red -->
<Progress color="red" label="Red" progress="45"></Progress>
<!-- Green -->
<Progress color="green" label="Green" progress="45"></Progress>
<!-- Yellow -->
<Progress color="yellow" label="Yellow" progress="45"></Progress>
<!-- Indigo -->
<Progress color="indigo" label="Indigo" progress="45"></Progress>
<!-- Purple -->
<Progress color="purple" label="Purple" progress="45"></Progress>
</template>
```
<ProgressColorExample />