mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 19:46:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(modal): add example "Has scrolling content"

Browse source
This commit is contained in:
Eric Liu 2022-06-02 19:08:44 -07:00
commit 3ef64fb7b3
2 changed files with 24 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,13 +14,19 @@
<FileSource src="/framed/Modal/PassiveModal" /> <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 ### Multiple modals
<FileSource src="/framed/Modal/ModalMultiple" /> <FileSource src="/framed/Modal/ModalMultiple" />
### Multiple secondary buttons ### 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" /> <FileSource src="/framed/Modal/3ButtonModal" />

17
docs/src/pages/framed/Modal/ModalScrollingContent.svelte Normal file
View file

@ -0,0 +1,17 @@
<script>
import { Modal } from "carbon-components-svelte";
</script>
<Modal open passiveModal modalHeading="About Cloudant" hasScrollingContent>
<p>
Cloudant is a fully managed, distributed database optimized for heavy
workloads and fast-growing web and mobile apps, IBM Cloudant is available as
an IBM Cloud® service with a 99.99% SLA.
</p>
<br />
<p>
The database elastically scales throughput and storage, and its API and
replication protocols are compatible with Apache CouchDB for hybrid or
multicloud architectures.
</p>
</Modal>