Skip to content

Commit

Permalink
feat: Updated examples for dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@andreyjamer
andreyjamer committed Apr 27, 2024
1 parent 83e7104 commit a88f982
Show file tree
Hide file tree
Showing 3 changed files with 224 additions and 32 deletions.
120 changes: 112 additions & 8 deletions docs/components/dropdown.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,68 @@ The dropdown component can be used to show a list of menu items when clicking on
```vue
<template>
<fwb-dropdown text="Bottom">
<p class="p-2">Dropdown content here</p>
<div class="w-52">
<p class="p-2">
Dropdown content line one
</p>
<p class="p-2">
Dropdown content line two
</p>
<p class="p-2">
Dropdown content line three
</p>
<p class="p-2">
Dropdown content line four
</p>
</div>
</fwb-dropdown>
<fwb-dropdown placement="top" text="Top">
<p class="p-2">Dropdown content here</p>
<div class="w-52">
<p class="p-2">
Dropdown content line one
</p>
<p class="p-2">
Dropdown content line two
</p>
<p class="p-2">
Dropdown content line three
</p>
<p class="p-2">
Dropdown content line four
</p>
</div>
</fwb-dropdown>
<fwb-dropdown placement="right" text="Right">
<p class="p-2">Dropdown content here</p>
<div class="w-52">
<p class="p-2">
Dropdown content line one
</p>
<p class="p-2">
Dropdown content line two
</p>
<p class="p-2">
Dropdown content line three
</p>
<p class="p-2">
Dropdown content line four
</p>
</div>
</fwb-dropdown>
<fwb-dropdown placement="left" text="Left">
<p class="p-2">Dropdown content here</p>
<div class="w-52">
<p class="p-2">
Dropdown content line one
</p>
<p class="p-2">
Dropdown content line two
</p>
<p class="p-2">
Dropdown content line three
</p>
<p class="p-2">
Dropdown content line four
</p>
</div>
</fwb-dropdown>
</template>
Expand All @@ -49,16 +101,68 @@ The property controls how the dropdown is aligned with the trigger
```vue
<template>
<fwb-dropdown text="Bottom" align-to-end>
<p class="p-2">Dropdown content here</p>
<div class="w-52">
<p class="p-2">
Dropdown content line one
</p>
<p class="p-2">
Dropdown content line two
</p>
<p class="p-2">
Dropdown content line three
</p>
<p class="p-2">
Dropdown content line four
</p>
</div>
</fwb-dropdown>
<fwb-dropdown placement="top" text="Top" align-to-end>
<p class="p-2">Dropdown content here</p>
<div class="w-52">
<p class="p-2">
Dropdown content line one
</p>
<p class="p-2">
Dropdown content line two
</p>
<p class="p-2">
Dropdown content line three
</p>
<p class="p-2">
Dropdown content line four
</p>
</div>
</fwb-dropdown>
<fwb-dropdown placement="right" text="Right" align-to-end>
<p class="p-2">Dropdown content here</p>
<div class="w-52">
<p class="p-2">
Dropdown content line one
</p>
<p class="p-2">
Dropdown content line two
</p>
<p class="p-2">
Dropdown content line three
</p>
<p class="p-2">
Dropdown content line four
</p>
</div>
</fwb-dropdown>
<fwb-dropdown placement="left" text="Left" align-to-end>
<p class="p-2">Dropdown content here</p>
<div class="w-52">
<p class="p-2">
Dropdown content line one
</p>
<p class="p-2">
Dropdown content line two
</p>
<p class="p-2">
Dropdown content line three
</p>
<p class="p-2">
Dropdown content line four
</p>
</div>
</fwb-dropdown>
</template>
Expand Down
68 changes: 56 additions & 12 deletions docs/components/dropdown/examples/FwbDropdownExampleAlignment.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,79 @@
text="Top"
align-to-end
>
<p class="p-2">
Dropdown content here
</p>
<div class="w-52">
<p class="p-2">
Dropdown content line one
</p>
<p class="p-2">
Dropdown content line two
</p>
<p class="p-2">
Dropdown content line three
</p>
<p class="p-2">
Dropdown content line four
</p>
</div>
</fwb-dropdown>
<fwb-dropdown
placement="right"
text="Right"
align-to-end
>
<p class="p-2">
Dropdown content here
</p>
<div class="w-52">
<p class="p-2">
Dropdown content line one
</p>
<p class="p-2">
Dropdown content line two
</p>
<p class="p-2">
Dropdown content line three
</p>
<p class="p-2">
Dropdown content line four
</p>
</div>
</fwb-dropdown>
<fwb-dropdown
text="Bottom"
align-to-end
>
<p class="p-2">
Dropdown content here
</p>
<div class="w-52">
<p class="p-2">
Dropdown content line one
</p>
<p class="p-2">
Dropdown content line two
</p>
<p class="p-2">
Dropdown content line three
</p>
<p class="p-2">
Dropdown content line four
</p>
</div>
</fwb-dropdown>
<fwb-dropdown
placement="left"
text="Left"
align-to-end
>
<p class="p-2">
Dropdown content here
</p>
<div class="w-52">
<p class="p-2">
Dropdown content line one
</p>
<p class="p-2">
Dropdown content line two
</p>
<p class="p-2">
Dropdown content line three
</p>
<p class="p-2">
Dropdown content line four
</p>
</div>
</fwb-dropdown>
</div>
</template>
Expand Down
68 changes: 56 additions & 12 deletions docs/components/dropdown/examples/FwbDropdownExamplePlacement.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,74 @@
placement="top"
text="Top"
>
<p class="p-2">
Dropdown content here
</p>
<div class="w-52">
<p class="p-2">
Dropdown content line one
</p>
<p class="p-2">
Dropdown content line two
</p>
<p class="p-2">
Dropdown content line three
</p>
<p class="p-2">
Dropdown content line four
</p>
</div>
</fwb-dropdown>
<fwb-dropdown
placement="right"
text="Right"
>
<p class="p-2">
Dropdown content here
</p>
<div class="w-52">
<p class="p-2">
Dropdown content line one
</p>
<p class="p-2">
Dropdown content line two
</p>
<p class="p-2">
Dropdown content line three
</p>
<p class="p-2">
Dropdown content line four
</p>
</div>
</fwb-dropdown>
<fwb-dropdown text="Bottom">
<p class="p-2">
Dropdown content here
</p>
<div class="w-52">
<p class="p-2">
Dropdown content line one
</p>
<p class="p-2">
Dropdown content line two
</p>
<p class="p-2">
Dropdown content line three
</p>
<p class="p-2">
Dropdown content line four
</p>
</div>
</fwb-dropdown>
<fwb-dropdown
placement="left"
text="Left"
>
<p class="p-2">
Dropdown content here
</p>
<div class="w-52">
<p class="p-2">
Dropdown content line one
</p>
<p class="p-2">
Dropdown content line two
</p>
<p class="p-2">
Dropdown content line three
</p>
<p class="p-2">
Dropdown content line four
</p>
</div>
</fwb-dropdown>
</div>
</template>
Expand Down

0 comments on commit a88f982

Please sign in to comment.