@libs-ui/components-card 0.2.281 → 0.2.283
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +143 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,3 +1,144 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Card
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Giới thiệu
|
|
4
|
+
|
|
5
|
+
`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).
|
|
6
|
+
|
|
7
|
+
## Tính năng
|
|
8
|
+
|
|
9
|
+
- Hiển thị tiêu đề với text hoặc custom `TemplateRef`
|
|
10
|
+
- Ẩn/hiện nội dung (collapse/expand) với nút điều khiển
|
|
11
|
+
- Cung cấp sự kiện `outChangeStateShowContent` khi thay đổi trạng thái hiển thị
|
|
12
|
+
- Cung cấp sự kiện `outFunctionsControl` để điều khiển từ bên ngoài qua `IFunctionControlCard`
|
|
13
|
+
- Tùy chỉnh cấu hình giao diện qua `IConfigCard` (padding, border, background, icon)
|
|
14
|
+
- Tùy thêm CSS cho header và body qua các input
|
|
15
|
+
- Hỗ trợ nội dung linh hoạt bên trong qua `<ng-content>`
|
|
16
|
+
|
|
17
|
+
## Cài đặt
|
|
18
|
+
|
|
19
|
+
### Yêu cầu
|
|
20
|
+
|
|
21
|
+
- Angular 18.0.0 trở lên
|
|
22
|
+
- Tailwind CSS 3.3.0 trở lên
|
|
23
|
+
|
|
24
|
+
### Hướng dẫn
|
|
25
|
+
|
|
26
|
+
Để cài đặt thư viện `card`, sử dụng npm hoặc yarn:
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
npm install @libs-ui/components-card
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
hoặc
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
yarn add @libs-ui/components-card
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Sử dụng
|
|
39
|
+
|
|
40
|
+
### Cách 1: Inline template
|
|
41
|
+
|
|
42
|
+
```typescript
|
|
43
|
+
import { Component } from '@angular/core';
|
|
44
|
+
import { LibsUiComponentsCardComponent } from '@libs-ui/components-card';
|
|
45
|
+
|
|
46
|
+
@Component({
|
|
47
|
+
selector: 'app-example',
|
|
48
|
+
standalone: true,
|
|
49
|
+
imports: [LibsUiComponentsCardComponent],
|
|
50
|
+
template: `
|
|
51
|
+
<libs_ui-components-card
|
|
52
|
+
[label]="{ labelLeft: 'Tiêu đề Card', popover: {} }"
|
|
53
|
+
[hasCollapseBtn]="true"
|
|
54
|
+
[configCard]="{ width: '300px' }">
|
|
55
|
+
Nội dung ví dụ bên trong Card.
|
|
56
|
+
</libs_ui-components-card>
|
|
57
|
+
`
|
|
58
|
+
})
|
|
59
|
+
export class ExampleComponent {}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Cách 2: Sử dụng file HTML riêng biệt
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<!-- example.component.html -->
|
|
66
|
+
<libs_ui-components-card
|
|
67
|
+
[label]="{ labelLeft: 'Tiêu đề Card', popover: {} }"
|
|
68
|
+
[ignoreTitle]="false"
|
|
69
|
+
[hasCollapseBtn]="true"
|
|
70
|
+
[clickExactly]="false"
|
|
71
|
+
[configCard]="{ ignoreBorderHeader: true }">
|
|
72
|
+
Nội dung Card tùy chỉnh.
|
|
73
|
+
</libs_ui-components-card>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
```typescript
|
|
77
|
+
// example.component.ts
|
|
78
|
+
import { Component } from '@angular/core';
|
|
79
|
+
import { LibsUiComponentsCardComponent } from '@libs-ui/components-card';
|
|
80
|
+
|
|
81
|
+
@Component({
|
|
82
|
+
selector: 'app-example',
|
|
83
|
+
standalone: true,
|
|
84
|
+
imports: [LibsUiComponentsCardComponent],
|
|
85
|
+
templateUrl: './example.component.html'
|
|
86
|
+
})
|
|
87
|
+
export class ExampleComponent {}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Công nghệ sử dụng
|
|
91
|
+
|
|
92
|
+
- **Angular 18**: standalone components, signals, control flow (`@if`, `@for`)
|
|
93
|
+
- **Tailwind CSS**: xây dựng giao diện demo và tiện ích style
|
|
94
|
+
|
|
95
|
+
## API Reference
|
|
96
|
+
|
|
97
|
+
### Inputs
|
|
98
|
+
|
|
99
|
+
| Tên | Kiểu dữ liệu | Mặc định | Mô tả |
|
|
100
|
+
|----------------------------------|-------------------------------------------|-------------|-------------------------------------------------------------|
|
|
101
|
+
| `label` | `ILabel` | `-` | Cấu hình label tiêu đề (text bên trái, popover, v.v.) |
|
|
102
|
+
| `ignoreTitle` | `boolean` | `-` | Nếu `true`, ẩn phần header |
|
|
103
|
+
| `hasCollapseBtn` | `boolean` | `-` | Hiển thị nút collapse/expand |
|
|
104
|
+
| `clickExactly` | `boolean` | `-` | Chỉ cho phép collapse khi click đúng biểu tượng |
|
|
105
|
+
| `configCard` | `IConfigCard` | `-` | Cấu hình giao diện card (padding, border, background, icon) |
|
|
106
|
+
| `templateHeader` | `TemplateRef<TYPE_TEMPLATE_REF>` | `-` | Template custom cho header |
|
|
107
|
+
| `classIncludeBody` | `string` | `-` | CSS class thêm cho phần body |
|
|
108
|
+
| `classIncludeHeader` | `string` | `-` | CSS class thêm cho phần header |
|
|
109
|
+
| `classIncludeHeaderWhenHiddenContent` | `string` | `-` | CSS class khi header ở trạng thái ẩn nội dung |
|
|
110
|
+
|
|
111
|
+
### Outputs
|
|
112
|
+
|
|
113
|
+
| Tên | Kiểu dữ liệu | Mô tả |
|
|
114
|
+
|--------------------------------|---------------------------|---------------------------------------------------|
|
|
115
|
+
| `outChangeStateShowContent` | `boolean` | Sự kiện emit khi trạng thái ẩn/hiện nội dung thay đổi |
|
|
116
|
+
| `outFunctionsControl` | `IFunctionControlCard` | Sự kiện cung cấp function control từ bên ngoài |
|
|
117
|
+
|
|
118
|
+
### Interfaces
|
|
119
|
+
|
|
120
|
+
#### IConfigCard
|
|
121
|
+
```typescript
|
|
122
|
+
export interface IConfigCard {
|
|
123
|
+
ignorePaddingLeft?: boolean;
|
|
124
|
+
ignoreBorderHeader?: boolean;
|
|
125
|
+
ignoreBackgroundHeader?: boolean;
|
|
126
|
+
iconConRight?: boolean;
|
|
127
|
+
width?: string;
|
|
128
|
+
classIncludeLabel?: string;
|
|
129
|
+
classIconInclude?: string;
|
|
130
|
+
classIconWhenShowContent?: string;
|
|
131
|
+
classIconWhenHiddenContent?: string;
|
|
132
|
+
ignoreBorderRadiusHeader?: boolean;
|
|
133
|
+
ignoreBorderBody?: boolean;
|
|
134
|
+
}
|
|
135
|
+
```
|
|
136
|
+
Mô tả: Cấu hình các thuộc tính hiển thị của Card.
|
|
137
|
+
|
|
138
|
+
#### IFunctionControlCard
|
|
139
|
+
```typescript
|
|
140
|
+
export interface IFunctionControlCard {
|
|
141
|
+
changeHidden: () => Promise<void>;
|
|
142
|
+
}
|
|
143
|
+
```
|
|
144
|
+
Mô tả: Interface cho phép điều khiển trạng thái hiển thị (collapse/expand) từ bên ngoài.
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-card",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.283",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": "^18.2.0",
|
|
6
6
|
"@angular/core": "^18.2.0",
|
|
7
|
-
"@libs-ui/components-label": "0.2.
|
|
8
|
-
"@libs-ui/interfaces-types": "0.2.
|
|
7
|
+
"@libs-ui/components-label": "0.2.283",
|
|
8
|
+
"@libs-ui/interfaces-types": "0.2.283",
|
|
9
9
|
"@ngx-translate/core": "^15.0.0"
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|