Bento

Bento Lightbox

<head>

    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-lightbox-1.0.css"
    />
    <script src="https://cdn.ampproject.org/bento.js"></script>
    <script
      async
      src="https://cdn.ampproject.org/v0/bento-lightbox-1.0.js"
    ></script>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
          'Segoe UI Symbol';
        margin: 2rem;
        background: #ecf1f3;
      }
      button {
        border: none;
        padding: 1rem 2rem;
        border-radius: 8px;
        color: #269da3;
        background: white;
        font-size: 18px;
        font-weight: bold;
        margin-right: 1rem;
      }
      .lightbox-content {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #269da3;
        height: 100%;
        flex-direction: column;
      }
    </style>
</head>

<body>

    <bento-lightbox id="my-lightbox" hidden>
      <div class="lightbox-content">
        <h1>Lightboxed content</h1>
        <button id="close-button">Close lightbox</button>
      </div>
    </bento-lightbox>
    <button id="open-button">Open lightbox</button>
    <script>
      (async () => {
        const lightboxElement = document.querySelector('#my-lightbox');
        await customElements.whenDefined('bento-lightbox');
        const lightbox = await lightboxElement.getApi();
        // set up button actions
        document.querySelector('#open-button').onclick = () => lightbox.open();
        document.querySelector('#close-button').onclick = () =>
          lightbox.close();
      })();
    </script>
</body>

在全视口“灯箱”模态中显示任何内容。

将 bento-lightbox 用作 Web 组件或 React 函数组件

↓ Web 组件 ↓ React / Preact

Web 组件

在添加自定义样式之前，必须先包含每个 Bento 组件所需的 CSS 库，以保证正确加载。或者使用内嵌的轻量级预升级样式。请参阅 布局和样式。

通过 npm 导入

npm install @bentoproject/lightbox
import {defineElement as defineBentoLightbox} from '@bentoproject/lightbox';
defineBentoLightbox();

通过 <script> 导入

<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-lightbox-1.0.mjs"></script>
<script nomodule async src="https://cdn.ampproject.org/v0/bento-lightbox-1.0.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-lightbox-1.0.css">

示例

<head>

<link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-lightbox-1.0.css"
    />
    <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-lightbox-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-lightbox-1.0.js"
    ></script>
</head>

<body>

<bento-lightbox id="my-lightbox" hidden>
      Lightboxed content
      <button id="close-button">Close lightbox</button>
    </bento-lightbox>
    <button id="open-button">Open lightbox</button>
    <script>
      (async () => {
        const lightbox = document.querySelector('#my-lightbox');
        await customElements.whenDefined('bento-lightbox');
        const api = await lightbox.getApi();

        // set up button actions
        document.querySelector('#open-button').onclick = () => api.open();
        document.querySelector('#close-button').onclick = () => api.close();
      })();
    </script>
</body>

交互性和 API 使用

Bento 组件通过其 API 具有很强的交互性。通过在文档中包含以下脚本标签，可以访问 bento-lightbox 组件 API

await customElements.whenDefined('bento-lightbox');
const api = await lightbox.getApi();

操作

amp-lightbox API 允许你执行以下操作

open()

打开灯箱。

api.open();
close()

关闭灯箱。

api.close();

事件

amp-lightbox API 允许你注册并响应以下事件

open

当灯箱打开时触发此事件。

lightbox.addEventListener('open', (e) => console.log(e));
close

当灯箱关闭时触发此事件。

lightbox.addEventListener('close', (e) => console.log(e));

布局和样式

每个 Bento 组件都有一个小型 CSS 库，你必须包含该库才能保证在没有 内容偏移 的情况下正确加载。由于基于顺序的特异性，你必须手动确保在任何自定义样式之前包含样式表。

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

或者，你还可以使轻量级的预升级样式内嵌可用

<style>
  bento-lightbox {
    display: none !important;
  }
</style>

属性

id

灯箱的唯一标识符。

hidden

当灯箱关闭且不应显示内容（例如在首次布局时）时，必须存在。

animation

定义打开灯箱的动画样式。默认情况下，这将设置为 fade-in。有效值包括 fade-in、fly-in-bottom 和 fly-in-top。

scrollable

当 scrollable 属性存在时，当灯箱高度溢出时，灯箱的内容可以滚动。

API 示例

<head>

<link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-lightbox-1.0.css"
    />
    <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-lightbox-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-lightbox-1.0.js"
    ></script>
</head>

<body>

<bento-lightbox id="my-lightbox" hidden>
      Lightboxed content
      <button id="close-button">Close lightbox</button>
    </bento-lightbox>
    <button id="open-button">Open lightbox</button>
    <script>
      (async () => {
        const lightbox = document.querySelector('#my-lightbox');
        await customElements.whenDefined('bento-lightbox');
        const api = await lightbox.getApi();

        // set up button actions
        document.querySelector('#open-button').onclick = () => api.open();
        document.querySelector('#close-button').onclick = () => api.close();
      })();
    </script>
</body>

Preact/React 组件

通过 npm 导入

npm install @bentoproject/lightbox
import React from 'react';
import {BentoLightbox} from '@bentoproject/lightbox/react';
import '@bentoproject/lightbox/styles.css';
function App() {
  return (
    <BentoLightbox
      id="lightbox"
      closeButtonAs={(props) => (
        <button {...props} aria-label="Close my fancy lightbox">
          Close!
        </button>
      )}
    >
      <p>Hello World</p>
    </BentoLightbox>
  );
}

布局和样式

容器类型

BentoLightbox 组件具有已定义的布局大小类型。为确保组件正确呈现，请务必通过所需 CSS 布局（例如使用 height、width、aspect-ratio 或其他此类属性定义的布局）对组件及其直接子级（幻灯片）应用大小。这些可以内联应用

<BentoLightbox style={{width: 300, height: 200}}></BentoLightbox>

或通过 className

<BentoLightbox className="custom-styles"></BentoLightbox>
.custom-styles {
  height: 100px;
  width: 100%;
}

属性

animation

用于显示灯箱的动画。选项为 fade-in、fly-in-top 或 fly-in-bottom，默认值为 fade-in。

children

此灯箱中显示的内容。

closeButtonAs

一个属性，它采用一个函数（作为渲染属性）来指定自定义关闭按钮。

onBeforeOpen

一个属性，它采用一个函数，该函数在灯箱打开之前执行。

onAfterOpen

一个属性，它采用一个函数，该函数在灯箱打开后执行。

onAfterClose

一个属性，它采用一个函数，该函数在灯箱关闭后执行。

我们在本网站上提供 Cookie，以分析流量并优化您的体验。
更多详情