Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

A touch-friendly bottom sheet component for Bootstrap 5

License

NotificationsYou must be signed in to change notification settings

mironovsergey/bootstrap-sheet

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

npm versionnpm downloadsBundle SizeLicenseBuild StatuscodecovKnown VulnerabilitiesDemo

Touch-friendly bottom sheet component for Bootstrap 5 — supports swipe gestures, backdrop, focus management, and is built with accessibility in mind.

Documentation ·Report Bug ·Request Feature ·Discussions

Table of contents

Installation

NPM

npm install bootstrap-sheet

Yarn

yarn add bootstrap-sheet

CDN

jsDelivr

<!-- CSS --><linkhref="https://cdn.jsdelivr.net/npm/bootstrap-sheet@latest/dist/css/bootstrap-sheet.min.css"rel="stylesheet"/><!-- JavaScript --><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap-sheet@latest/dist/js/bootstrap-sheet.min.js"></script>

unpkg

<!-- CSS --><linkhref="https://unpkg.com/bootstrap-sheet@latest/dist/css/bootstrap-sheet.min.css"rel="stylesheet"/><!-- JavaScript --><scriptsrc="https://unpkg.com/bootstrap-sheet@latest/dist/js/bootstrap-sheet.min.js"></script>

Download

Download the latest release and include the compiled CSS and JavaScript files in your project.

Quick Start

Via data attributes

Activate a sheet without writing JavaScript. Setdata-bs-toggle="sheet" on a controller element, like a button, along with adata-bs-target="#foo" orhref="#foo" to target a specific sheet to toggle.

<!-- Button trigger --><buttontype="button"class="btn btn-primary"data-bs-toggle="sheet"data-bs-target="#mySheet">  Launch sheet</button><!-- Sheet --><divclass="sheet"id="mySheet"tabindex="-1"data-bs-backdrop="true"data-bs-keyboard="true"data-bs-focus="true"><divclass="sheet-handle"data-bs-drag="sheet"></div><divclass="sheet-header"><h5class="sheet-title">Sheet title</h5><buttontype="button"class="btn-close"data-bs-dismiss="sheet"aria-label="Close"></button></div><divclass="sheet-body"><p>Sheet body text goes here.</p></div><divclass="sheet-footer"><buttontype="button"class="btn btn-secondary"data-bs-dismiss="sheet">Close</button><buttontype="button"class="btn btn-primary">Save changes</button></div></div>

Via JavaScript

importBootstrapSheetfrom'bootstrap-sheet';// Create instance (selector or Element accepted)constsheet=newBootstrapSheet('#mySheet',{backdrop:true,keyboard:true,focus:true,gestures:true,});// Show the sheetsheet.show();

More examples:Live Demo

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name todata-bs-, as indata-bs-backdrop="static".

UI Options

NameTypeDefaultDescription
backdropboolean or'static'trueIncludes a backdrop element. Use'static' for a backdrop that doesn't close the sheet when clicked.
keyboardbooleantrueCloses the sheet when escape key is pressed.
focusbooleantruePuts focus on the sheet when initialized and traps focus within it.

Gesture Options

NameTypeDefaultDescription
gesturesbooleantrueEnable/disable swipe gestures.
swipeThresholdnumber50Minimum swipe distance (px) to trigger close.
velocityThresholdnumber0.5Minimum velocity (px/ms) to trigger close.
minCloseDistancenumber50Minimum distance (px) for velocity-based close.
closeThresholdRationumber0.3Ratio of sheet height (0-1) to trigger close when released.

Animation Options

NameTypeDefaultDescription
animationDurationnumber300Animation duration in milliseconds.
projectionTimenumber200Time (ms) to project velocity for momentum-based closing.
dragResistanceUpnumber0.75Resistance when dragging up (0-1, higher = more resistance).
dragResistanceDownnumber0.01Resistance when dragging down (0-1, higher = more resistance).

Methods

All methods areasynchronous and return to the caller as soon as the transition starts.

