{
  "name": "AspectRatio",
  "category": "Layout",
  "subcategory": null,
  "description": "Constrains child content to a fixed width-to-height ratio.",
  "thumbnail": "/preview-cards/aspect-ratio.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/AspectRatio/AspectRatio.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-foreground"
  ],
  "api": {
    "name": "AspectRatio",
    "category": "Layout",
    "subcategory": null,
    "description": "Constrains child content to a fixed width-to-height ratio.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/AspectRatio/AspectRatio.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Ratio",
        "type": "double",
        "default": "1",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [],
    "records": [],
    "cssVars": [
      "--color-foreground"
    ],
    "examples": [
      {
        "title": "16:9 Ratio",
        "code": "<AspectRatio Ratio=\"16.0 / 9.0\" Class=\"rounded-md overflow-hidden bg-muted\">\n    <div class=\"flex items-center justify-center h-full\">\n        16:9 Aspect Ratio\n    </div>\n</AspectRatio>"
      },
      {
        "title": "Different Ratios",
        "code": "<AspectRatio Ratio=\"1\" Class=\"rounded-md overflow-hidden bg-muted\">\n    <div class=\"flex items-center justify-center h-full\">1:1</div>\n</AspectRatio>\n\n<AspectRatio Ratio=\"4.0 / 3.0\" Class=\"rounded-md overflow-hidden bg-muted\">\n    <div class=\"flex items-center justify-center h-full\">4:3</div>\n</AspectRatio>"
      },
      {
        "title": "Media Card",
        "code": "<Card>\n    <AspectRatio Ratio=\"16.0 / 9.0\" Class=\"rounded-t-lg overflow-hidden bg-muted\">\n        <div class=\"flex items-center justify-center h-full text-muted-foreground\">\n            Thumbnail\n        </div>\n    </AspectRatio>\n    <CardContent Class=\"p-4\">\n        <Lumeo.Text Weight=\"semibold\">Getting Started with Lumeo</Lumeo.Text>\n        <Lumeo.Text Size=\"sm\" Color=\"muted\" Class=\"mt-1\">Learn how to build beautiful UIs.</Lumeo.Text>\n    </CardContent>\n</Card>"
      },
      {
        "title": "Ratio — interactive",
        "code": "<AspectRatio Ratio=\"16.0 / 9.0\" Class=\"rounded-md overflow-hidden bg-muted\">\n    <div class=\"flex items-center justify-center h-full text-sm text-muted-foreground\">16:9</div>\n</AspectRatio>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "aspect-ratio",
  "docsUrl": "https://lumeo.nativ.sh/components/aspect-ratio",
  "sourceUrl": [
    {
      "file": "UI/AspectRatio/AspectRatio.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/AspectRatio/AspectRatio.razor"
    }
  ],
  "source": [
    {
      "path": "UI/AspectRatio/AspectRatio.razor",
      "content": "@namespace Lumeo\n\n<div class=\"relative w-full\" style=\"padding-bottom: @(100.0 / Ratio)%\" @attributes=\"AdditionalAttributes\">\n    <div class=\"@CssClass\">\n        @ChildContent\n    </div>\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public double Ratio { get; set; } = 1;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"absolute inset-0 {Class}\".Trim();\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "AspectRatio",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/AspectRatio/AspectRatioTests.cs"
  ],
  "mdSummary": "# AspectRatio\n\nConstrains child content to a fixed width-to-height ratio.\n\n**Package:** `Lumeo` · **Category:** Layout\n**Docs:** https://lumeo.nativ.sh/components/aspect-ratio\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| AspectRatio | ChildContent | `RenderFragment?` | `` |  |\n| AspectRatio | Ratio | `double` | `1` |  |\n| AspectRatio | Class | `string?` | `` |  |\n| AspectRatio | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (AspectRatio) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- (none)\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<AspectRatio />\n```\n\n## CSS variables\n`--color-foreground`\n\n## Files\n- `UI/AspectRatio/AspectRatio.razor`\n"
}