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

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

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

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

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

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

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

    • 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このイベントは、ユーザーがフォトブラウザを上下にスワイプして閉じたときに発生します。

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

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

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

    フォトブラウザのインスタンスへのアクセス

    Photo Browserの初期化されたインスタンスにアクセスするには、.instance()コンポーネントのメソッドを呼び出します。例えば、以下のようになります。

    <PhotoBrowser bind:this={component}>...</PhotoBrowser>

<script>
  let component;

  // あるメソッドでインスタンスを取得する
  component.instance()
</script>

    Examples

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

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

  </Block>
</Page>
  


<script>
  import {Page, Navbar, Block, Row, Col, PhotoBrowser, Button} from 'framework7-svelte';

  let standalone;
  let popup;
  let page;

  let standaloneDark;
  let popupDark;
  let pageDark;

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

</script>