v6.3.3
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
スポンサー
Support Framework7

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

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

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

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

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

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

    • PhotoBrowser (フォトブラウザ)

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

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

    PropTypeDefaultDescription
    <PhotoBrowser> properties
    initbooleantrueフォトブラウザを初期化します。
    paramsObjectフォトブラウザのパラメータを持つオブジェクト
    photosarray[]写真のURLを含む配列、または "url"(または "html")と "caption "プロパティを持つオブジェクトの配列。
    urlstringphotos/現在のルートとして設定されるフォトブラウザのモーダルURL
    routableModalsbooleanfalse開いたフォトブラウザをルータの履歴に追加し、ルータの履歴に戻ってフォトブラウザを閉じることができるようにし、フォトブラウザモーダルに現在のルートを設定します。
    swiperobjectSwiperパラメータを持つオブジェクト。デフォルトでは、次のようになります。
    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,
  },
},
    virtualSlidesbooleantrue有効にすると、Swiperは仮想スライドを使用します。
    expositionbooleantrueフォトブラウザ]をクリックしたときの露出モードを無効にします。
    expositionHideCaptionsbooleanfalse露出モードでキャプションも隠したい場合はtrueに設定します。
    swipeToClosebooleantrueこのパラメータを有効にすると、上/下へのスワイプでフォトブラウザを閉じることができます。
    typestringstandaloneフォトブラウザをどのように開くかを定義します。standalone (カスタムのトランジション効果を持つオーバーレイとして開かれます)、popup (ポップアップとして開かれます)、page` (ビューに注入され、新しいページとしてロードされます)などが考えられます。
    themestringlightフォトブラウザのカラーテーマは、lightまたはdarkです。
    captionsThemestringキャプションのカラーテーマは、 dark または light になります。デフォルトでは、"theme" パラメータと同じです。
    navbarbooleantruefalseに設定すると、フォトブラウザのナビゲーションバーが削除されます。
    toolbarbooleantrueフォトブラウザのツールバーを削除するには、falseに設定します。
    pageBackLinkTextstringBackフォトブラウザのナビバーにあるバックリンクのテキスト
    popupCloseLinkTextstringCloseポップアップまたはスタンドアロンで開いたときにフォトブラウザのナビバーの閉じるリンクに表示されるテキスト
    navbarShowCountbooleanundefinedナビバーのタイトルに「3 of 5」のテキストを表示するかどうかを定義します。指定されていない（未定義）場合は、アイテムが1つ以上ある場合にこのテキストを表示します。
    navbarOfTextstringof写真カウンターの "of "のテキスト。"3 of 5"
    iconsColorstringデフォルトの色のうちの一つです。

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

    EventDescription
    <PhotoBrowser> events
    photoBrowserOpenフォトブラウザの起動時にイベントが発生します。
    photoBrowserOpenedフォトブラウザのオープニングアニメーションが完了するとイベントが発生します。
    photoBrowserCloseイベントはフォトブラウザの終了時に発生します。
    photoBrowserClosedイベントは、フォトブラウザが閉じるアニメーションを完了した後に発生します。
    photoBrowserSwipeToCloseこのイベントは、ユーザーがフォトブラウザを上下にスワイプして閉じたときに発生します。

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

    以下のフォト・ブラウザ・コンポーネントのメソッドが利用できます（例：refでアクセスする）。

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

    Examples

    import React, { useRef } from 'react';
import { Page, Navbar, Block, Row, Col, PhotoBrowser, Button } from 'framework7-react';

export default () => {
  const standalone = useRef(null);
  const popup = useRef(null);
  const page = useRef(null);
  const standaloneDark = useRef(null);
  const popupDark = useRef(null);
  const pageDark = useRef(null);

  const photos = ['https://placekitten.com/800/800', 'https://placekitten.com/1024/1024'];

  return (
    
      
    <Page>
      <Navbar title="Photo Browser"></Navbar>

      <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>
          <PhotoBrowser photos={photos} ref={standalone} />
          <Button fill raised onClick={() => standalone.current.open()}>
            Standalone
          </Button>
        </p>
        <p>
          <PhotoBrowser photos={photos} type="popup" ref={popup} />
          <Button fill raised onClick={() => popup.current.open()}>
            Popup
          </Button>
        </p>
        <p>
          <PhotoBrowser photos={photos} type="page" pageBackLinkText="Back" ref={page} />
          <Button fill raised onClick={() => page.current.open()}>
            Page
          </Button>
        </p>
      </Block>
      <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>
          <PhotoBrowser photos={photos} theme="dark" ref={standaloneDark} />
          <Button fill raised onClick={() => standaloneDark.current.open()}>
            Standalone
          </Button>
        </p>
        <p>
          <PhotoBrowser photos={photos} theme="dark" type="popup" ref={popupDark} />
          <Button fill raised onClick={() => popupDark.current.open()}>
            Popup
          </Button>
        </p>
        <p>
          <PhotoBrowser
            photos={photos}
            theme="dark"
            type="page"
            pageBackLinkText="Back"
            ref={pageDark}
          />
          <Button fill raised onClick={() => pageDark.current.open()}>
            Page
          </Button>
        </p>
      </Block>
    </Page>
      
    
  );
};