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

feat: add dropdown

Browse Source
This commit is contained in:
Alexandr
2022-07-08 20:36:05 +03:00
parent 4fb027fcb4
commit a5ffeffb82
12 changed files with 228 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/.vitepress/config.ts
View File

@@ -27,6 +27,7 @@ function getComponents() {
{ text: 'Alert', link: '/guide/alert/alert.md' },
{ text: 'Button', link: '/guide/button/button.md' },
{ text: 'Button Group', link: '/guide/buttonGroup/buttonGroup.md' },
{ text: 'Dropdown', link: '/guide/dropdown/dropdown.md' },
{ text: 'Spinner', link: '/guide/spinner/spinner.md' },
{ text: 'Tabs', link: '/guide/tabs/tabs.md' },
]

40
docs/guide/dropdown/dropdown.md Normal file
View File

@@ -0,0 +1,40 @@
<script setup>
import DropdownPlacementExample from './examples/DropdownPlacementExample.vue';
</script>
# Dropdown
## Props - placement
```vue
<script setup>
import { Dropdown } from 'flowbite-vue'
</script>
<template>
<dropdown placement="bottom" text="Bottom">
Any content here
</dropdown>
<dropdown placement="top">
<template #trigger="{ toggle }">
<Button @click="toggle">
Top
<template #suffix>
<svg class="w-4 h-4 ml-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="M19 9l-7 7-7-7"></path></svg>
</template>
</Button>
</template>
<div class="p-2">
Padding content
</div>
</dropdown>
<dropdown placement="right" text="Right">
<Spinner size="6" class="m-4" />
</dropdown>
<dropdown placement="left" text="Left">
hello world
</dropdown>
</template>
```
<DropdownPlacementExample />

29
docs/guide/dropdown/examples/DropdownPlacementExample.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<dropdown placement="bottom" text="Bottom">
Any content here
</dropdown>
<dropdown placement="top">
<template #trigger="{ toggle }">
<Button @click="toggle">
Top
<template #suffix>
<svg class="w-4 h-4 ml-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="M19 9l-7 7-7-7"></path></svg>
</template>
</Button>
</template>
<div class="p-2">
Padding content
</div>
</dropdown>
<dropdown placement="right" text="Right">
<Spinner size="6" class="m-4" />
</dropdown>
<dropdown placement="left" text="Left">
hello world
</dropdown>
</div>
</template>
<script setup>
import { Dropdown, Spinner, Button } from '../../../../src/index'
</script>