https://github.com/fouita/svelte-tw-dialog
Dialog (modal) component built with svelte and tailwindcss
https://github.com/fouita/svelte-tw-dialog
Last synced: 17 days ago
JSON representation
Dialog (modal) component built with svelte and tailwindcss
- Host: GitHub
- URL: https://github.com/fouita/svelte-tw-dialog
- Owner: fouita
- Created: 2020-09-19T13:56:21.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-19T13:58:03.000Z (over 5 years ago)
- Last Synced: 2025-02-22T00:20:07.540Z (over 1 year ago)
- Language: Svelte
- Size: 5.86 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Svelte and tailwindcss Dialog component
Dialog component built with svelte and tailwindcss, show modal or info messages!
# Installation
```bash
$npm i -D @fouita/dialog
```
# Usage
To show the dialog component we just need to set true to the `visible` prop
```html
import Dialog from '@fouita/dialog'
```
## 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
```html
import Dialog from '@fouita/dialog'
let visible = false
function toggle(){
visible = !visible
}
Toggle
```
## 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
```html
```
You can also invert colors by adding `inverted` prop
```html
```
## 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
```html
import Dialog from '@fouita/dialog'
import {LockIcon} from 'svelte-feather-icons'
Cusom Body
```
## 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
```html
Cusom Body
```
The follwing is an example of dialog that popsup from the bottom center of the page
```html
import Chip from '@fouita/chip'
import Dialog from '@fouita/dialog'
import {CheckCircleIcon} from 'svelte-feather-icons'
let visible = true
dialog4=false} >
This is a success messsage
More information about the message can be found here
```
Here is another example to show a list of icons in a dialog box
```html
import Dialog from '@fouita/dialog'
import {LinkedinIcon,FacebookIcon,TwitterIcon,SlackIcon} from 'svelte-feather-icons'
```
## Custom width and height
With position we can also indicate the width and the height of the dialog by using `w` and `h` props
```html
...
```
or we can show a side bar like the following, we used `closable={false}` to hide the `X` icon and disable default closing
```html
Cusom Menu
```
# About
[Fouita : UI framework for svelte + tailwind components](https://fouita.com)