Bento

Bento 側邊欄

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>bento-sidebar</title>
    <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-sidebar-1.0.mjs"
      crossorigin="anonymous"
    ></script>
    <script
      nomodule
      src="https://cdn.ampproject.org/v0/bento-sidebar-1.0.js"
      crossorigin="anonymous"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ampproject.org/v0/bento-sidebar-1.0.css"
      crossorigin="anonymous"
    />
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
          'Segoe UI Symbol';
        background: #ecf1f3;
      }
      button {
        -webkit-appearance: none;
        background: transparent;
        border: none;
        box-shadow: none;
        color: #4c5a63;
        cursor: pointer;
        float: right;
        width: 40px;
        height: 35px;
        margin: 0 1rem;
      }
      h2 {
        font-size: 34px;
        font-weight: bold;
        line-height: 1.18;
        letter-spacing: -0.5px;
        color: #002b39;
        margin-block-start: 74px;
      }
      bento-sidebar[open] {
        background: #fff;
        padding-inline: 40px;
        max-width: 320px;
      }
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      li {
        font-size: 16px;
        font-weight: 650;
        line-height: 2;
        color: #4c5a63;
        padding-block: 8px;
      }
    </style>
</head>

<body>

    <button id="open-sidebar">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="48px"
        viewBox="0 0 24 24"
        width="48px"
        fill="#000000"
      >
        <path d="M0 0h24v24H0V0z" fill="none" />
        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
      </svg>
    </button>
    <bento-sidebar id="sidebar1" side="left" hidden>
      <button id="close-sidebar">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="53.7"
          height="53.7"
          viewBox="0 0 53.7 53.7"
          stroke="#4c5a63"
        >
          <path
            opacity=".6"
            fill="%234c5a63"
            d="M35.6 34.4L28 26.8l7.6-7.6c.2-.2.2-.5
                  0-.7l-.5-.5c-.2-.2-.5-.2-.7 0l-7.6
                  7.6-7.5-7.6c-.2-.2-.5-.2-.7 0l-.6.6c-.2.2-.2.5 0
                  .7l7.6 7.6-7.6 7.5c-.2.2-.2.5 0 .7l.5.5c.2.2.5.2.7
                  0l7.6-7.6 7.6 7.6c.2.2.5.2.7 0l.5-.5c.2-.2.2-.5 0-.7z"
          />
        </svg>
      </button>
      <h2>Navigation Sidebar</h2>
      <ul>
        <li>Nav item A</li>
        <li>Nav item B</li>
        <li>Nav item C</li>
        <li>Nav item D</li>
      </ul>
    </bento-sidebar>
    <script>
      (async () => {
        const sidebar = document.querySelector('#sidebar1');
        await customElements.whenDefined('bento-sidebar');
        const api = await sidebar.getApi();
        // set up button actions
        document.querySelector('#open-sidebar').onclick = () => api.open();
        document.querySelector('#close-sidebar').onclick = () => api.close();
      })();
    </script>
</body>

提供一個方式來顯示短期存取的詮釋內容，例如導覽、連結、按鈕、選單。側邊欄可以用按鍵點擊開啟，而主內容仍在視覺上位於下方。

將 bento-sidebar 作為一個網路元件或 React 函式元件使用

↓ 網路元件 ↓ React / Preact

網路元件

您必須將每個 Bento 元件所需的 CSS 程式庫包含進來，以保證適當載入，並且在加入自訂樣式之前。或者使用輕量級的預先升級的內嵌樣式。請參閱 版面配置和樣式。

透過 npm 匯入

npm install @bentoproject/sidebar
import {defineElement as defineBentoSidebar} from '@bentoproject/sidebar';
defineBentoSidebar();

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

<body>

