https://github.com/tpkn/vue-lightbox
Vue component that wraps any content into a lightbox popup
https://github.com/tpkn/vue-lightbox
Last synced: 3 months ago
JSON representation
Vue component that wraps any content into a lightbox popup
- Host: GitHub
- URL: https://github.com/tpkn/vue-lightbox
- Owner: tpkn
- License: mit
- Created: 2020-04-27T13:16:44.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-26T12:01:29.000Z (almost 5 years ago)
- Last Synced: 2025-01-14T08:12:53.675Z (4 months ago)
- Language: Vue
- Size: 5.86 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Lightbox
Vue component that wraps any content into a lightbox popup
## Props
### show
**Type**: _Boolean_
**Default**: `false`
### bgcolor
**Type**: _String_
**Default**: `rgba(0,0,0,.9)`
Darkening background color
### noscroll
**Type**: _String_ | _Boolean_
**Default**: `true`
Blocks vertical scrolling for the `body` tag
### zIndex
**Type**: _Number_
**Default**: `99999`
Lightbox element `z-index`
### theme
**Type**: _String_
Addition class for the lightbox instance
## Custom Events
### close
The event is triggered when the 'close' button is pressed
## Usage
```javascript
import Lightbox from './components/vue-lightbox.vue'
Vue.component('VueLightbox', Lightbox);
```
```html
- 001
- 002
- 003
- 004
- 005
```
Custom close button:
```css
.custom {
.close_button {
background-image: url('my_custom_close.svg');
}
}
```
You should set `.custom` class through `theme` attribute first.