mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
parent
75dcf24ae5
commit
3ca0297b5e
2 changed files with 42 additions and 0 deletions
|
@ -14,6 +14,10 @@
|
|||
|
||||
<FileSource src="/framed/Modal/PassiveModal" />
|
||||
|
||||
### 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`.
|
||||
|
|
38
docs/src/pages/framed/Modal/ModalMultiple.svelte
Normal file
38
docs/src/pages/framed/Modal/ModalMultiple.svelte
Normal file
|
@ -0,0 +1,38 @@
|
|||
<script>
|
||||
import { Button, Modal } from "carbon-components-svelte";
|
||||
|
||||
let openCreate = false;
|
||||
let openDelete = false;
|
||||
</script>
|
||||
|
||||
<Button on:click="{() => (openCreate = true)}">Create database</Button>
|
||||
<Button kind="danger-tertiary" on:click="{() => (openDelete = true)}">
|
||||
Delete database
|
||||
</Button>
|
||||
|
||||
<Modal
|
||||
bind:open="{openCreate}"
|
||||
modalHeading="Create database"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary="{() => (openCreate = false)}"
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
>
|
||||
<p>Create a new Cloudant database in the US South region.</p>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
danger
|
||||
bind:open="{openDelete}"
|
||||
modalHeading="Delete database"
|
||||
primaryButtonText="Delete"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary="{() => (openDelete = false)}"
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
>
|
||||
<p>This is a permanent action and cannot be undone.</p>
|
||||
</Modal>
|
Loading…
Add table
Add a link
Reference in a new issue