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 用作 Web 组件或 React 函数组件

↓ Web 组件 ↓ React / Preact

Web 组件

你必须包含每个 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;
}

UX 注意事项

使用 <bento-sidebar> 时，请记住，用户通常会在移动设备上查看你的页面，而移动设备可能会显示固定位置页眉。此外，浏览器通常会在页面顶部显示自己的固定页眉。在屏幕顶部添加另一个固定位置元素会占用大量移动屏幕空间，而该内容并不会为用户提供任何新信息。

因此，我们建议不要将打开侧边栏的提示放置在固定全宽页眉中。

侧边栏只能出现在页面的左侧或右侧。
侧边栏的最大高度为 100vh，如果高度超过 100vh，则会出现垂直滚动条。默认高度在 CSS 中设置为 100vh，并且可以在 CSS 中覆盖。
可以使用 CSS 设置和调整侧边栏的宽度。
建议将 <bento-sidebar> 作为 <body> 的直接子元素，以保持可访问性的逻辑 DOM 顺序，并避免容器元素改变其行为。请注意，如果 bento-sidebar 的祖先元素设置了 z-index，则可能会导致侧边栏显示在其他元素（例如页眉）下方，从而破坏其功能。

属性

side

指示侧边栏应从页面的哪一侧打开，可以是 left 或 right。如果未指定 side，则 side 值将从 body 标签的 dir 属性中继承（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);

布局和样式

可以使用标准 CSS 对 BentoSidebar 组件进行样式设置。

可以设置 bento-sidebar 的 width 以调整宽度，使其不再是预设的 45px 值。
如果需要，可以设置 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;
}

UX 注意事项

使用 <BentoSidebar> 时，请记住，用户通常会在移动设备上查看你的页面，而移动设备可能会显示固定位置页眉。此外，浏览器通常会在页面顶部显示自己的固定页眉。在屏幕顶部添加另一个固定位置元素会占用大量移动屏幕空间，而该内容并不会为用户提供任何新信息。

因此，我们建议不要将打开侧边栏的提示放置在固定全宽页眉中。

侧边栏只能出现在页面的左侧或右侧。
侧边栏的最大高度为 100vh，如果高度超过 100vh，则会出现垂直滚动条。默认高度在 CSS 中设置为 100vh，并且可以在 CSS 中覆盖。
可以使用 CSS 设置和调整侧边栏的宽度。
建议将<BentoSidebar>作为<body>的直接子级，以保持可访问性的逻辑 DOM 顺序，并避免容器元素改变其行为。请注意，如果BentoSidebar的祖先具有设置的z-index，则可能导致侧边栏出现在其他元素（例如标题）下方，从而破坏其功能。

<head>

<body>

Web 组件

通过 npm 导入

通过 <script> 包含

示例

<head>

<body>

交互性和 API 使用

操作

open()

close()

toggle()

布局和样式

自定义样式

UX 注意事项

属性

side

open

Preact/React 组件

通过 npm 导入

交互性和 API 使用

操作

open()

close()

toggle()

布局和样式

UX 注意事项

属性

side

通过 `<script>` 包含