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

feat(component): add Modal

Browse source 
Closes #18
This commit is contained in:
Eric Liu 2019-12-25 13:20:14 -08:00
commit a8f464586a
16 changed files with 300 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

83
src/components/Modal/Modal.Story.svelte Normal file
View file

@ -0,0 +1,83 @@
<script>
import Layout from '../../internal/ui/Layout.svelte';
import Button from '../Button';
import Modal from './Modal.svelte';
let open = $$props.open;
</script>
<Layout>
<div>
<Button
on:click={() => {
open = true;
}}>
Launch modal
</Button>
</div>
<Modal
{...$$props}
bind:open
on:click:button--secondary={() => {
console.log('click button secondary');
}}
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>
</Layout>