Sections
Get Started
Components
import { Component } from '@angular/core'
import { UbAspectRatio } from '@/components/ui/aspect-ratio'
@Component({
standalone: true,
imports: [UbAspectRatio],
template: `
<div ubAspectRatio [ratio]="16 / 9" class="bg-muted rounded-lg">
<img src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80" alt="Photo by Drew Beamer" class="h-full w-full rounded-lg dark:brightness-[0.2] dark:grayscale object-cover">
</div>
`,
})
export class AspectRatioDemo { }Installation
Install the following dependencies:
Copy and paste the following code into your project.
import { Directive } from '@angular/core'
import { RdxAspectRatioDirective } from '@radix-ng/primitives/aspect-ratio'
@Directive({
standalone: true,
selector: 'div[ubAspectRatio],ub-aspect-ratio',
host: {
'data-slot': 'aspect-ratio',
},
hostDirectives: [
{
directive: RdxAspectRatioDirective,
inputs: ['ratio'],
},
],
})
export class UbAspectRatio {} Expand
Update the import paths to match your project setup.
Usage
import { UbAspectRatio } from "@/components/ui/aspect-ratio"
<div ubAspectRatio [ratio]="16 / 9"> <img src="..." alt="Image" class="rounded-md object-cover" /> </div>