mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
88 lines
3.2 KiB
Svelte
88 lines
3.2 KiB
Svelte
<script>
|
|
import { Button } from "../Button";
|
|
import Modal from "./Modal.svelte";
|
|
|
|
let open = $$props.open;
|
|
</script>
|
|
|
|
<div>
|
|
<Button
|
|
on:click={() => {
|
|
open = true;
|
|
}}>
|
|
Launch modal
|
|
</Button>
|
|
</div>
|
|
<Modal
|
|
{...$$props}
|
|
bind:open
|
|
on:click:button--secondary={() => {
|
|
console.log('click button secondary');
|
|
open = false;
|
|
}}
|
|
on:open={() => {
|
|
console.log('open');
|
|
}}
|
|
on:close={() => {
|
|
console.log('close');
|
|
}}
|
|
on:submit={() => {
|
|
console.log('submit');
|
|
}}>
|
|
<p>
|
|
This component supports two-way binding by default. Please see ComposedModal
|
|
for piecemeal functionality.
|
|
</p>
|
|
{#if $$props.hasScrollingContent}
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
|
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
|
|
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
|
|
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
|
|
consectetur non risus eu rutrum.{' '}
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
|
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
|
|
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
|
|
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
|
|
consectetur non risus eu rutrum.{' '}
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
|
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
|
|
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
|
|
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
|
|
consectetur non risus eu rutrum.{' '}
|
|
</p>
|
|
<h3>Lorem ipsum</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
|
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
|
|
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
|
|
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
|
|
consectetur non risus eu rutrum.{' '}
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
|
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
|
|
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
|
|
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
|
|
consectetur non risus eu rutrum.{' '}
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
|
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
|
|
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
|
|
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
|
|
consectetur non risus eu rutrum.{' '}
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
|
|
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
|
|
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
|
|
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
|
|
consectetur non risus eu rutrum.{' '}
|
|
</p>
|
|
{/if}
|
|
</Modal>
|