Photo Browser Vue Component
Photo Browser is an photo browser component to display collection of photos / images. Photos can be zoomed and panned (optional).
Photo Browser Vue component doesn’t render any output. It can be used to create JS Photo Browser instance and control it inside of your Vue component.
Photo Browser Properties
You can pass all parameters in single params
property or use separate props for each parameter to specify them via component properties:
Photo Browser Methods
You can access Photo Browser initialized instance by accessing **.f7PhotoBrowser**
component’s property.
Examples
<template>
<f7-page>
<f7-navbar title="Photo Browser"></f7-navbar>
<f7-block>
<p>Photo Browser could be opened in a three ways - as a Standalone component (Popup modification), in Popup, and as separate Page:</p>
<f7-row>
<f7-col>
<f7-photo-browser
:photos="photos"
ref="standalone"
></f7-photo-browser>
<f7-button raised @click="$refs.standalone.open()">Standalone</f7-button>
</f7-col>
<f7-col>
<f7-photo-browser
:photos="photos"
type="popup"
ref="popup"
></f7-photo-browser>
<f7-button raised @click="$refs.popup.open()">Popup</f7-button>
<f7-col>
<f7-photo-browser
type="page"
back-link-text="Back"
ref="page"
></f7-photo-browser>
<f7-button raised @click="$refs.page.open()">Page</f7-button>
</f7-col>
</f7-row>
</f7-block>
<f7-block>
<p>Photo Browser suppots 2 default themes - default Light (like in previous examples) and Dark theme. Here is a Dark theme examples:</p>
<f7-row>
<f7-col>
<f7-photo-browser
:photos="photos"
theme="dark"
ref="standaloneDark"
></f7-photo-browser>
<f7-button raised @click="$refs.standaloneDark.open()">Standalone</f7-button>
</f7-col>
<f7-col>
<f7-photo-browser
:photos="photos"
theme="dark"
type="popup"
ref="popupDark"
></f7-photo-browser>
<f7-button raised @click="$refs.popupDark.open()">Popup</f7-button>
</f7-col>
<f7-col>
<f7-photo-browser
theme="dark"
back-link-text="Back"
ref="pageDark"
></f7-photo-browser>
<f7-button raised @click="$refs.pageDark.open()">Page</f7-button>
</f7-col>
</f7-row>
</f7-block>
</f7-page>
</template>
<script>
export default {
data() {
return {
photos: [
{
url: 'img/beach.jpg',
caption: 'Amazing beach in Goa, India',
},
'http://placekitten.com/1024/1024',
'img/lock.jpg',
{
url: 'img/monkey.jpg',
caption: 'I met this monkey in Chinese mountains',
},
{
url: 'img/mountains.jpg',
caption: 'Beautiful mountains in Zhangjiajie, China',
},
],
};
},
}