Bento

Bento 选择器

<head>

    <meta charset="utf-8" />
    <title>Bento Selector</title>
    <meta name="viewport" content="width=device-width" />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script src="https://cdn.ampproject.org/bento.js"></script>
    <script
      async
      src="https://cdn.ampproject.org/v0/bento-selector-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-selector-1.0.css"
    />
    <style>
      :root {
        --space-1: 0.5rem; /* 8px */
        --space-4: 2rem; /* 32px */
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
          'Segoe UI Symbol';
        margin: 2rem;
        background: #ecf1f3;
      }
      .image-selector {
        display: grid;
        grid-template-columns: 160px 160px;
        grid-gap: 10px;
        margin: 2rem 0;
      }
      .image-selector [option][selected] {
        outline: 4px solid #269da3;
      }
      input[type='submit'] {
        border: none;
        padding: 1rem 2rem;
        border-radius: 8px;
        color: #269da3;
        background: white;
        font-size: 18px;
        font-weight: bold;
        margin-right: 1rem;
      }
    </style>
</head>

<body>

    <form action="https://example.com" method="get">
      <bento-selector class="image-selector" name="example-selector">
        <img
          src="https://picsum.photos/160/107?1"
          width="160"
          height="107"
          alt="example image 1"
          option="1"
        />
        <img
          src="https://picsum.photos/160/107?2"
          width="160"
          height="107"
          alt="example image 2"
          disabled
          option="2"
        />
        <img
          src="https://picsum.photos/160/107?3"
          width="160"
          height="107"
          alt="example image 3"
          option="3"
        />
        <img
          src="https://picsum.photos/160/107?4"
          width="160"
          height="107"
          alt="example image 4"
          option="4"
        />
      </bento-selector>
      <input type="submit" value="Submit" />
    </form>
</body>

一个输入，将任何类型的内容显示为选项列表。选项的内容并不仅限于文本。它可以配置为允许用户仅选择一个或多个选项。

将 bento-selector 用作 Web 组件或 React 函数组件

↓ Web 组件 ↓ React / Preact

Web 组件

在添加自定义样式之前，必须包含每个 Bento 组件所需的 CSS 库，以保证正确加载。或使用内联的轻量级预升级样式。请参阅 布局和样式

通过 npm 导入

npm install @bentoproject/selector
import {defineElement as defineBentoSelector} from '@bentoproject/selector';
defineBentoSelector();

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

<body>

<bento-selector class="sample-selector">
      <ul>
        <li option="1">Option 1</li>
        <li option="2">Option 2</li>
        <li option="3">Option 3</li>
        <li option="4">Option 4</li>
      </ul>
    </bento-selector>
</body>

使用说明

  • bento-selector 可以包含任何任意 HTML 元素或 Bento 组件（例如，bento-carousel 等）。
  • bento-selector 不能包含任何嵌套的 bento-selector 控件。
  • 可通过向元素添加 option 属性并为该属性分配值（例如，<li option="value"></li>）来设置可选择选项。
  • 可通过向元素添加 disabled 属性（例如，<li option="d" disabled></li>）来设置禁用选项。
  • 可通过向元素添加 selected 属性（例如，<li option="b" selected></li>）来设置预选选项。
  • 要允许多选，请将 multiple 属性添加到 bento-selector 元素。默认情况下，bento-selector 一次只允许选择一个。
  • 要禁用整个 bento-selector，请将 disabled 属性添加到 bento-selector 元素。
  • 当 bento-selector 包含 name 属性且 bento-selector 位于 form 标记内时，如果在表单上发生提交事件，则 bento-selector 会像单选按钮/复选框组一样，并针对 bento-selector 的名称提交所选值（分配给选项的值）。

布局和样式

每个 Bento 组件都有一个小型 CSS 库，你必须包含该库以保证正确加载，且不会出现内容偏移。由于基于顺序的特异性，你必须手动确保在任何自定义样式之前包含样式表。

你还可以使轻量级的预升级样式内联可用

<style>
  bento-selector {
    display: block;
  }
</style>

<bento-selector> 上的属性

disabled、form、multiple、name

以上属性的行为方式与标准 HTML <select> 元素上的行为方式相同。

keyboard-select-mode

keyboard-select-mode 属性决定了 <bento-selector> 中选项的键盘导航行为。

  • `none`（默认）：Tab 键在 `` 中的项目之间切换焦点。用户必须按 Enter 或空格键才能更改选择。箭头键已禁用。
  • `focus`：Tab 键将焦点赋予 ``。用户可以使用箭头键在项目之间导航。必须按空格键或 Enter 键才能更改选择。
  • `select`：Tab 键将焦点赋予 ``。当用户使用箭头键在选项之间导航时，选择会发生变化。

选项元素上的属性

option（必需）

表明该选项可选择。如果指定了值，则该值的内容将随表单一起提交。

disabled、selected

以上属性的行为方式与标准 HTML <option> 元素上的行为方式相同。

操作

bento-selector API 允许你执行以下操作

selectBy(delta: number)

关闭选择器。

api.selectBy(1); // Select next option in DOM sequence.
api.selectBy(-2); // Select the option that is two previous in DOM sequence.

