Utility
Styling
A modal component to display arbitrary rich content in a dismissable window.
Modals are only rendered when open
is
true
, and are placed in a
portal
at the end of
<body>
. This means that they are rendered outside of the DOM area of the containing
component, but they still respect the container's lifecycle. This ensures that
any styling applied to the container does not inadvertantly affect the modal
or its contents.
<script>
import { Button, Modal } from '@thetinkerinc/colibri';
import style from './style.js';
let open = false;
</script>
<Button on:click={() => (open = true)}>Open modal</Button>
<Modal {style} bind:open>Hello there!</Modal>
Props
open:
slim:
fit:
style:
Object Slots
default:
title:
actions:
close:
Events
on:open
on:close
Styling
borderRadius:
Overrides:
--colibri-border-radius-lg
backgroundColor:
Overrides:
--colibri-element-background-color
shadow:
Overrides:
--colibri-shadow
overlayColor:
marginTop:
width:
widthSlim:
//style.js
export default style = {};