sv-bootstrap-dropdown (Svelte Bootstrap Dropdown)

Svelte Dropdown Component for Bootstrap (Bootstrap’s dropdown plugin in svlete applications), can be used with sapper or standalone with svelte.Just like Vainilla bootstrap this plugin too is built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. But Unlike Vainilla bootstrap we are using PopperJs V2 instead of v1

How to install

1. npm install --save-dev sv-bootstrap-dropdown @rollup/plugin-replace
2. Add below code in your rollup config

import replace from '@rollup/plugin-replace';
..
..
..
plugins: [
  ..., // Other Plugins
  ..., // Other Plugins
replace({
	  'process.env.NODE_ENV': JSON.stringify('production'),
	   include: '**/node_modules/**',
    })
]

Requirements

Bootstrap CSS needs to be present globally in project

Simple Demo

Demo

Usage

Single button

Example

<script>
    import Dropdown from "sv-bootstrap-dropdown";
    let dropdownTrigger;
</script>

<Dropdown triggerElement={dropdownTrigger}>
<button
    type="button"
    class="btn btn-secondary"
    bind:this={dropdownTrigger}
    >
    Dropdown
</button>
<div slot="DropdownMenu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>
</Dropdown>

Split button

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret. Just make triggerElement as splited caret button of btn-group and class .btn-group via classes option on Dropdown component

Example

<script>
    import Dropdown from "sv-bootstrap-dropdown";
    let dropdownSplitTrigger;
</script>

 <Dropdown triggerElement={dropdownSplitTrigger} classes="btn-group">
    <button type="button" class="btn btn-danger">Danger</button>
    <button
      type="button"
      class="btn btn-danger dropdown-toggle dropdown-toggle-split"
      aria-haspopup="true"
      aria-expanded="false"
      bind:this={dropdownSplitTrigger}>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div slot="DropdownMenu">
      <a class="dropdown-item" href="javascript:void(0)">Action</a>
      <a class="dropdown-item" href="javascript:void(0)">Another action</a>
      <div class="dropdown-divider" />
      <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
    </div>
  </Dropdown>

Trigger Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons as the triggerElement is being handled by the developer they have freedom to add any classes, style etc

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

Flip

This option should tell the Dropdown to filp side if there is no space on the prefered side

Example

<script>
    import Dropdown from "sv-bootstrap-dropdown";
    let triggerEle;
</script>

 <Dropdown flip="false" triggerElement={triggerEle}>
     ...
 </Dropdown>

Directions

Use placement option on Dropdown component for placement change

---

NOTE

The flip option will take effect if there is no space for dropdown on the side mentioned in placement.

---

Example

<script>
    import Dropdown from "sv-bootstrap-dropdown";
    let dropdownPlacementTrigger;
</script>

 <Dropdown placement="top-end" triggerElement={dropdownPlacementTrigger}>
    <button
      type="button"
      class="btn btn-primary"
      bind:this={dropdownPlacementTrigger}>
      Dropdown
    </button>
    <div slot="DropdownMenu">
      <a class="dropdown-item" href="javascript:void(0)">Action</a>
      <a class="dropdown-item" href="javascript:void(0)">Another action</a>
      <div class="dropdown-divider" />
      <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
    </div>
  </Dropdown>

Complete Placement Options

You can use more options than Vanilla Bootstrap by using placement option

Placement	Description
auto	Placements will choose the side with most space and it will be in the center of trigger element
auto-start	Placements will choose the side with most space and it will be in the start of trigger element
auto-end	Placements will choose the side with most space and it will be in the end of trigger element
top	Placements will be upside (dropup) and it will be in the center of trigger element
top-start	Placements will be upside (dropup) and it will be in the start of trigger element
top-end	Placements will be upside (dropup) and it will be in the end of trigger element
bottom	Placements will be downside (dropdown) and it will be in the center of trigger element
bottom-start	Placements will be downside (dropdown) and it will be in the start of trigger element
bottom-end	Placements will be downside (dropdown) and it will be in the end of trigger element
right	Placements will be rightside (dropright) and it will be in the center of trigger element
right-start	Placements will be rightside (dropright) and it will be in the start of trigger element
right-end	Placements will be rightside (dropright) and it will be in the end of trigger element
left	Placements will be leftside (dropleft) and it will be in the center of trigger element
left-start	Placements will be leftside (dropleft) and it will be in the start of trigger element
left-end	Placements will be leftside (dropleft) and it will be in the end of trigger element

