Card

Giới thiệu

card là một component Card linh hoạt dành cho Angular, cho phép hiển thị nội dung với phần header tùy chỉnh và body có thể mở rộng hoặc thu gọn (collapse/expand).

Tính năng

• Hiển thị tiêu đề với text hoặc custom TemplateRef
• Ẩn/hiện nội dung (collapse/expand) với nút điều khiển
• Cung cấp sự kiện outChangeStateShowContent khi thay đổi trạng thái hiển thị
• Cung cấp sự kiện outFunctionsControl để điều khiển từ bên ngoài qua IFunctionControlCard
• Tùy chỉnh cấu hình giao diện qua IConfigCard (padding, border, background, icon)
• Tùy thêm CSS cho header và body qua các input
• Hỗ trợ nội dung linh hoạt bên trong qua <ng-content>

Cài đặt

Yêu cầu

• Angular 18.0.0 trở lên
• Tailwind CSS 3.3.0 trở lên

Hướng dẫn

Để cài đặt thư viện card, sử dụng npm hoặc yarn:

npm install @libs-ui/components-card

hoặc

yarn add @libs-ui/components-card

Sử dụng

Cách 1: Inline template

import { Component } from '@angular/core';
import { LibsUiComponentsCardComponent } from '@libs-ui/components-card';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsCardComponent],
  template: `
    <libs_ui-components-card
      [label]="{ labelLeft: 'Tiêu đề Card', popover: {} }"
      [hasCollapseBtn]="true"
      [configCard]="{ width: '300px' }">
      Nội dung ví dụ bên trong Card.
    </libs_ui-components-card>
  `,
})
export class ExampleComponent {}

Cách 2: Sử dụng file HTML riêng biệt

<!-- example.component.html -->
<libs_ui-components-card
  [label]="{ labelLeft: 'Tiêu đề Card', popover: {} }"
  [ignoreTitle]="false"
  [hasCollapseBtn]="true"
  [clickExactly]="false"
  [configCard]="{ ignoreBorderHeader: true }">
  Nội dung Card tùy chỉnh.
</libs_ui-components-card>

// example.component.ts
import { Component } from '@angular/core';
import { LibsUiComponentsCardComponent } from '@libs-ui/components-card';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsCardComponent],
  templateUrl: './example.component.html',
})
export class ExampleComponent {}

Công nghệ sử dụng

• Angular 18: standalone components, signals, control flow (@if, @for)
• Tailwind CSS: xây dựng giao diện demo và tiện ích style

API Reference

Inputs

| Tên | Kiểu dữ liệu | Mặc định | Mô tả | | ------------------------------------- | -------------------------------- | -------- | ----------------------------------------------------------- | | label | ILabel | - | Cấu hình label tiêu đề (text bên trái, popover, v.v.) | | ignoreTitle | boolean | - | Nếu true, ẩn phần header | | hasCollapseBtn | boolean | - | Hiển thị nút collapse/expand | | clickExactly | boolean | - | Chỉ cho phép collapse khi click đúng biểu tượng | | configCard | IConfigCard | - | Cấu hình giao diện card (padding, border, background, icon) | | templateHeader | TemplateRef<TYPE_TEMPLATE_REF> | - | Template custom cho header | | classIncludeBody | string | - | CSS class thêm cho phần body | | classIncludeHeader | string | - | CSS class thêm cho phần header | | classIncludeHeaderWhenHiddenContent | string | - | CSS class khi header ở trạng thái ẩn nội dung |

Outputs

| Tên | Kiểu dữ liệu | Mô tả | | --------------------------- | ---------------------- | ----------------------------------------------------- | | outChangeStateShowContent | boolean | Sự kiện emit khi trạng thái ẩn/hiện nội dung thay đổi | | outFunctionsControl | IFunctionControlCard | Sự kiện cung cấp function control từ bên ngoài |

Interfaces

IConfigCard

export interface IConfigCard {
  ignorePaddingLeft?: boolean;
  ignoreBorderHeader?: boolean;
  ignoreBackgroundHeader?: boolean;
  iconConRight?: boolean;
  width?: string;
  classIncludeLabel?: string;
  classIconInclude?: string;
  classIconWhenShowContent?: string;
  classIconWhenHiddenContent?: string;
  ignoreBorderRadiusHeader?: boolean;
  ignoreBorderBody?: boolean;
}

Mô tả: Cấu hình các thuộc tính hiển thị của Card.

IFunctionControlCard

export interface IFunctionControlCard {
  changeHidden: () => Promise<void>;
}

Mô tả: Interface cho phép điều khiển trạng thái hiển thị (collapse/expand) từ bên ngoài.