フォト・ブラウザ Vueコンポーネント

Photo Browserは、写真や画像のコレクションを表示するフォトブラウザコンポーネントです。写真はズームしたり、パンしたりすることができます（オプション）。

Photo Browser Vueコンポーネントは、Framework7のPhoto Browserコンポーネントを表しています。

Photo Browser Vueコンポーネントは、何も出力しません。JS Photo Browserのインスタンスを作成し、Vueコンポーネントの中で制御するために使用できます。

フォトブラウザコンポーネント

以下のコンポーネントが含まれています。

f7-photo-browser (フォトブラウザ)

フォトブラウザのプロパティ

すべてのパラメータを単一の params プロパティで渡すことも、各パラメータに個別のプロップを使用して、コンポーネントのプロパティで指定することもできます。

Prop	Type	Default	Description
<f7-photo-browser> properties
init	boolean	true	フォトブラウザを初期化します。
params	Object		フォトブラウザのパラメータを持つオブジェクト
photos	array	[]	写真のURLを含む配列、または "url"(または "html")と "caption "プロパティを持つオブジェクトの配列。
url	string	photos/	現在のルートとして設定されるフォトブラウザのモーダルURL
routable-modals	boolean	false	開いたフォトブラウザをルータの履歴に追加し、ルータの履歴に戻ってフォトブラウザを閉じることができるようにし、フォトブラウザのモーダルに現在のルートを設定します。
swiper	object		Swiperパラメータを持つオブジェクト。デフォルトでは、次のようになります。 `swiper: { initialSlide: 0, spaceBetween: 20, speed: 300, loop: false, preloadImages: true, navigation: { nextEl: '.photo-browser-next', prevEl: '.photo-browser-prev', }, zoom: { enabled: true, maxRatio: 3, minRatio: 1, }, lazy: { enabled: true, }, },`
virtual-slides	boolean	true	有効にすると、Swiperは仮想スライドを使用します。
exposition	boolean	true	フォトブラウザ]をクリックしたときの露出モードを無効にします。
exposition-hide-captions	boolean	false	露出モードでキャプションも隠したい場合はtrueに設定します。
swipe-to-close	boolean	true	このパラメータを有効にすると、上/下へのスワイプでフォトブラウザを閉じることができます。
type	string	standalone	フォトブラウザをどのように開くかを定義します。standalone `(カスタムのトランジション効果を持つオーバーレイとして開かれます)、`popup `(ポップアップとして開かれます)、`page` (ビューに注入され、新しいページとしてロードされます)などが考えられます。
theme	string	light	フォトブラウザのカラーテーマは、`light`または`dark`です。
captions-theme	string		キャプションのカラーテーマは、 `dark` または `light` になります。デフォルトでは、"theme" パラメータと同じです。
navbar	boolean	true	falseに設定すると、フォトブラウザのナビゲーションバーが削除されます。
toolbar	boolean	true	フォトブラウザのツールバーを削除するには、falseに設定します。
page-back-link-text	string	Back	フォトブラウザのナビバーにあるバックリンクのテキスト
popup-close-link-text	string	Close	ポップアップまたはスタンドアロンで開いたときにフォトブラウザのナビバーの閉じるリンクに表示されるテキスト
navbar-show-count	boolean	undefined	ナビバーのタイトルに「3 of 5」のテキストを表示するかどうかを定義します。指定されていない（未定義）場合は、アイテムが1つ以上ある場合にこのテキストを表示します。
navbar-of-text	string	of	写真カウンターの "of "のテキスト。"3 of 5"
icons-color	string		デフォルトカラーのうちのひとつ

フォトブラウザのイベント

Event	Description
<f7-photo-browser> events
photobrowser:open	フォトブラウザの起動時にイベントが発生します。
photobrowser:opened	フォトブラウザのオープニングアニメーションが完了するとイベントが発生します。
photobrowser:close	イベントはフォトブラウザの終了時に発生します。
photobrowser:closed	イベントは、フォトブラウザが閉じるアニメーションを完了した後に発生します。
photobrowser:swipetoclose	このイベントは、ユーザーがフォトブラウザを上下にスワイプして閉じたときに発生します。

フォトブラウザのメソッド

フォトブラウザのコンポーネントには、次のようなメソッドが用意されています（例：$refsからのアクセス）。

<f7-photo-browser> methods
.open(index);	index "パラメータに等しいインデックス番号を持つフォトに対してフォトブラウザを開く。index」パラメータが指定されていない場合、最後に閉じたフォトで開かれます。
.close();	フォトブラウザを閉じる
.expositionToggle();	解説モードの切り替え
.expositionEnable();	解説モードの有効化
.expositionDisable();	解説モードを無効にする

Examples

<template>
<f7-page>
  <f7-navbar title="Photo Browser"></f7-navbar>

  <f7-block strong>
    <p>
      Photo Browser could be opened in a three ways - as a Standalone component (Popup
      modification), in Popup, and as separate Page:
    </p>
    <p>
      <f7-photo-browser
        :photos="photos"
        ref="standalone"
        :routable-modals="false"
      ></f7-photo-browser>
      <f7-button fill raised @click="$refs.standalone.open()">Standalone</f7-button>
    </p>
    <p>
      <f7-photo-browser
        :photos="photos"
        type="popup"
        ref="popup"
        :routable-modals="false"
      ></f7-photo-browser>
      <f7-button fill raised @click="$refs.popup.open()">Popup</f7-button>
    </p>
    <p>
      <f7-photo-browser
        :photos="photos"
        type="page"
        back-link-text="Back"
        ref="page"
        :routable-modals="false"
      ></f7-photo-browser>
      <f7-button fill raised @click="$refs.page.open()">Page</f7-button>
    </p>
  </f7-block>

  <f7-block strong>
    <p>
      Photo Browser supports 2 default themes - default Light (like in previous examples) and
      Dark theme. Here is a Dark theme examples:
    </p>
    <p>
      <f7-photo-browser
        :photos="photos"
        theme="dark"
        ref="standaloneDark"
        :routable-modals="false"
      ></f7-photo-browser>
      <f7-button fill raised @click="$refs.standaloneDark.open()">Standalone</f7-button>
    </p>
    <p>
      <f7-photo-browser
        :photos="photos"
        theme="dark"
        type="popup"
        ref="popupDark"
        :routable-modals="false"
      ></f7-photo-browser>
      <f7-button fill raised @click="$refs.popupDark.open()">Popup</f7-button>
    </p>
    <p>
      <f7-photo-browser
        :photos="photos"
        theme="dark"
        type="page"
        back-link-text="Back"
        ref="pageDark"
        :routable-modals="false"
      ></f7-photo-browser>
      <f7-button fill raised @click="$refs.pageDark.open()">Page</f7-button>
    </p>
  </f7-block>
</f7-page>
</template>

<script>
export default {
  data() {
    return {
      photos: ['https://placekitten.com/800/800', 'https://placekitten.com/1024/1024'],
    };
  },
};
</script>