Bento

Bento 內嵌相簿

<head>

    <script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.css"
    />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.css"
    />
</head>

<body>

    <bento-inline-gallery id="inline-gallery">
      <bento-inline-gallery-thumbnails
        style="height: 100px"
        loop
      ></bento-inline-gallery-thumbnails>
      <bento-base-carousel
        style="height: 200px"
        snap-align="center"
        visible-count="3"
        loop
      >
        <img
          src="https://picsum.photos/id/237/640/480"
          data-thumbnail-src="https://picsum.photos/id/237/64/48"
        />
        <img
          src="https://picsum.photos/id/238/640/480"
          data-thumbnail-src="https://picsum.photos/id/238/64/48"
        />
        <img
          src="https://picsum.photos/id/239/640/480"
          data-thumbnail-src="https://picsum.photos/id/239/64/48"
        />
        <img
          src="https://picsum.photos/id/240/640/480"
          data-thumbnail-src="https://picsum.photos/id/240/64/48"
        />
        <img
          src="https://picsum.photos/id/241/640/480"
          data-thumbnail-src="https://picsum.photos/id/241/64/48"
        />
        <img
          src="https://picsum.photos/id/242/640/480"
          data-thumbnail-src="https://picsum.photos/id/242/64/48"
        />
      </bento-base-carousel>
      <bento-inline-gallery-pagination
        style="height: 20px"
      ></bento-inline-gallery-pagination>
    </bento-inline-gallery>
</body>

顯示投影片，可搭配分頁點和縮圖。實作上使用 Bento 基本走馬燈。兩個元件都必須正確安裝到環境中（網頁元件相對於 Preact）。

將 bento-inline-gallery 作為網頁元件或 React 函式元件使用

↓ 網頁元件 ↓ React / Preact

網頁元件

必須包含每個 Bento 元件所需的 CSS 函式庫才能保證正確載入，並在新增自訂樣式前執行。或者，也可以使用內嵌的輕量化預升級樣式。請參閱 版面配置和樣式。

透過 npm 匯入

npm install @bentoproject/inline-gallery
import {defineElement as defineBentoInlineGallery} from '@bentoproject/inline-gallery';
defineBentoInlineGallery();

透過 <script> 匯入

<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.css" crossorigin="anonymous">

範例

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>

    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.css"
    />

    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.css"
    />
</head>

<body>

<bento-inline-gallery id="inline-gallery">
      <bento-inline-gallery-thumbnails
        style="height: 100px"
        loop
      ></bento-inline-gallery-thumbnails>

      <bento-base-carousel
        style="height: 200px"
        snap-align="center"
        visible-count="3"
        loop
      >
        <img src="img1.jpeg" data-thumbnail-src="img1-thumbnail.jpeg" />
        <img src="img2.jpeg" data-thumbnail-src="img2-thumbnail.jpeg" />
        <img src="img3.jpeg" data-thumbnail-src="img3-thumbnail.jpeg" />
        <img src="img4.jpeg" data-thumbnail-src="img4-thumbnail.jpeg" />
        <img src="img5.jpeg" data-thumbnail-src="img5-thumbnail.jpeg" />
        <img src="img6.jpeg" data-thumbnail-src="img6-thumbnail.jpeg" />
      </bento-base-carousel>

      <bento-inline-gallery-pagination
        style="height: 20px"
      ></bento-inline-gallery-pagination>
    </bento-inline-gallery>
</body>

版面配置和樣式

每個 Bento 元件都有個小型 CSS 函式庫，必須包含它才能保證正確載入，並避免內容變動。由於特定性基於順序，必須手動確保在任何自訂樣式前包含樣式表。

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.css"
/>

或者，也可以讓輕量化的預升級樣式內嵌

<style>
  bento-inline-gallery,
  bento-inline-gallery-pagination,
  bento-inline-gallery-thumbnails {
    display: block;
  }
  bento-inline-gallery {
    contain: layout;
  }
  bento-inline-gallery-pagination,
  bento-inline-gallery-thumbnails {
    overflow: hidden;
    position: relative;
  }
</style>

內嵌

布林屬性，表示是否將分頁指標顯示為內嵌（重疊走馬燈本身）。預設值為 false。

長寬比

定義投影片應顯示的寬高比之數字。此值為選用。

迴圈

布林屬性，表示是否應讓縮圖迴圈。預設值為 false。

樣式

可以使用 bento-inline-gallery、bento-inline-gallery-pagination、bento-inline-gallery-thumbnails 和 bento-base-carousel 元素選擇器自由設定分頁指標、縮圖和走馬燈的樣式。

Preact/React 元件

透過 npm 匯入

npm install @bentoproject/inline-gallery
import React from 'react';
import {BentoInlineGallery} from '@bentoproject/inline-gallery/react';
import '@bentoproject/inline-gallery/styles.css';

function App() {
  return (
    <BentoInlineGallery id="inline-gallery">
      <BentoInlineGalleryThumbnails aspect-ratio="1.5" loop />
      <BentoBaseCarousel snap-align="center" visible-count="1.2" loop>
        <img src="server.com/static/inline-examples/images/image1.jpg" />
        <img src="server.com/static/inline-examples/images/image2.jpg" />
        <img src="server.com/static/inline-examples/images/image3.jpg" />
      </BentoBaseCarousel>
      <BentoInlineGalleryPagination inset />
    </BentoInlineGallery>
  );
}

版面配置和樣式

容器類型

BentoInlineGallery 元件已定義版面配置大小類型。為確保元件正確呈現，務必透過想要的 CSS 版面配置（例如以 width 定義的版面配置）為元件和其直接包含的子項目套用大小。可以直接套用

<BentoInlineGallery style={{width: 300}}>...</BentoInlineGallery>

或透過 className

<BentoInlineGallery className="custom-styles">...</BentoInlineGallery>
.custom-styles {
  background-color: red;
}

BentoInlineGalleryPagination 的屬性

除了共用屬性之外，BentoInlineGalleryPagination 也支援下列屬性

內嵌

布林屬性，表示是否將分頁指標顯示為內嵌（重疊走馬燈本身）。預設值為 false。

BentoInlineGalleryThumbnails 的屬性

除了共用屬性之外，BentoInlineGalleryThumbnails 也支援下列屬性

長寬比

定義投影片顯示寬高比的數字（這是選項）。

迴圈

布林屬性，指出縮圖是否應該迴圈播放。預設為 false。

我們在此網站上提供 Cookie 服務，以分析流量並優化您的體驗。
更多詳情