Svelte Modal

Svelte component for creating modals with tailwindcss

Installation

npm i -D @bobthered/svelte-modal

<script>
  import Modal from '@bobthered/svelte-modal'
</script>

<Modal>Modal Body</Modal>

Prop	Default	Description
closeable	`true`	Determine if the modal can be closed by the user
container	`{}`	Container classes ( see below for available props )
modal	`{}`	Modal classes ( see below for available props )
overlay	`{}`	Overlay classes ( see below for available props )
show	`false`	Set whether the modal is visible or not
showTitleBar	`true`	Set whether the modal title bar is visible or not
title	`""`	Set the modal title text
titleBar	`{}`	Title bar classes ( see below for available props )

Multiple components can be styled. Each component has it's own default classes that can be overwritten

Prop	Default
bg	`bg-white`
class	`""`
display	`flex`
duration	`duration-200`
flexDirection	`flex-col`
maxHeight	`max-h-full`
maxWidth	`max-w-4xl`
overflow	`overflow-hidden`
rounded	`rounded`
shadow	`shadow`
show	`{ false : "opacity-0 pointer-events-none -translate-y-8", true : "opacity-100 pointer-events-auto translate-y-0"}`
transform	`transform`
transition	`transition`

Prop	Default
bg	`bg-black`
class	`""`
duration	`duration-200`
height	`h-screen`
left	`left-0`
position	`absolute`
show	`{ false : "opacity-0 pointer-events-none", true : "opacity-70 pointer-events-auto" }`
top	`top-0`
transition	`transition`
width	`w-screen`