toggle(optionValue: string, opt_select: boolean|undefined)

根据 opt_select 将具有给定 optionValue 的选项切换为选中或取消选中。如果 opt_select 不存在，则如果当前未选中该选项，则选中该选项；如果当前已选中该选项，则取消选中该选项。

api.toggle('a'); // Toggle the item with the attribute `option="a"`.
api.toggle('1', true); // Select the item with the attribute `option="1"`.

事件

bento-selector API 允许你注册并响应以下事件

select

当用户选择一个选项时，会触发此事件。多选器和单选器在选择或取消选择选项时会触发此事件。点按已禁用的选项不会触发 select 事件。

  • `event.data.targetOption` 包含所选元素的 `option` 属性值。
  • `event.data.selectedOptions` 包含所有已选元素的 `option` 属性值数组。
selector.addEventListener('select', (e) => console.log(e.data.targetOption));

Preact/React 组件

通过 npm 导入

npm install @bentoproject/selector
import React from 'react';
import {
  BentoSelector,
  BentoSelectorOption,
} from '@bentoproject/selector/react';
import '@bentoproject/selector/styles.css';

function App() {
  return (
    <BentoSelector>
      <BentoSelectorOption option="1">Option 1</BentoSelectorOption>
      <BentoSelectorOption option="2">Option 2</BentoSelectorOption>
      <BentoSelectorOption option="3">Option 3</BentoSelectorOption>
      <BentoSelectorOption option="4">Option 4</BentoSelectorOption>
    </BentoSelector>
  );
}

布局和样式

容器类型

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

可以同时设置 BentoSelector 的 width 和 height，以调整组件的默认大小。为了确保组件按预期方式呈现，请务必对组件应用大小。这些大小可以内联应用

<BentoSelector style={{width: 100, height: 400}}>
  <BentoSelectorOption option="1">Option 1</BentoSelectorOption>
</BentoSelector>

或通过 className 应用

<BentoSelector className="custom-styles">
  <BentoSelectorOption option="1">Option 1</BentoSelectorOption>
</BentoSelector>
.custom-styles {
  width: 100px;
  height: 400px;
}

<BentoSelector> 的属性

disabled、form、multiple、name

以上属性的行为方式与标准 HTML <select> 元素上的行为方式相同。

keyboardSelectMode

keyboardSelectMode 属性决定了 <BentoSelector> 中选项的键盘导航行为。

  • `none`（默认）：Tab 键在 `` 中的项目之间切换焦点。用户必须按 Enter 或空格键才能更改选择。箭头键已禁用。
  • `focus`：Tab 键将焦点赋予 ``。用户可以使用箭头键在项目之间导航。必须按空格键或 Enter 键才能更改选择。
  • `select`：Tab 键将焦点赋予 ``。当用户使用箭头键在选项之间导航时，选择会发生变化。

<BentoSelectorOption> 的属性

option

表明该选项可选择。如果指定了值，则该值的内容将随表单一起提交。

disabled、selected

以上属性的行为方式与标准 HTML <option> 元素上的行为方式相同。

交互性和 API 使用

Bento 组件通过其 API 具有很强的交互性。可以通过传递 ref 访问 BentoSelector 组件 API

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

function App() {
  return (
    <BentoSelector ref={ref}>
      <BentoSelectorOption option="1">Option 1</BentoSelectorOption>
      <BentoSelectorOption option="2">Option 2</BentoSelectorOption>
      <BentoSelectorOption option="3">Option 3</BentoSelectorOption>
      <BentoSelectorOption option="4">Option 4</BentoSelectorOption>
    </BentoSelector>
  );
}

操作

BentoSelector API 允许你执行以下操作

selectBy(delta: number)

关闭选择器。

ref.current.selectBy(1); // Select next option in DOM sequence.
ref.current.selectBy(-2); // Select the option that is two previous in DOM sequence.

toggle(optionValue: string, opt_select: boolean|undefined)

根据 opt_select 将具有给定 optionValue 的选项切换为选中或取消选中。如果 opt_select 不存在，则如果当前未选中该选项，则选中该选项；如果当前已选中该选项，则取消选中该选项。

ref.current.toggle('1'); // Toggle the item with the attribute `option="1"`.
ref.current.toggle('2', true); // Select the item with the attribute `option="2"`.

事件

BentoSelector API 允许你注册并响应以下事件

onChange

当选择或取消选择选择器选项时，会触发此事件。onChange 属性为你提供两个关键选项

  • option，它返回已选择或取消选择的 BentoSelectorOption 的 option 属性的值。
  • value，它返回一个数组，其中包含当前按选择顺序选择的 BentoSelectorOptions。
<BentoSelector
  as="ul"
  multiple
  onChange={({option, value}) => console.log(option, value)}
>
  <BentoSelectorOption as="li" option="1">
    Option 1
  </BentoSelectorOption>
  <BentoSelectorOption as="li" option="2">
    Option 2
  </BentoSelectorOption>
</BentoSelector>
我们在本网站上使用 Cookie 来分析流量并优化您的体验。
更多详细信息