constsheet=BootstrapSheet.getInstance('#mySheet');
MethodDescription
show()Opens the sheet.
hide()Closes the sheet.
toggle()Toggles the sheet visibility.
dispose()Destroys the sheet instance and removes all event listeners.
getInstance(element) (static)Returns the sheet instance associated with a DOM element ornull if not initialized.
getOrCreateInstance(element, config?) (static)Gets existing instance or creates a new one if it doesn't exist.

Properties

PropertyTypeDescription
isShownbooleanReturnstrue if the sheet is currently visible.
isTransitioningbooleanReturnstrue if the sheet is currently animating.

Events

All events are fired at the sheet element itself.

Event TypeDescription
show.bs.sheetFired immediately when theshow() method is called.
shown.bs.sheetFired when the sheet has been made visible to the user (after CSS transitions complete).
hide.bs.sheetFired immediately when thehide() method is called.
hidden.bs.sheetFired when the sheet has finished being hidden from the user (after CSS transitions complete).
slide.bs.sheetFired continuously during drag/slide gestures. Event detail containsvelocity,adjustedY,deltaY,ratio.
document.getElementById('mySheet').addEventListener('shown.bs.sheet',(event)=>{console.log('Sheet is now visible');});

Sass variables

Customize the appearance by overriding these Sass variables:

// Z-index$sheet-zindex:1057!default;// Dimensions$sheet-width:100vw!default;$sheet-max-width:100%!default;$sheet-max-height:90vh!default;// Colors$sheet-bg:var(--bs-body-bg,#fff)!default;$sheet-backdrop-bg:rgba(0,0,0,0.5)!default;$sheet-backdrop-backdrop-filter:blur(2px)!default;// Transitions$sheet-transition-duration:0.3s!default;$sheet-transition-timing:ease-out!default;// Handle$sheet-handle-bg:var(--bs-gray-400,#dee2e6)!default;$sheet-handle-hover-bg:var(--bs-gray-500,#adb5bd)!default;$sheet-handle-width:3rem!default;$sheet-handle-height:0.25rem!default;$sheet-handle-margin:0.5remauto!default;$sheet-handle-hit-area:2rem!default;// Spacing$sheet-padding-x:1rem!default;$sheet-padding-y:1rem!default;$sheet-header-padding-y:0.75rem!default;$sheet-body-padding-y:1rem!default;$sheet-footer-padding-y:0.75rem!default;// Visual effects$sheet-box-shadow:0-2px10pxrgba(0,0,0,0.1)!default;$sheet-border-width:1px!default;$sheet-border-color:var(--bs-border-color,#dee2e6)!default;$sheet-border-radius:1rem1rem00!default;// Focus$sheet-focus-ring-width:0.25rem!default;$sheet-focus-ring-color:rgba(13,110,253,0.25)!default;// Animations$sheet-shake-distance:10px!default;// States$sheet-disabled-opacity:0.65!default;

Accessibility

Bootstrap Sheet follows WCAG 2.1 Level AA guidelines:

  • ARIA attributes — Automatically appliesrole="dialog" andaria-modal="true"
  • Focus management — Traps focus within the sheet and restores it on close
  • Keyboard navigation — Full support for Tab, Shift+Tab, and Escape keys
  • Inert background — Uses nativeinert attribute witharia-hidden fallback
  • Screen reader support — Announces state changes with proper context
  • Reduced motion — Respectsprefers-reduced-motion user preference

Contributing

Contributions are welcome! Please read ourContributing Guidelines before submitting a Pull Request.

Versioning

Bootstrap Sheet followsSemantic Versioning. For available versions, seeReleases.

License

Code and documentation © 2025Sergey Mironov

Code released under theMIT License

Documentation released underCreative Commons Attribution 3.0

Author

Sergey Mironov

⬆ Back to top

Made with ❤️ bySergey Mironov

[8]ページ先頭
©2009-2025 Movatter.jp