选择网格

从选择列表中选择的无依赖 JavaScript 组件 . 您写一个普通的无线电组、 复选框组或 <select>把它包起来 其余部分由网格选择。 短列表作为项目保持可见. 更长的清单 切换到打开带有搜索输入和一个的面板的紧凑字段 多柱网格,完全键盘可访问. 打入过滤项目,或 突出显示匹配的位置,数字直接选择一个条目.

您的标记保持原生, 所以表格提交, 重置和验证像往常一样 没有JavaScript,一切仍然有效.

尝试演示

_{长列表, 过滤模式( 默认) . 球场开设了一个有40个货币的面板. 键入 "美元"隐藏了其他一切,并重新编号了6个匹配的1比6. 概述的项目是 光标:输入、点击或数字选择.}

_{短名单. 最多10个条目作为项目保持可见。 他们是本地的无线电按钮 下面;箭头键在它们之间移动,而数字 1 至 4 直接选择一个.}

_{长列表, 突出显示模式 (单位:千美元)data-search="highlight") (中文(简体) ). 搜索的同一列表 "克龙". 没有什么是故意隐藏的:每个条目都有它的位置,所以使用列表的人 每天可以依靠位置。 火柴(丹麦克龙和挪威克龙)以蓝色标出 光标跳转到第一个匹配时,所有其他条目都会被暗化. 条目11至20被选中 相向并有位数(S1至S0).}

状态 : 1.2.0版本,稳定。 npm上公布为 @emmgeede/gridselect,因为 npm 处理平话名 gridselect 也一样 类似旧的软件包。 版本数 跟着 语义版本。见 特征 对于今天的工作 变动情况 改变什么.

目录

• 安装
• 使用量
  • 对变化的反应
  • 一次几个
• 文档
• 特征
• 浏览器支持
• 发展
• 许可证

安装

npm install @emmgeede/gridselect

import { gridselect } from "@emmgeede/gridselect";
import "@emmgeede/gridselect/gridselect.css"; // optional

没有捆绑机,从CDN(window.gridselect:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@emmgeede/gridselect@1/src/gridselect.css">
<script src="https://cdn.jsdelivr.net/npm/@emmgeede/gridselect@1/dist/gridselect.min.js"></script>
<script>
  document.querySelectorAll("[data-gridselect]").forEach((el) => gridselect(el));
</script>

只偏爱HTML吗? 使用自定义元素,参见 <grid-select>数字 :

<script src="https://cdn.jsdelivr.net/npm/@emmgeede/gridselect@1/dist/gridselect-element.min.js"></script>

使用量

<fieldset data-gridselect>
  <legend>Currency</legend>
  <label><input type="radio" name="cur" value="EUR" checked> Euro</label>
  <label><input type="radio" name="cur" value="CHF"> Swiss franc</label>
</fieldset>

import { gridselect } from "@emmgeede/gridselect";

const gs = gridselect(document.querySelector("[data-gridselect]"));
gs.value; // "EUR"
gs.value = "CHF"; // checks the CHF radio, fires no event

对变化的反应

GridSelect 保留您的输入作为真理的来源 。 每当用户选择 某物,点击输入,使用键盘或选择其中的项目 面板, 网格选择集 checked 在本地输入和浏览器上 拥有 input 财务报告和审定财务报表 change 事件点燃了它。 两个泡泡,一个听 包装包覆盖整个组:

const wrapper = document.querySelector("[data-gridselect]");
const gs = gridselect(wrapper);

wrapper.addEventListener("change", (event) => {
  console.log(event.target.value); // the input that changed, e.g. "CHF"
  // the whole selection: "CHF", or ["a", "c"] for checkboxes
  console.log(gs.value);
});

没有要学习的自定义事件: 听的代码 change 或者说 input 与 addEventListener 保持工作不变。 反应是例外 在面板内取出,因为反应 onChange 在收音机上收听 点击,不显示为 change。在“反应”中,在包装上附加一个本地听众 (通过参考)直到计划的框架包装存在. 设置 gs.value 从 代码点火没有事件, 就像设置 checked 自己,还有一种形式 提交总是发送当前选择.

一次几个

document.querySelectorAll("[data-gridselect]").forEach((el) => gridselect(el));

使用 forEach((el) => gridselect(el))没有 forEach(gridselect): 第二个 窗体通过索引作为第二个参数,该参数将作为选项在 后来的版本.

A 类 <fieldset> 带有 <legend> 是推荐的包装, 它会显示屏幕 阅读组名。 任何元素都会起作用, data-gridselect 仅是一个 用于选择包装和样式表的常规.

文档

所有文件,每页都有一个现场实例,在 网格选择.im/docs。 。 。 .

• 指南 : 来源 (无线电、复选箱、, <select>, (中文(简体) ), items, (中文(简体) ), 服务器上的条目, (中文(简体) ), 面板, (中文(简体) ), 搜索, (中文(简体) ), 键盘和数字, (中文(简体) ), 组, (中文(简体) ), 被绑住和最近输入, (中文(简体) ), 说明, (中文(简体) ), 多重选择, (中文(简体) ), 表单, (中文(简体) ), 样式和主题, (中文(简体) ), 无障碍, (中文(简体) ), <grid-select>,反应, Vue 等。 。 。 .
• 参考: 选项, (中文(简体) ), 属性和钩, (中文(简体) ), 实例和事件, (中文(简体) ), CSS 变量。 。 。 .

特征

浏览器支持

当前常绿浏览器(Chrome, Edge, Firefox, Safari).

发展

npm install
npm test             # unit tests (Vitest + jsdom), type check, package contents
npm run test:e2e     # browser tests (Playwright, Chromium) incl. axe-core checks
npm run build        # dist/gridselect.d.ts and dist/gridselect.min.js
npm run screenshots  # README images and animations in assets/, from the demo page (needs ImageMagick)
npm run playground   # http://localhost:5173/playground/ (tests) and /demo/
node scripts/pr-check.js  # the contribution rules CI checks on pull requests

贡献: 已读 一般事务人员(其他职等) (对人和AI特工的规则, 带有 contributing claude Code)和关于主题, 捐款额。 。 。 .

发布: 推动版本标签( E)vX.Y.Z匹配 package.json运行 发布工作流程,该工作流程将测试,构建并发布到 npm 并带有出处.

游乐场载荷 src/gridselect.js 直接显示每个变体 : 短而长的收音机组,复选框,两种搜索模式,列表布局, 带有 required, (中文(简体) ), disabled中,提交并重置,并重置 change 事件。 它的造型是临时的,直到样式表船.

许可证

麻省理工学院