https://github.com/scriptraccoon/dialog-svelte

Reusable Svelte component for displaying customizable, accessible dialogs and modals
https://github.com/scriptraccoon/dialog-svelte

Last synced: over 1 year ago
JSON representation

Reusable Svelte component for displaying customizable, accessible dialogs and modals

• Host: GitHub
• URL: https://github.com/scriptraccoon/dialog-svelte
• Owner: ScriptRaccoon
• License: mit
• Created: 2023-12-20T23:09:25.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-26T00:03:14.000Z (over 2 years ago)
• Last Synced: 2024-05-30T16:49:52.748Z (about 2 years ago)
• Language: Svelte
• Homepage: https://dialog-svelte.netlify.app
• Size: 26.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Dialog and Modal components in Svelte

This repository contains a reusable Svelte component (`Dialog.svelte`) for displaying customizable, accessible dialogs and modals. There is also a demonstration of various use cases (`App.svelte`).

https://dialog-svelte.netlify.app/

## Usage

Simple copy-paste the component `Dialog.svelte` into your Svelte project and adjust it as needed. Then import it and its `open_dialog` function.

```typescript

import Dialog, { open_dialog } from "./lib/Dialog.svelte"

open_dialog({

	confirm: { text: "Yes", action: () => delete_item(item) },

	cancel: { text: "No", action: () => {} },

	text: "Do you really want to delete the item?",

	modal: true,

})

function delete_item(item: Item) {

	// actually delete the item

}

```