penframe/examples/ast_badge_test.json

A lightweight DSL-based wireframe and UI structure visualization tool.

[
  {
    "type": "config",
    "name": "app",
    "platform": "pc",
    "width": 800,
    "height": 600,
    "scale": 1,
    "title": "Badge Test"
  },
  {
    "type": "headline",
    "value": "バッジ機能のテスト",
    "level": 1
  },
  {
    "type": "paragraph",
    "value": "基本的なバッジ:"
  },
  {
    "type": "badge",
    "value": "New"
  },
  {
    "type": "paragraph",
    "value": "通知数のバッジ:"
  },
  {
    "type": "badge",
    "value": "5",
    "color": "#ff4444",
    "textColor": "#ffffff"
  },
  {
    "type": "paragraph",
    "value": "成功ステータス:"
  },
  {
    "type": "badge",
    "value": "完了",
    "color": "#28a745",
    "textColor": "#ffffff"
  },
  {
    "type": "paragraph",
    "value": "警告バッジ:"
  },
  {
    "type": "badge",
    "value": "警告",
    "color": "#ffc107",
    "textColor": "#212529"
  },
  {
    "type": "paragraph",
    "value": "カスタム位置とサイズ:"
  },
  {
    "type": "badge",
    "value": "HOT",
    "x": 150,
    "y": 350,
    "color": "#dc3545",
    "textColor": "#ffffff",
    "borderRadius": 5,
    "width": 60,
    "height": 25
  },
  {
    "type": "badge",
    "value": "99+",
    "x": 250,
    "y": 350,
    "color": "#6f42c1",
    "borderRadius": 15
  }
]