Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/amirhoseinsalimi/vottom-sheet
A sleek, highly responsive, touch-friendly, full-featured Bottom Sheet component for Vue.js
https://github.com/amirhoseinsalimi/vottom-sheet
action-sheet actionsheet bottom-sheet bottom-sheets bottomsheet vue vuejs
Last synced: about 2 months ago
JSON representation
A sleek, highly responsive, touch-friendly, full-featured Bottom Sheet component for Vue.js
- Host: GitHub
- URL: https://github.com/amirhoseinsalimi/vottom-sheet
- Owner: amirhoseinsalimi
- License: mit
- Created: 2023-06-25T15:57:40.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-08-26T10:18:03.000Z (4 months ago)
- Last Synced: 2024-08-31T05:44:27.495Z (4 months ago)
- Topics: action-sheet, actionsheet, bottom-sheet, bottom-sheets, bottomsheet, vue, vuejs
- Language: Vue
- Homepage:
- Size: 12.9 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vottom Sheet
Vottom Sheet is a touch-friendly, lightweight and easy-to-use Vue.js component
that allows you to create smooth bottom sheets or modal dialogs in your web
application.
## Features
- Simple integration: Easily integrate the Vottom Sheet component into your Vue.js project with just a few lines of code.
- Smooth animations: Enjoy smooth and elegant animations as the bottom sheet slides into view and hides.
- Flexible: Use Vottom Sheet however you want.
- More to come...
## Installation
```bash copy
# npm:
npm install @amho/vottom-sheet
```
```bash copy
# or yarn:
yarn add @amho/vottom-sheet
```
```bash copy
# or pnpm:
pnpm add @amho/vottom-sheet
```
## How to use
```vue copy
import { ref } from 'vue';
import { VottomSheet } from '@amho/vottom-sheet';
const model = ref(false);
Open Vottom Sheet
Hello from Vottom Sheet!
```
## How to use in Nuxt.js
Just wrap the component inside `` provided by Nuxt.js. This is because vottom-sheet uses browser APIs that are not available on the server.
```vue copy
Hello from Vottom Sheet!
```
## Props
Vottom Sheet supports the following props (More props are going to be added):
| Prop | Type | Required | Default Value | Description |
|-----------------------|----------------------|----------|---------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `modelValue` | `Boolean` | ✅ | - | Control the visibility of the bottom sheet. Works in pair with `@update:modelValue` to enable 2-way data binding (`v-model`). |
| `fullscreen` | `Boolean` | ❌ | `false` | Make the component fullscreen. |
| `zIndex` | `String` or `Number` | ❌ | `0` | Specify the `z-index` of the bottom sheet. |
| `closeOnEscape` | `Boolean` | ❌ | `false` | Whether to close the bottom sheet on `Esc` key press. |
| `eager` | `Boolean` | ❌ | `false` | Force the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO. |
| `closeOnOverlayClick` | `Boolean` | ❌ | `false` | Whether to close the bottom sheet if the overlay is clicked. |
| `disableSwipe` | `Boolean` | ❌ | `false` | Disable the swipe-to-close functionality. |
| `transitionDuration` | `Boolean` | ❌ | `300` | Specify the transition duration of toggling the bottom sheet. |
## Events
| Event | Payload Type | Description |
|---------------------|--------------|------------------------------------------------------------------------------------------------------------------------------------------------|
| `update:modelValue` | `Boolean` | Works in pair with `modelValue` prop to enable 2-way data binding (`v-model`). Can be used to listen on state changes and trigger custom code. |
## Slots
| Slot | Description |
|-----------|--------------------------------------------------------------------------------------------------------------------------------|
| `default` | Insert the content that is going to be displayed inside the bottom sheet. |
| `handle` | Insert a custom handle for the bottom sheet which is displayed above the `content` slot and can be used to drag the component. |