card-three-dimensional

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.


Instalação

``bash
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:
[imgs]="cards"
[cardWidth]="240"
[cardHeight]="240"
gap="3rem">


})
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`)
- CSS blindado contra resets globais, imagens respeitando width/height
- Melhorias no layout e posicionamento
- 0.0.1
- Versão inicial

Licença

MIT