咨询ngx-bootstrap是否有card组件及无该组件时的替代方案

Hey there! Great question—let’s clear this up for you right away.

Does ngx-bootstrap have a dedicated Card component? #

Nope, ngx-bootstrap doesn’t offer an official, purpose-built Card component in its core library. It focuses on wrapping Bootstrap’s interactive components (like modals, tabs, dropdowns), but static layout components like cards are left to be implemented using Bootstrap’s native CSS classes.

Alternative Solutions #

Since ngx-bootstrap is built on top of Bootstrap, you have a few solid options to create card UIs:

• Use Bootstrap’s native Card classes directly
  This is the simplest approach. You can leverage Bootstrap’s pre-built card, card-body, card-title, etc., classes in your Angular templates to build fully functional cards. Here’s a quick example:

  <div class="card shadow-sm" style="max-width: 24rem;">
    <img src="/assets/your-image.jpg" class="card-img-top" alt="Card image">
    <div class="card-body">
      <h5 class="card-title">My Custom Card</h5>
      <p class="card-text">A short description for this card component built with Bootstrap's native classes.</p>
      <button class="btn btn-primary">Learn More</button>
    </div>
  </div>
  

• Build a reusable Angular Card component
  If you need to use cards across your app, wrap the Bootstrap card structure into a custom Angular component. This lets you define inputs (like title, imageSrc, content) for easy reuse. For example:

  // card.component.ts
  import { Component, Input } from '@angular/core';
  
  @Component({
    selector: 'app-custom-card',
    template: `
      <div class="card" [style.width]="width">
        <img [src]="imageSrc" class="card-img-top" [alt]="imageAlt">
        <div class="card-body">
          <h5 class="card-title">{{ title }}</h5>
          <p class="card-text">{{ content }}</p>
          <ng-content></ng-content> <!-- For custom buttons/actions -->
        </div>
      </div>
    `
  })
  export class CustomCardComponent {
    @Input() title: string = '';
    @Input() imageSrc: string = '';
    @Input() imageAlt: string = 'Card image';
    @Input() content: string = '';
    @Input() width: string = '18rem';
  }
  

  You can then use this component anywhere in your app like:

  <app-custom-card 
    title="Reusable Card"
    imageSrc="/assets/card-image.jpg"
    content="This is a reusable card component built with Angular and Bootstrap.">
    <button class="btn btn-secondary">View Details</button>
  </app-custom-card>
  

• Combine with other Angular UI libraries (optional)
  If you’re open to adding another library, you can use components like Angular Material’s mat-card or PrimeNG’s p-card. Just be mindful of potential style conflicts with Bootstrap, and make sure to adjust your global styles if needed.

内容的提问来源于stack exchange，提问作者user9787781