Chiralkit
ui-component

tabs

v1.0.0

WAI-ARIA Tabs 模式（从零构建）——仅包含 tablist，支持 roving tabindex、方向键导航、Home/End 和自动激活。使用者在 light DOM 中自行渲染 tabpanel，并在 dsChange 时切换其可见性。设为 shadow:false，以便 tabpanel 通过 aria-labelledby 引用各个 tab 的 id。

安装

预览

用法

react
django-template

规范详情

原始注册表条目
{
  "name": "tabs",
  "type": "ui-component",
  "metadata": {
    "ring": "1b",
    "description": "WAI-ARIA Tabs pattern (scratch build) — tablist only, with roving tabindex, arrow-key navigation, Home/End, and automatic activation. The consumer renders their own tabpanels in light DOM and toggles visibility on dsChange. shadow:false so tab ids are addressable from tabpanels via aria-labelledby.",
    "author": "neo",
    "version": "1.0.0",
    "created_at": "2026-08-26",
    "dependencies": [],
    "translations": {
      "es": {
        "description": "Patrón WAI-ARIA Tabs (scratch build) — solo la tablist, con roving tabindex, navegación por arrow keys, Home/End y activación automática. El consumidor renderiza sus propios tabpanels en light DOM y togglea visibilidad en dsChange. shadow:false para que los ids de los tabs sean referenciables desde los tabpanels vía aria-labelledby."
      },
      "zh": {
        "description": "WAI-ARIA Tabs 模式（从零构建）——仅包含 tablist，支持 roving tabindex、方向键导航、Home/End 和自动激活。使用者在 light DOM 中自行渲染 tabpanel，并在 dsChange 时切换其可见性。设为 shadow:false，以便 tabpanel 通过 aria-labelledby 引用各个 tab 的 id。"
      },
      "la": {
        "description": "Exemplar WAI-ARIA Tabs (ab integro aedificatum) — tablist tantum, cum roving tabindex, navigatione per claves sagittarum, Home/End et activatione automatica. Qui eo utitur tabpanels suos in light DOM reddit et visibilitatem in dsChange commutat. shadow:false, ut ids tabs e tabpanels per aria-labelledby attingi possint."
      }
    }
  },
  "spec": {
    "tech": "stencil",
    "tag": "ds-tabs",
    "tokens_used": [
      "primitive.font.family",
      "primitive.font.size-md",
      "primitive.spacing.lg",
      "primitive.spacing.sm"
    ]
  }
}
ChiralFM