Cards 3D em Angular com imagem de capa, título sobreposto e objeto/mascote (object3D). Compatível com Angular 16–20. Inputs opcionais, tamanhos configuráveis e CSS “blindado” para evitar conflitos no app consumidor.
npm install card-three-dimensionalbash
npm i card-three-dimensional
`
Como usar
$3
`ts
import { Component } from '@angular/core';
import { UiCardGridComponent, ImgCard } from 'card-three-dimensional';
@Component({
selector: 'app-home',
standalone: true,
imports: [UiCardGridComponent],
template:
})
export class HomeComponent {
cards: ImgCard[] = [
{
cover: '/assets/capas/taiga.jpg',
title: '/assets/titles/taiga.png',
object3D: '/assets/characters/taiga.png',
redirect: '/produto/taiga',
alt: 'Taiga Aisaka'
},
{
cover: '/assets/capas/megumin.jpg',
object3D: '/assets/characters/megumin.png',
redirect: '/produto/megumin'
}
];
}
`
$3
`html
[imgs]="cards"
style="--card-w: 260px; --card-h: 260px; --gap: 2rem">
`
API do Componente
`ts
export type ImgCard = {
cover?: string;
title?: string;
object3D?: string;
redirect?: string;
alt?: string;
};
`
Inputs
| Input | Tipo | Default | Descrição |
|----------------|--------------|------------------------|-----------|
| imgs | ImgCard[] | [] | Lista de cards (opcional). |
| defaultRedirect | string | 'javascript:void(0)' | Link fallback. |
| cardWidth | number | 200 | Largura em px. |
| cardHeight | number | 200 | Altura em px. |
| gap | string | '2.5rem' | Espaço entre cards. |
Compatibilidade
Angular 16–20.
Peer deps: @angular/core e @angular/common.
Changelog
- 0.0.7
- Ajuste de estilo
- 0.0.2
- Inputs opcionais (ImgCard com propriedades ? e *ngIf no template)
- Controle de tamanho via inputs (cardWidth, cardHeight, gap) e CSS variables (--card-w, --card-h, --gap`)