Label

标签用于为表单控件提供可见名称。下方预览由 pingo 引擎实时渲染，并跟随站点主题切换明暗。

用法

import { createElement } from "@dopejs/pingo";
import { Input, Label } from "@dopejs/pingo-ui";

root.render(
  createElement("container", {
    style: { flexDirection: "column" },
    children: [
      createElement(Label, { children: "邮箱" }),
      createElement("container", { height: 8 }),
      createElement(Input, { semanticLabel: "邮箱", width: 320 }),
    ],
  }),
);

pingo 没有 gap 属性，标签与控件之间的间距用一个固定尺寸的容器实现。

示例

语义名称

控件关联在 pingo 中尚不存在，因此标签与控件的关联靠约定：给控件传入与标签一致的 semanticLabel，让屏幕阅读器能读出同样的名称。

Props

无障碍

pingo 尚无 label–control 关联机制，Label 只是带样式的文本。请始终在对应控件上设置 semanticLabel，保证无障碍名称不依赖视觉邻近关系。