HowTo 组件 – 概览

HowTo 组件

“HowTo:组件”是一组实现常见界面模式的 Web 组件。这些实现方案旨在提供一种教育资源。 您可以浏览不同组件的密集注释实现,并希望从中学习。请注意,它们明确不是界面库,不应在生产环境中使用。

组件

  • <howto-checkbox>:表示表单中的布尔值选项。最常见的复选框类型是双重类型,可让用户在两个选项(即勾选和取消选中)之间切换。
  • <howto-tabs>:将可见内容拆分为多个面板,以此来限制显示的内容。
  • <howto-tooltip>:一个弹出式窗口,可在元素获得键盘焦点或将鼠标悬停在元素上时显示与元素相关的信息。

目标

我们的目标是展示最佳实践,来说明编写易于访问、高性能、可维护且易于样式的强大组件的最佳实践。每个组件都是完全独立的,因此可用作参考实现。

无障碍功能

这些组件严格遵循 WAI ARIA 创作做法,该指南解释和展示 ARIA(无障碍富互联网应用标准)。如果您不熟悉 ARIA,请查看我们关于 WebFundamentals 的介绍。 每个组成部分均链接到“创作规范”的相关部分。虽然并非绝对必要,但我们建议您先阅读“编写练习”部分,然后再深入了解代码。

性能

在 Web 开发中,“性能”一词可以指代很多事情。在 <howto> 的上下文中,性能主要是指动画始终以 60fps 的速度运行,即使在移动设备上也是如此。

视觉灵活性

尽量不要为组件设置样式,但布局除外,或用于指示组件处于已选择或活跃状态。这是为了确保实现在视觉上具有灵活性和重点。为避免在装饰上花费时间,我们限制了代码,使其仅包含让组件正常运行必不可少的代码。如果组件需要任何样式才能正常运行,样式将添加一条注释,说明原因。

可维护的代码

由于“组件”是一种参考实现,因此我们花了额外的时间编写方便易读且注释密集的代码。

非目标

成为库 / 框架 / 工具包

<howto> 组件不会在 npm、bower 或任何其他平台上发布,因为它们不会用于生产环境。为了获得简洁、易读的代码,我们使用新式 JavaScript API,并支持实现 Web 组件标准的现代浏览器。在阅读这些实现后,您将能够调整代码以适应自己的需求。

向后兼容

请勿直接依赖代码。如果发现了更好的实现,我们可能会(并且很有可能会)大幅更改任何元素的实现和 API。这是一个不断发展的资源,我们可以通过它分享、探索和讨论构建网页界面的最佳实践。

完整

我们目前未实现(或许也不会)实现 WAI ARIA 制作做法中的 *所有 *组件。不过,重复使用其他 <howto> 组件中使用的原则应该能让读取器实现任何缺失的组件。