开始使用 Bento

Bento 是一组可混合搭配的高性能 Web 组件，可轻松自定义以满足您的网站功能需求。Bento 组件经过充分测试，与现代浏览器兼容，并且可在许多开发环境中使用。您可以在您的网站上使用一个、一些或所有 Bento 组件！而且，由于 Bento 组件是自维护的，因此它们可以与任何其他框架或组件库配合使用。

按照以下简单步骤，开始在您的网站中使用 Bento 组件

1.

确定哪条路径适合您的网站环境。如果您使用 React 或 Preact 来渲染您的页面，请使用 React 版本，在所有其他情况下，请尝试 Web 组件版本。

2.

选择一个适合您需求的组件并安装或导入它。

3.

使用组件的 API 来自定义功能。

4.

坐下来，放松一下，享受您的开箱即用组件！

React 和 Preact

Bento 组件从本质上是 React 函数组件，以 Preact 或 React 形式发布，并采用常规或精简构建。根据需要通过 npm 安装每个 Bento 组件，然后按需导入它。所示示例在常规构建中使用 React <BentoFitText>。

就是这样！

所有 bento 组件

npm install @bentoproject/bento-fit-text

import React from "react";
import { BentoFitText } from "@bentoproject/bento-fit-text/react";
import "@bentoproject/bento-fit-text/styles.css";

function App() {
  return (
    <BentoFitText>
      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
      inermis reprehendunt.
    </BentoFitText>
  );
}

Web 组件

有两种方法可以将 Bento 组件集成到 HTML 文档中

1. 使用 npm 安装并导入元素。 2. 在文档的头部包含组件 <script>。

您必须在添加自定义样式之前包含每个 Bento 组件所需的 CSS 库，以避免加载时出现布局偏移。为了保证最佳加载性能，最好将轻量级预升级样式直接内联到页面中。有关详细信息，请参阅每个组件的布局和样式部分。

所有 bento 组件

通过 npm 安装 `bento-fit-text`

npm install @bentoproject/bento-fit-text

import '@bentoproject/bento-fit-text';

通过 CDN 使用 `bento-fit-text`

<!DOCTYPE html>
<html>
  <head>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      async
      type="module"
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script
      async
      nomodule
      src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.js"
    ></script>
    <script
      async
      type="module"
      src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-fit-text-1.0.css"
    />
  </head>
  <body>
    <bento-fit-text style="width: 400px; height: 300px">
      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
      inermis reprehendunt.
    </bento-fit-text>
  </body>
</html>

浏览器支持

Bento 组件支持大多数主流浏览器的最新两个版本，如 Chrome、Firefox、Edge、Safari、Opera 和 UC 浏览器。我们支持这些相应浏览器的台式机、手机、平板电脑和 Web 视图版本。

为 Bento 做出贡献

需要一个组件但没有看到它列出？遇到您知道如何修复的错误？好消息！Bento 是 AMP 项目下的开源项目，如果没有我们出色的社区，我们就无法做到这一点。加入我们，立即开始做出贡献！

立即加入我们

在文档中发现所有可用的 Bento 组件。

发现文档