loading...

Tailwindcss dialog built with svelte

haynajjar profile image haynajjar ・3 min read

Svelte and tailwindcss Dialog component

Dialog component built with svelte and tailwindcss, show modal or info messages!

Installation

$npm i -D @fouita/dialog

Usage

To show the dialog component we just need to set true to the visible prop

fouita dialog

<script>
 import Dialog from '@fouita/dialog'
</script>

<Dialog visible title="Simple Title" body="Simple message!" />

Show and hide + Filter

If we want to show the Dialog when clicking on a button, we better bind the value with bind:visible={value} prop.

We can use also filter={false} to show the dialog without background

fouita dialog

<script>
 import Dialog from '@fouita/dialog'
 let visible = false
 function toggle(){
     visible = !visible
 }
</script>

<button class="px-4 py-2 m-2 border" on:click={toggle}>Toggle</button>
<Dialog bind:visible title="Simple Title" body="Simple message!" />

Change round and color

To change the rounding style we can use tailwindcss rounding suffixes none, sm, md, lg and to change the color we can from tailwindcss color names

fouita dialog

<Dialog rounded=sm color=pink visible title="Simple Title" body="Simple message!" />

You can also invert colors by adding inverted prop

fouita dialog

<Dialog rounded=sm inverted color=pink visible title="Simple Title" body="Simple message!" />

Add custom elements

To add custom elements in the title, we can use icon prop, and to update the body with html we can just write inside the Dialog tag

fouita dialog

<script>
 import Dialog from '@fouita/dialog'
 import {LockIcon} from 'svelte-feather-icons'
</script>

<Dialog visible title="With Icon" icon={LockIcon}>
    <div class="p-4 text-center w-64 h-64 text-2xl">
        Cusom Body
    </div>
</Dialog>

Dialog position & align

position prop indicates the starting point when showing a dialog, there is 3 positions top, middle, bottom

align prop handles the horizontal position of the component left, center, right

by default we use middle and center to have the dialog in the center of the page

fouita dialog

<Dialog visible title="Simple Title" inverted position=bottom align=left rounded=none >
    <div class="p-4 text-center w-64 h-64 text-2xl">
        Cusom Body
    </div>
</Dialog>

The follwing is an example of dialog that popsup from the bottom center of the page

fouita dialog

<script>
    import Chip from '@fouita/chip'
    import Dialog from '@fouita/dialog'         
    import {CheckCircleIcon} from 'svelte-feather-icons'

    let visible = true
</script>

<Dialog bind:visible position=bottom align=center filter={false} rounded="md" >
    <Chip size="xl" rounded="none" color="teal" class="mx-0 my-0" onDelete={() => dialog4=false} >
        <div slot="avatar">
            <CheckCircleIcon class='w-5 h-5 mx-2' />
        </div>
        <div class="py-2">
            This is a success messsage
            <div class="text-sm font-base">
                More information about the message can be found <u>here</u>
            </div>
        </div>
    </Chip>
</Dialog>

Here is another example to show a list of icons in a dialog box

fouita dialog

<script>
    import Dialog from '@fouita/dialog'
    import {LinkedinIcon,FacebookIcon,TwitterIcon,SlackIcon} from 'svelte-feather-icons'
</script>
<Dialog visible filter={false} align=right color=purple >
    <div class="p-4 text-center w-12 h-48 text-purple-600 text-2xl flex flex-col items-center">
        <LinkedinIcon class="w-6 h-6 m-2 cursor-pointer hover:text-purple-800" />
        <FacebookIcon class="w-6 h-6 m-2 cursor-pointer hover:text-purple-800" />
        <TwitterIcon class="w-6 h-6 m-2 cursor-pointer hover:text-purple-800" />
        <SlackIcon class="w-6 h-6 m-2 cursor-pointer hover:text-purple-800" />
    </div>
</Dialog>

Custom width and height

With position we can also indicate the width and the height of the dialog by using w and h props

fouita dialog

<Dialog position=bottom w=full filter={false} rounded=none >
 ...
</Dialog> 

or we can show a side bar like the following, we used closable={false} to hide the X icon and disable default closing

fouita dialog

<Dialog visible h=full title="Side Menu" closable={false} inverted align=left rounded=none >
    <div class="p-4 text-center w-64 h-64 text-2xl">
        Cusom Menu
    </div>
</Dialog>

Source Code

Fouita dialog component

About

Fouita : UI framework for svelte + tailwind components

Posted on by:

Discussion

pic
Editor guide