Skip to content

Svelte Modal Component for Bootstrap (Svelte Bootstrap Modal)

License

Notifications You must be signed in to change notification settings

Sidd27/sv-bootstrap-modal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

sv-bootstrap-modal (Svelte Bootstrap Modal)

Svelte Modal Component for Bootstrap (Bootstrap’s modal plugin in svlete applications), can be used with sapper or standalone with svelte

Demo

Simple Bootstrap Modal Example

How to install

npm install --save-dev sv-bootstrap-modal

Requirements

Bootstrap CSS needs to be present globally in project

Usage

Simple Usage

Example

<script>
  import Modal from "sv-bootstrap-modal";
  let isOpen = false;
</script>

<Modal bind:open={isOpen}>
    <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" on:click={() => (isOpen = false)}>
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">Woohoo, you're reading this text in a modal!</div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" on:click={() => (isOpen = false)}>Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</Modal>

<button class="btn btn-primary" on:click={()=> (isOpen = true)}>Open Modal</button>

Modal Sizing

Below are the classes which should be used to change the sizes of modal

Small Large Extra large
.modal-sm .modal-lg .modal-xl

Example

<script>
  import Modal from "sv-bootstrap-modal";
  let isOpen = false;
</script>

<Modal bind:open={isOpen} dialogClasses="modal-lg">
    ....
</Modal>

<button class="btn btn-primary" on:click={()=> (isOpen = true)}>Open Modal</button>

Vertically centered

Add modal-dialog-centered to dialogClasses option

Example

<script>
  import Modal from "sv-bootstrap-modal";
  let isOpen = false;
</script>

<Modal bind:open={isOpen} dialogClasses="modal-dialog-centered">
    ....
</Modal>

<button class="btn btn-primary" on:click={()=> (isOpen = true)}>Open Modal</button>

Scrolling long content (Scrollable Modal)

Add modal-dialog-scrollable to dialogClasses option

<script>
  import Modal from "sv-bootstrap-modal";
  let isOpen = false;
</script>

<Modal bind:open={isOpen} dialogClasses="modal-dialog-scrollable">
    ....
</Modal>

<button class="btn btn-primary" on:click={()=> (isOpen = true)}>Open Modal</button>

Component Options

Name Type Default Description
backdrop boolean true Includes a modal-backdrop element.
ignoreBackdrop boolean true It will ignore backdrop click close if true modal will not close on outside click
keyboard boolean true Closes the modal when escape key is pressed
dialogClasses string "" You can add any number of classes to .modal-dialog element
labelledby string "" Used for aria-labelledby
describedby string "" Used for aria-describedby
onOpened function Empty function(noop) Can be Used for callbacks After Modal Opened
onClosed function Empty function(noop) Can be Used for callbacks After Modal Closed

License

Apache License 2.0