mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
61 lines
1.5 KiB
Text
61 lines
1.5 KiB
Text
<script>
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
## Default (transactional)
|
|
|
|
<FileSource src="/framed/Modal/Modal" />
|
|
|
|
## Custom focus
|
|
|
|
By default, the modal close button will be focused when opened.
|
|
|
|
Use the `selectorPrimaryFocus` to specify the element that should be focused when the modal is opened (e.g., `#id`, `.class`, `[data-attribute]`).
|
|
|
|
<FileSource src="/framed/Modal/ModalCustomFocus" />
|
|
|
|
## Danger modal
|
|
|
|
<FileSource src="/framed/Modal/DangerModal" />
|
|
|
|
## Passive modal
|
|
|
|
<FileSource src="/framed/Modal/PassiveModal" />
|
|
|
|
## Has scrolling content
|
|
|
|
Setting `hasScrollingContent` to `true` increases the vertical space within the modal.
|
|
|
|
<FileSource src="/framed/Modal/ModalScrollingContent" />
|
|
|
|
## Multiple modals
|
|
|
|
<FileSource src="/framed/Modal/ModalMultiple" />
|
|
|
|
## Multiple secondary buttons
|
|
|
|
Use the `secondaryButtons` prop to render two secondary buttons. The prop is a 2-tuple type that supersedes `secondaryButtonText`.
|
|
|
|
<FileSource src="/framed/Modal/3ButtonModal" />
|
|
|
|
## Extra-small size
|
|
|
|
<FileSource src="/framed/Modal/ModalExtraSmall" />
|
|
|
|
## Small size
|
|
|
|
<FileSource src="/framed/Modal/ModalSmall" />
|
|
|
|
## Large size
|
|
|
|
<FileSource src="/framed/Modal/ModalLarge" />
|
|
|
|
## Prevent close on outside click
|
|
|
|
`preventCloseOnClickOutside` prevents the modal from being closed when clicking outside of an open modal. This prop is intended to be used for transactional modals.
|
|
|
|
<FileSource src="/framed/Modal/ModalPreventOutsideClick" />
|
|
|
|
## Button with icon
|
|
|
|
<FileSource src="/framed/Modal/ModalButtonWithIcon" />
|