manufont / React Swipeable Bottom Sheet
Licence: mit
A swipeable material's bottom sheet implementation, using react-swipeable-views
Stars: ✭ 106
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Swipeable Bottom Sheet
Ngx Materialize
Angular wrap around Materialize library
Stars: ✭ 322 (+203.77%)
Mutual labels: material-design, component
Folding Cell Android
📃 FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion
Stars: ✭ 4,859 (+4483.96%)
Mutual labels: material-design, component
React Swipeable Views
A React component for swipeable views. ❄️
Stars: ✭ 4,095 (+3763.21%)
Mutual labels: swipe, component
Yoshino
A themable React component library！Flexible Lightweight PC UI Components built on React! Anyone can generate easily all kinds of themes by it!
Stars: ✭ 216 (+103.77%)
Mutual labels: material-design, component
Tc Material Design
Série de artigos sobre o Material Design Android
Stars: ✭ 64 (-39.62%)
Mutual labels: material-design, bottomsheet
Bottomsheet
BottomSheet dialog library for Android
Stars: ✭ 219 (+106.6%)
Mutual labels: material-design, bottomsheet
Sheets
⭐ Offers a range of beautiful sheets (dialogs & bottom sheets) for quick use in your project. Includes many ways to customize sheets.
Stars: ✭ 441 (+316.04%)
Mutual labels: material-design, bottomsheet
Modalbottomsheetdialogfragment
Modal bottom sheet dialog based on the Material Guidelines
Stars: ✭ 421 (+297.17%)
Mutual labels: material-design, bottomsheet
React Notification
Provides snackbar notifications for React
Stars: ✭ 652 (+515.09%)
Mutual labels: material-design, component
Expanding Collection
ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion
Stars: ✭ 5,456 (+5047.17%)
Mutual labels: material-design, component
Garland View Android
≡ GarlandView seamlessly transitions between multiple lists of content. Made by @Ramotion
Stars: ✭ 1,855 (+1650%)
Mutual labels: material-design, component
React Swipeable List
Swipeable list component for React.
Stars: ✭ 86 (-18.87%)
Mutual labels: swipe, component
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (+10.38%)
Mutual labels: material-design, swipe
Vue Picture Swipe
🖼 Vue Picture Swipe Gallery (a gallery of image with thumbnails, lazy-load and swipe) backed by photoswipe
Stars: ✭ 322 (+203.77%)
Mutual labels: swipe, component
React Native Snackbar
🍱 Material Design "Snackbar" component for Android and iOS.
Stars: ✭ 613 (+478.3%)
Mutual labels: material-design, component
Wymaterialbutton
Interactive and fully animated Material Design button for iOS developers.
Stars: ✭ 80 (-24.53%)
Mutual labels: material-design, component
Webpack Component Loader
📦 A webpack loader to componentify CSS/JS/HTML without framework
Stars: ✭ 105 (-0.94%)
Mutual labels: component
Android Material Avatar
Example of material transition (AKA Hero views) to pick your profile avatar.
Stars: ✭ 102 (-3.77%)
Mutual labels: material-design
Swipeable Bottom Sheet
A swipeable material's bottom sheet implementation, that uses react-swipeable-views. This can be used to reproduce Material Design's Bottom Sheet guidelines
Installation
npm i -S react-swipeable-bottom-sheet
Demo & Examples
Usage
import SwipeableBottomSheet from 'react-swipeable-bottom-sheet';
<SwipeableBottomSheet overflowHeight={64}>
<div style={{ height: '240px' }}>
Here goes the content of your bottom sheet
</div>
</SwipeableBottomSheet>
The bottom sheet's height (when open) scales automatically with its content. If it exceeds the window height, content become scrollable.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| overflowHeight | number | 0 | The height (in px) of the sheet when closed. |
| open | bool | Use this property to enable controlled mode. If true, it will open the sheet. |
|
| defaultOpen | bool | false | If true, the sheet is open at component mount. |
| onChange | function(isOpen) | The callback that fires after sheet opens or closes. | |
| onTransitionEnd | function() | The callback that fires after opening or closing animation. | |
| fullScreen | bool | false | If true, the sheet takes the full height of the window when open. |
| marginTop | number | 0 | The top margin applied to the top of the sheet when open. Use this prop to prevent navbar overflow. |
| shadowTip | bool | true | If true, a box shadow is displayed at sheet bottom when closed. This is used to show that content is hidden below. |
| topShadow | bool | true | If true, a box shadow is displayed at sheet top border. |
| overlay | bool | true | If true, an overlay is displayed behind sheet when open. A click on the overlay closes the sheet. |
| scrollTopAtClose | bool | true | If true, the content is scrolled to the top when sheet closes. |
| swipeableViewsProps | object | {} |
Props passed to SwipeableViews component (see documentation). |
| style | object | {} |
Style applied on the root (non-swiped) component. |
| bodyStyle | object | {} |
Style applied on the body of the bottom sheet. |
| overlayStyle | object | {} |
Style applied on the overlay. |
Development (src, lib and the build process)
NOTE: The source code for the component is in src. A transpiled CommonJS version (generated with Babel) is available in lib for use with node.js, browserify and webpack. A UMD bundle is also built to dist, which can be included without the need for any build system.
To build the examples locally, run:
npm install
npm start
Then open localhost:8000 in a browser.
To build, watch and serve the examples (which will also watch the component source), run npm start. If you just want to watch changes to src and rebuild lib, run npm run watch (this is useful if you are working with npm link).
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].