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 represents Framework7’s Photo Browser component.

    There are following components included:

    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

    1. <template>
    2.   <f7-page>
    3.     <f7-navbar title="Photo Browser"></f7-navbar>
    5.     <f7-block>
    6.       <p>Photo Browser could be opened in a three ways - as a Standalone component (Popup modification), in Popup, and as separate Page:</p>
    7.       <f7-row>
    8.         <f7-col>
    9.           <f7-photo-browser
    10.             :photos="photos"
    11.             ref="standalone"
    12.           ></f7-photo-browser>
    13.           <f7-button raised @click="$refs.standalone.open()">Standalone</f7-button>
    14.         </f7-col>
    15.         <f7-col>
    16.           <f7-photo-browser
    17.             :photos="photos"
    18.             type="popup"
    19.             ref="popup"
    20.           ></f7-photo-browser>
    21.           <f7-button raised @click="$refs.popup.open()">Popup</f7-button>
    22.         </f7-col>
    23.         <f7-col>
    24.           <f7-photo-browser
    26.             back-link-text="Back"
    27.             ref="page"
    28.           ></f7-photo-browser>
    29.           <f7-button raised @click="$refs.page.open()">Page</f7-button>
    30.         </f7-col>
    31.       </f7-row>
    32.     </f7-block>
    34.     <f7-block>
    35.       <p>Photo Browser suppots 2 default themes - default Light (like in previous examples) and Dark theme. Here is a Dark theme examples:</p>
    36.       <f7-row>
    37.         <f7-col>
    38.           <f7-photo-browser
    39.             :photos="photos"
    40.             theme="dark"
    41.             ref="standaloneDark"
    42.           ></f7-photo-browser>
    43.           <f7-button raised @click="$refs.standaloneDark.open()">Standalone</f7-button>
    44.         </f7-col>
    45.         <f7-col>
    46.           <f7-photo-browser
    47.             :photos="photos"
    48.             theme="dark"
    49.             type="popup"
    50.             ref="popupDark"
    51.           ></f7-photo-browser>
    52.           <f7-button raised @click="$refs.popupDark.open()">Popup</f7-button>
    53.         </f7-col>
    54.         <f7-col>
    55.           <f7-photo-browser
    56.             :photos="photos"
    57.             theme="dark"
    58.             back-link-text="Back"
    59.             ref="pageDark"
    60.           ></f7-photo-browser>
    61.           <f7-button raised @click="$refs.pageDark.open()">Page</f7-button>
    62.         </f7-col>
    63.       </f7-row>
    64.     </f7-block>
    65.   </f7-page>
    66. </template>
    67. <script>
    68.   export default {
    69.     data() {
    70.       return {
    71.         photos: [
    72.           {
    73.             url: 'img/beach.jpg',
    74.             caption: 'Amazing beach in Goa, India',
    75.           },
    76.           'https://placekitten.com/1024/1024',
    77.           'img/lock.jpg',
    78.           {
    79.             url: 'img/monkey.jpg',
    80.             caption: 'I met this monkey in Chinese mountains',
    81.           },
    82.           {
    83.             url: 'img/mountains.jpg',
    84.             caption: 'Beautiful mountains in Zhangjiajie, China',
    85.           },
    86.         ],
    87.       };
    88.     },
    89.   }

    ← Panel / Side Panels