Introduction

bs5dialog is a library for creating Bootstrap 5 dialogs. It provides a set of components for creating alerts, prompts, confirms, messages, toasts, tabs, loadings, and offcanvas dialogs.

Demo

Here is a simple demo page, which will be completed later

✨ Demo

Installation

To install bs5dialog, run the following command:

npm install @ymlluo/bs5dialog

CDN via jsDelivr

Skip the download with jsDelivr to deliver cached version of bs5dialog's compiled CSS and JS to your project.

<link href="https://cdn.jsdelivr.net/gh/ymlluo/bs5dialog@master/dist/bs5dialog.css" rel="stylesheet" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/gh/ymlluo/bs5dialog@master/dist/bs5dialog.js" crossorigin="anonymous"></script>

Components

Alert

Displays an alert modal with the given content and options.

Confirm

Displays a confirmation modal with the given content and options.

Prompt

Displays a prompt dialog with customizable options.

Message

Displays a message with customizable options

Loading

Creates a loading element and appends it to the target element.

Tips:You can also use the function alias showLoading

Toast

Displays a toast message with customizable options.

Offcanvas

Creates an offcanvas element with the given content and options.

Load

Loads content or remote page into a Bootstrap 5 modal dialog with customizable options.supports default dragging, zooming, and maximizing of the modal window.

Internationalization

bs5dialog includes internationalization support through the i18n module. To use it, import the desired language file:

import { i18n } from 'bs5dialog';

Then, set the language using the setLanguage function:

bs5dialog.i18n.setCurrentLang("zh")

Acknowledgments

twbs/bootstrap

tabler/tabler

A lot of inspiration and styling comes from these great libraries, big thanks to them

License

This project is licensed under the MIT License - see the LICENSE.md file for details