mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(modal): add "Has scrolling content," "Custom focus" examples (#1334)

Browse source 
* docs(modal): add example "Has scrolling content"

* docs(modal): add "Custom focus" example

* docs: do not open modals initially
This commit is contained in:
metonym 2022-06-02 19:26:26 -07:00 • committed by GitHub
commit 1a904dda36
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 93 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

16
docs/src/pages/components/Modal.svx
View file

@ -6,6 +6,14 @@
<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" />
@ -14,13 +22,19 @@
<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 for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`.
Use the `secondaryButtons` prop to render two secondary buttons. The prop is a 2-tuple type that supersedes `secondaryButtonText`.
<FileSource src="/framed/Modal/3ButtonModal" />