-
Notifications
You must be signed in to change notification settings - Fork 120
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add positioning options to FwbModal (#293)
* fix: correct close button alignment in rtl mode * feat: add positioning options to FwbModal * docs: add position example for FwbModal * fix: change position types to logical ones * fix: annotate objects
- Loading branch information
1 parent
0cc202f
commit bce8477
Showing
5 changed files
with
115 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 62 additions & 0 deletions
62
docs/components/modal/examples/FwbModalExamplePosition.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
<template> | ||
<div class="flex flex-wrap justify-start gap-2 vp-raw"> | ||
<span> | ||
<fwb-modal-example | ||
position="top-start" | ||
trigger-text="Top Start" | ||
/> | ||
</span> | ||
<span> | ||
<fwb-modal-example | ||
position="top-center" | ||
trigger-text="Top Center" | ||
/> | ||
</span> | ||
<span> | ||
<fwb-modal-example | ||
position="top-end" | ||
trigger-text="Top End" | ||
/> | ||
</span> | ||
<span> | ||
<fwb-modal-example | ||
position="center-start" | ||
trigger-text="Center Start" | ||
/> | ||
</span> | ||
<span> | ||
<fwb-modal-example | ||
position="center" | ||
trigger-text="Center" | ||
/> | ||
</span> | ||
<span> | ||
<fwb-modal-example | ||
position="center-end" | ||
trigger-text="Center End" | ||
/> | ||
</span> | ||
<span> | ||
<fwb-modal-example | ||
position="bottom-start" | ||
trigger-text="Bottom Start" | ||
/> | ||
</span> | ||
<span> | ||
<fwb-modal-example | ||
position="bottom-center" | ||
trigger-text="Bottom Center" | ||
/> | ||
</span> | ||
<span> | ||
<fwb-modal-example | ||
position="bottom-end" | ||
trigger-text="Bottom End" | ||
/> | ||
</span> | ||
</div> | ||
</template> | ||
|
||
<script setup> | ||
import FwbModalExample from './FwbModalExample.vue' | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,2 @@ | ||
export type ModalPosition = 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right'; | ||
export type ModalPosition = 'bottom-start' | 'bottom-end' | 'bottom-center' | 'top-start' | 'top-center' | 'top-end' | 'center-start' | 'center' | 'center-end'; | ||
export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'; |