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>
组件中,应该使读取器能够实现任何组件
缺失的一些内容。