QR Code

Demo

Features

• Root/Frame/Pattern/Overlay の 4 anatomy パーツを提供する。開閉・選択のような遷移可能な状態を持たないため状態機械は実装せず、自由関数のみで構成される（crate::tabs/crate::field と同じ区分）。
• QR Model 2（ISO/IEC 18004）byte モードの外部依存ゼロエンコーダで value/ecc から一意にモジュール行列を導出する純粋な変換。符号化対象の value 文字列そのものはマークアップへ一切出力されない。
• frame（svg）は xmlns を常に固定付与し（イシュー #1634、SVG 単体シリアライズでも名前空間解決できるようにする）、aria_label を指定したときのみ role="img" + aria-label を付与する。未指定時はどちらも付与しない（WAI-ARIA 1.2 img ロールの Accessible Name Required 要件に合わせた fail-closed な是正、イシュー #1634。偽の説明文は捏造しない）。
• pattern（path）の d 属性値は暗モジュールの座標から内部生成する文字列で、文字集合は M/h/v/z/半角数字/, に閉じる。fill は付与せず styled 層/呼び出し側 CSS の責務とする。
• 呼び出し側 attrs はフレームワーク固定属性（frame の viewBox/xmlns/role/aria-label、pattern の d）をなりすませない（重複キーは dedup で除外される、イシュー #1634）。

API Reference

Arguments

Examples

aria_label を省略した変種

aria_label に None を渡すと role/aria-label とも付与されません（Zag.js 準拠）。名前付けが必要な場合は attrs で role/aria-labelledby を渡してください。

自前 CSS の最小例

headless-ui はスタイルレスであるため、root/frame/pattern/overlay の data-* 属性セレクタで見た目を組み立てます。

[data-scope="qr-code"][data-part="root"] {
  position: relative;
  display: inline-block;
}
[data-scope="qr-code"][data-part="frame"] {
  width: 160px;
  height: 160px;
}
[data-scope="qr-code"][data-part="pattern"] {
  fill: #111827;
}
[data-scope="qr-code"][data-part="overlay"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  padding: 4px;
  border-radius: 4px;
}

Accessibility

WAI-ARIA