Responsive alignment

If you want to use responsive alignment, disable dynamic positioning by using the displayStatic="true" attribute and use the responsive variation classes on option menuClasses in Dropdown component

---

NOTE

The containing element is div and .dropdown is the default class on the Dropdown component. As it's a block-level element so width will be 100% to change use classes options add .d-inline-block or .btn-group so that the menu will adjust properly.

---

Example

<script>
  import Dropdown from "sv-bootstrap-dropdown";
  let dropdownReponsiveTrigger;
</script>

<Dropdown
    triggerElement={dropdownReponsiveTrigger}
    displayStatic="true"
    menuClasses="dropdown-menu-lg-right"
    classes="d-inline-flex">
    <button
        type="button"
        class="btn btn-secondary dropdown-toggle"
        bind:this={dropdownReponsiveTrigger}>
        Left-aligned but right aligned when large screen
    </button>
    <div slot="DropdownMenu">
        <button class="dropdown-item" type="button">Action</button>
        <button class="dropdown-item" type="button">Another action</button>
        <button class="dropdown-item" type="button">Something else here</button>
    </div>
</Dropdown>

Offset option

The offset modifier lets you displace menu element from its parent dropdown element. This option takes an array of length 2 both item of array should be Number

Ex: [10,8]

• First array Element represent Skidding
• Seconf array Element represent Distance

Example

<script>
  import Dropdown from "sv-bootstrap-dropdown";
  let dropdownOffsetTrigger;
</script>

<Dropdown offset={[10, 20]} triggerElement={dropdownOffsetTrigger}>
    <button
        type="button"
        class="btn btn-success dropdown-toggle"
        bind:this={dropdownOffsetTrigger}>
        Dropdown
    </button>
    <div slot="DropdownMenu">
        <a class="dropdown-item" href="javascript:void(0)">Action</a>
        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
    </div>
</Dropdown>

---

PopperJS Documentation

In Popper 2 we no longer consider CSS margin because of inherent issues with it. Instead, to apply some padding between the popper and its reference element, use the offset modifier.

---

Therefore we have default distance offset as 2 to have exact distance as Vanilla Bootstrap

Component Options

Name	Type	Default	Description
open	boolean	false	You can use this to open the dropdown programtically from function.(Note: setting open to true on load may lead to bug of placement in popper u can use it with displayStatic option).
flip	boolean	true	Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js.
placement	string	'bottom-start'	Use placement option on Dropdown component for placement change.
displayStatic	boolean	false	By default, we use Popper.js for dynamic positioning. Disable this with displayStatic.
keyboard	boolean	true	Closes the dropdown when escape key is pressed.
insideClick	boolean	false	By default, a dropdown menu closes on document click, even if you clicked on an element inside the dropdown. Use insideClick="true" to allow click inside the dropdown.
closeOnOutsideClick	boolean	true	By default, a dropdown menu closes on document click. Use closeOnOutsideClick="false" to disable closing of dropdown on outside click.
offset	[?number, ?number] or Function(Definition)	[0,2]	The offset modifier lets you displace menu element from its parent dropdown element.
menuClasses	string	""	You can add any number of classes to .dropdown-menu element.
classes	string	""	You can add any number of classes to .dropdown element.
labelledby	string	""	Used for aria-labelledby on .dropdown-menu
onClosed	function	Empty function(noop)	Can be Used for callbacks After Dropdown is Closed
onOpened	function	Empty function(noop)	Can be Used for callbacks After Dropdown is Opened

License

Apache-2.0