<bento-sidebar id="sidebar1" side="right" hidden>
      <ul>
        <li>Nav item 1</li>
        <li>Nav item 2</li>
        <li>Nav item 3</li>
        <li>Nav item 4</li>
        <li>Nav item 5</li>
        <li>Nav item 6</li>
      </ul>
    </bento-sidebar>

    <div class="buttons" style="margin-top: 8px">
      <button id="open-sidebar">Open sidebar</button>
    </div>

    <script>
      (async () => {
        const sidebar = document.querySelector('#sidebar1');
        await customElements.whenDefined('bento-sidebar');
        const api = await sidebar.getApi();

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

互動性和 API 使用

Bento 元件透過他們的 API 具有高度互動性。bento-sidebar 元件的 API 可以透過在您的文件當中加入以下的指令碼標籤取得

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

動作

bento-sidebar 的 API 讓您執行以下動作

open()

開啟側邊欄。

api.open();
close()

關閉側邊欄。

api.close();
toggle()

切換側邊欄的開啟狀態。

api.toggle(0);

版面配置和樣式

每個 Bento 元件都有一个小小的 CSS 程式庫，您必須將它包含進來，才能在沒有 內容轉移 的情況下保證適當載入。由於基於訂購的特殊性，您必須手動確保在任何自訂樣式之前加入樣式表。

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

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

<style>
  bento-sidebar:not([open]) {
    display: none !important;
  }
</style>

自訂樣式

bento-sidebar 元件可以用標準的 CSS 來設定樣式。

  • bento-sidebar 的 width 可以設定，用以調整預設值 45px 的寬度。
  • bento-sidebar 的高度可以設定，用以調整側邊欄的高度，如果需要的話。如果高度超過 100vw，側邊欄會有垂直捲軸。側邊欄的預設高度是 100vw，並且可以用 CSS 覆寫，以縮短它。
  • 側邊欄目前的狀態會透過 open 屬性公開，當頁面上的側邊欄被開啟時，它會設定在 bento-sidebar 標籤中。
bento-sidebar[open] {
  height: 100%;
  width: 50px;
}

使用經驗考量

在使用 <bento-sidebar> 時，請注意使用者通常會在行動裝置上檢視您的網頁，而行動裝置可能會顯示固定位置的標題。此外，瀏覽器也時常會在該頁面頂端顯示他們自己的固定標題。將另一個固定位置的元素加入畫面頂端將會佔用行動裝置上大量的畫面空間，而該內容並不會提供給使用者任何新的資訊。

基於此原因，我們建議打開側邊欄的提示不要放置在固定、全寬的標題中。

  • 側邊欄只能顯示在網頁的左側或右側。
  • 側邊欄的最大高度為 100vh，如果高度超過 100vh，就會出現垂直捲軸。預設高度在 CSS 中設定為 100vh，並可以在 CSS 中覆寫。
  • 側邊欄的寬度可以使用 CSS 設定和調整。
  • 建議將 <bento-sidebar> 作為 <body> 的直接子元素，以維護邏輯 DOM 順序以利於協助工具使用，並避免容器元素改變其行為。請注意，如果 bento-sidebar 的上層元素設定了 z-index，可能會導致側邊欄顯示於其他元素（例如標題）下方，影響其功能。

屬性

side（側邊）

指出側邊欄應該從網頁的哪一側打開，設定值為 left（左）或 right（右）。如果沒有指定 side，將會從 body 標籤的 dir 屬性繼承 side 值（ltr => left，rtl => right）；如果不存在 dir，預設 side 為 left。

open（開啟）

側邊欄開啟時，此屬性會存在。

Preact/React 元件

透過 npm 匯入

npm install @bentoproject/sidebar
import React from 'react';
import {BentoSidebar} from '@bentoproject/sidebar/react';
import '@bentoproject/sidebar/styles.css';

function App() {
  return (
    <BentoSidebar>
      <ul>
        <li>Nav item 1</li>
        <li>Nav item 2</li>
        <li>Nav item 3</li>
        <li>Nav item 4</li>
        <li>Nav item 5</li>
        <li>Nav item 6</li>
      </ul>
    </BentoSidebar>
  );
}

互動性和 API 使用

Bento 元件可透過其 API 進行高度互動。傳遞一個 ref，便能存取 BentoSidebar 元件 API。

import React, {createRef} from 'react';
const ref = createRef();

function App() {
  return (
    <BentoSidebar ref={ref}>
      <ul>
        <li>Nav item 1</li>
        <li>Nav item 2</li>
        <li>Nav item 3</li>
        <li>Nav item 4</li>
        <li>Nav item 5</li>
        <li>Nav item 6</li>
      </ul>
    </BentoSidebar>
  );
}

動作

BentoSidebar API 讓您可以進行以下動作

open()

開啟側邊欄。

ref.current.open();
close()

關閉側邊欄。

ref.current.close();
toggle()

切換側邊欄的開啟狀態。

ref.current.toggle(0);

版面配置和樣式

BentoSidebar 元件可以使用標準 CSS 調整樣式。

  • bento-sidebar 的 width 可以調整為改變預設的 45 像素寬度。
  • bento-sidebar 的高度可以設定，用以調整側邊欄的高度，如果需要的話。如果高度超過 100vw，側邊欄會有垂直捲軸。側邊欄的預設高度是 100vw，並且可以用 CSS 覆寫，以縮短它。

為確保元件能如您所預期地呈現，請務必套用一個大小到元件上。這些大小可以直接套用

<BentoSidebar style={{width: 300, height: '100%'}}>
  <ul>
    <li>Nav item 1</li>
    <li>Nav item 2</li>
    <li>Nav item 3</li>
    <li>Nav item 4</li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>
</BentoSidebar>

或透過 className

<BentoSidebar className="custom-styles">
  <ul>
    <li>Nav item 1</li>
    <li>Nav item 2</li>
    <li>Nav item 3</li>
    <li>Nav item 4</li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>
</BentoSidebar>
.custom-styles {
  height: 100%;
  width: 300px;
}

使用經驗考量

在使用 <BentoSidebar> 時，請注意使用者通常會在行動裝置上檢視您的網頁，而行動裝置可能會顯示固定位置的標題。此外，瀏覽器也時常會在該頁面頂端顯示他們自己的固定標題。將另一個固定位置的元素加入畫面頂端將會佔用行動裝置上大量的畫面空間，而該內容並不會提供給使用者任何新的資訊。

基於此原因，我們建議打開側邊欄的提示不要放置在固定、全寬的標題中。

  • 側邊欄只能顯示在網頁的左側或右側。
  • 側邊欄的最大高度為 100vh，如果高度超過 100vh，就會出現垂直捲軸。預設高度在 CSS 中設定為 100vh，並可以在 CSS 中覆寫。
  • 側邊欄的寬度可以使用 CSS 設定和調整。
  • 強烈建議 <BentoSidebar> 為 <body> 的直接子元素，以保持可供輔助使用的邏輯 DOM 順序，並避免容器元素變更其行為。請注意，具有設定 z-index 的 BentoSidebar 祖先可能會導致側邊欄出現在其他元素（例如標題）下方，進而破壞它的功能性。

屬性

side（側邊）

指出側邊欄應該從網頁的哪一側打開，設定值為 left（左）或 right（右）。如果沒有指定 side，將會從 body 標籤的 dir 屬性繼承 side 值（ltr => left，rtl => right）；如果不存在 dir，預設 side 為 left。

我們在此網站上使用 Cookie 來分析流量並最佳化您的體驗。
詳細資料