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

feat: gap dropdown

Browse Source
This commit is contained in:
Alexandr
2022-07-11 15:49:24 +03:00
parent 749732dbe7
commit fb65cdcef8
2 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/guide/dropdown/examples/DropdownPlacementExample.vue
View File

@@ -12,8 +12,19 @@
</template>
</Button>
</template>
<div class="p-2">
Padding content
<div class="w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
<a href="#" aria-current="true" class="block w-full px-4 py-2 text-white bg-blue-700 border-b border-gray-200 rounded-t-lg cursor-pointer dark:bg-gray-800 dark:border-gray-600">
Profile
</a>
<a href="#" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
Settings
</a>
<a href="#" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
Messages
</a>
<a href="#" class="block w-full px-4 py-2 rounded-b-lg cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
Download
</a>
</div>
</dropdown>
<dropdown placement="right" text="Right">

10
src/components/Dropdown/composables/useDropdownClasses.ts
View File

@@ -5,6 +5,8 @@ import type { DropdownPlacement } from '../types'
const defaultDropdownClasses = 'absolute z-10 bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700'
const defaultGapInPx = 8
const placementDropdownClasses: Record<DropdownPlacement, string> = {
bottom: '',
left: 'top-0',
@@ -20,16 +22,16 @@ export type UseDropdownClassesProps = {
const placementCalculators: Record<DropdownPlacement, (rect: DOMRect) => string> = {
bottom(rect: DOMRect): string {
return `bottom: -${rect.height}px;`
return `bottom: -${rect.height + defaultGapInPx}px;`
},
left(rect: DOMRect): string {
return `left: -${rect.width}px;`
return `left: -${rect.width + defaultGapInPx}px;`
},
right(rect: DOMRect): string {
return `right: -${rect.width}px;`
return `right: -${rect.width + defaultGapInPx}px;`
},
top(rect: DOMRect): string {
return `top: -${rect.height}px;`
return `top: -${rect.height + defaultGapInPx}px;`
},
}