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

npm i card-three-dimensional

Como usar

Importação (standalone)

import { Component } from '@angular/core';
import { UiCardGridComponent, ImgCard } from 'card-three-dimensional';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [UiCardGridComponent],
  template: `
    <ui-card-grid
      [imgs]="cards"
      [cardWidth]="240"
      [cardHeight]="240"
      gap="3rem">
    </ui-card-grid>
  `
})
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'
    }
  ];
}

Ajuste via CSS variables

<ui-card-grid
  [imgs]="cards"
  style="--card-w: 260px; --card-h: 260px; --gap: 2rem">
</ui-card-grid>

API do Componente

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