fix(Modal/Popover/Slideover)!: rename prevent-close to dismissible + uniformize docs

This commit is contained in:
Benjamin Canac
2024-12-16 13:11:10 +01:00
parent fdaff6630f
commit 6fb426fc17
10 changed files with 148 additions and 73 deletions

View File

@@ -253,35 +253,6 @@ slots:
:placeholder{class="h-full"}
::
### Prevent close
Use the `prevent-close` prop to prevent the Modal from being closed when clicking outside of it.
::component-code
---
prettier: true
ignore:
- title
- preventClose
props:
preventClose: true
title: 'Modal prevent close'
slots:
default: |
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-48"}
::
## Examples
### Control open state
@@ -302,6 +273,35 @@ In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts),
This allows you to move the trigger outside of the Modal or remove it entirely.
::
### Prevent closing
Set the `dismissible` prop to `false` to prevent the Modal from being closed when clicking outside of it or pressing escape.
::component-code
---
prettier: true
ignore:
- title
- dismissible
props:
dismissible: false
title: 'Modal non-dismissible'
slots:
default: |
<UButton label="Open" color="neutral" variant="subtle" />
body: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="neutral" variant="subtle"}
#body
:placeholder{class="h-48"}
::
### Programmatic usage
You can use the [`useModal`](/composables/use-modal) composable to open a Modal programatically.