Bento Twitter

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <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-twitter-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css"
    />
    <style>
      bento-twitter {
        width: 375px;
        height: 472px;
      }
    </style>
    <style>
      body {
        background: #ecf1f3;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>

</head>

    <bento-twitter
      id="my-tweet"
      style="width: 375px; height: 720px"
      data-tweetid="1397995435386679302"
    >
    </bento-twitter>

</body>

嵌入 Twitter 議題或動態等內容。

網路組件

您必須包含每個 Bento 組件所需的 CSS 函式庫，以確保正確載入，並在加入自訂樣式之前進行載入。或使用可內嵌取得的輕量級預先升級樣式。請參閱 版面與樣式。

透過 npm 匯入

npm install @bentoproject/twitter

import {defineElement as defineBentoTwitters} from '@bentoproject/twitter';
defineBentoTwitters();

透過 <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-twitter-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css" crossorigin="anonymous">

範例

<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-twitter-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css"
    />
    <style>
      bento-twitter {
        width: 375px;
        height: 472px;
      }
    </style>

</head>

<bento-twitter id="my-tweet" data-tweetid="885634330868850689"></bento-twitter>

</body>

版面與樣式

每個 Bento 組件都有一個必須包含的小型 CSS 函式庫，以確保正確載入，且沒有 內容變動。由於基於順序的特定性，您必須手動確保在自訂樣式之前包含樣式表。

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

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

<style>
  bento-twitter {
    display: block;
    overflow: hidden;
    position: relative;
  }
</style>

容器類型

bento-twitter 組件有一個已定義的版面大小類型。為確保組件正確呈現，務必透過所需的 CSS 版面 (例如定義為 height、width、aspect-ratio 或其他此類屬性所定義的版面)，將大小套用至組件及其子代元素 (投影片)。

bento-twitter {
  height: 100px;
  width: 100%;
}

屬性

互動性和 API 使用

以程式變更任何屬性值，都會自動更新該元素。例如，透過 data-tweetid 變更推文 ID，就會自動載入新的推文

<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-twitter-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css"
    />
    <style>
      bento-twitter {
        width: 375px;
        height: 472px;
      }
    </style>

</head>

<bento-twitter id="my-tweet" data-tweetid="885634330868850689">
    </bento-twitter>
    <div class="buttons" style="margin-top: 8px">
      <button id="change-tweet">Change tweet</button>
    </div>

    <script>
      (async () => {
        const twitter = document.querySelector('#my-tweet');

        // set up button actions
        document.querySelector('#change-tweet').onclick = () => {
          twitter.setAttribute('data-tweetid', '495719809695621121');
        };
      })();
    </script>

</body>

Preact/React 元件

透過 npm 匯入

npm install @bentoproject/twitter

import React from 'react';
import {BentoTwitter} from '@bentoproject/twitter/react';
import '@bentoproject/twitter/styles.css';

function App() {
  return <BentoTwitter tweetid="1356304203044499462"></BentoTwitter>;
}

版面與樣式

容器類型

BentoTwitter 元件已定義配置大小類型。為了確保元件正確呈現，請務必透過想要的 CSS 配置 (例如此一配置以 height、width、aspect-ratio 或其他類似屬性定義)，對元件及其直接子項 (投影片) 套用大小。這些可以內嵌套用

<BentoTwitter
  style={{width: 300, height: 100}}
  tweetid="1356304203044499462"
></BentoTwitter>

或者透過 className

<BentoTwitter
  className="custom-styles"
  tweetid="1356304203044499462"
></BentoTwitter>

.custom-styles {
  height: 100px;
  width: 100%;
}

屬性

const TWITTER_OPTIONS = {
  // make sure to define these once globally!
};
function MyComponent() {
  // etc
  return (
    <Twitter optionsProps={TWITTER_OPTIONS} />
  );
}