開始使用 Bento

Bento 是一組可互相搭配的高效能網頁元件，您可以輕鬆自訂這些元件，以滿足您的網站功能需求。Bento 元件經過嚴格測試，相容於各種現代瀏覽器，並可在許多開發環境中運作。您可以在網站上套用一個、一些或全部的 Bento 元件！Bento 元件是自訂維護的，因此能與任何其他架構或套件庫一起作用。

請按照以下簡單步驟，在您的網站上開始使用 Bento 元件

1.

找出符合您網站環境的路徑。如果您使用 React 或 Preact 渲染網頁，請使用 React 版本；其他情況下，請試用網頁元件版本。

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>
  );
}

網頁元件

有兩種方式可將 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 Browser。我們支援這些瀏覽器的電腦、手機、平板電腦和網頁檢視版本。

加入 Bento

需要元件但找不到？發現您知道如何修復的錯誤？這真是好消息！Bento 是 AMP 專案下的開放原始碼專案，我們沒有我們的出色社群就做不到。加入我們，從今天開始成為我們的貢獻者！

今天加入我們

在文件中探索所有可使用的 Bento 元件。

探索文件