HowTo 组件 – 概览

HowTo 组件

“HowTo:组件”是一组实现通用界面的 Web 组件 模式。本演示文稿旨在提供相关教学资源。 您可以仔细阅读不同 API 的密集注释实现, 并希望从中学习请注意,它们明确 界面库,应在生产环境中使用。

  • <howto-checkbox>:表示表单中的布尔选项。最常见的 复选框是一种双重类型,允许用户在选中和未选中两种选项之间进行切换。
  • <howto-tabs>:通过将内容拆分到多个面板中来限制可见内容。
  • <howto-tooltip>:一个弹出式窗口,用于在元素 收到键盘焦点,或者鼠标悬停在其上时。

我们的目标是介绍编写稳健可靠组件的最佳实践, 易于访问、性能出色、可维护且易于设计。每个组件 是完全独立的,因此可用作参考实现。

无障碍

这些组件严格遵循 WAI ARIA Authoring 做法”部分, 解释和展示 ARIA,易于访问的丰富互联网应用程序 标准。如果您不熟悉 ARIA, 请观看本单元介绍 WebFundamentals 一页。 每个组件均链接到创作做法的相关部分。虽然 并非绝对必要,我们建议您阅读 创作 部分 在深入了解代码之前进行练习。

性能

在 Web 开发中,术语“性能”可以应用于大量 重要性。在 <howto> 上下文中,性能主要是指动画 始终以 60fps 的帧速率运行,即使在移动设备上也是如此。

视觉灵活性

除了布局或指示元素之外,其他组件尽可能不设置样式 处于已选择或有效状态这是为了让实现在视觉上保持灵活性 和专注力。通过不在装饰上花时间,我们将代码限制为 确保该组件正常运行。是否需要任何样式 才能使该组件正常运行,系统将会使用注释标记该样式, 解释原因。

可维护的代码

操作方法:组件是 所以我们花了额外的时间来编写易于阅读和 易于理解的代码,且包含密集注释。

非目标

是库 / 框架 / 工具包

<howto> 组件未在 npm、Bower 或任何其他平台上发布 因为它们不适合在生产环境中使用。为了简洁明了 我们使用新型 JavaScript API 并支持新型 实现 Web 组件标准的浏览器。您 阅读完这些课程后, 实现。

向后兼容

请勿直接依赖代码。我们可能并且很有可能 如果优化了性能, 实施方式。这是一个不断更新的资源 并探讨构建网页界面的最佳实践。

完整无缺

我们目前不会(也可能不会)实现*所有 。然而,重复利用 在其他 <howto> 组件中,应该使读取器能够实现任何组件 缺失的一些内容。