@libs-ui/components-buttons-button 0.2.357-2 → 0.2.357-20
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 +29 -16
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -192,11 +192,21 @@ export class FormComponent {
|
|
|
192
192
|
|
|
193
193
|
### Custom Color — Màu tùy chỉnh
|
|
194
194
|
|
|
195
|
+
`buttonCustom` (kiểu `IColorButton`) **bắt buộc** khi `type="button-custom"` (nền đặc) hoặc `type="button-link-custom"` (dạng link — nền/viền trong suốt). `configStepColor` khai báo màu cho từng trạng thái: `text` / `text_hover` / `text_active` / `text_disable` (bắt buộc) và `background*` / `border*` (tùy chọn). Mỗi giá trị nhận `string` (mã màu, `'transparent'`) hoặc `number` (step màu suy ra từ `rootColor`).
|
|
196
|
+
|
|
195
197
|
```html
|
|
198
|
+
<!-- Nền đặc: type="button-custom" -->
|
|
196
199
|
<libs_ui-components-buttons-button
|
|
197
200
|
type="button-custom"
|
|
198
|
-
label="Custom
|
|
199
|
-
[buttonCustom]="
|
|
201
|
+
label="Custom màu tím"
|
|
202
|
+
[buttonCustom]="customPurple"
|
|
203
|
+
(outClick)="handlerClick($event)" />
|
|
204
|
+
|
|
205
|
+
<!-- Dạng link: type="button-link-custom" -->
|
|
206
|
+
<libs_ui-components-buttons-button
|
|
207
|
+
type="button-link-custom"
|
|
208
|
+
label="Custom link teal"
|
|
209
|
+
[buttonCustom]="customTeal"
|
|
200
210
|
(outClick)="handlerClick($event)" />
|
|
201
211
|
```
|
|
202
212
|
|
|
@@ -212,12 +222,23 @@ import { IColorButton } from '@libs-ui/services-config-project';
|
|
|
212
222
|
templateUrl: './example.component.html',
|
|
213
223
|
})
|
|
214
224
|
export class ExampleComponent {
|
|
215
|
-
|
|
216
|
-
|
|
225
|
+
// Nền đặc
|
|
226
|
+
protected readonly customPurple: IColorButton = {
|
|
227
|
+
rootColor: '#7C3AED',
|
|
217
228
|
configStepColor: {
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
229
|
+
text: '#ffffff', text_hover: '#ffffff', text_active: '#ffffff', text_disable: '#C4B5FD',
|
|
230
|
+
background: '#7C3AED', background_hover: '#6D28D9', background_active: '#5B21B6', background_disable: '#DDD6FE',
|
|
231
|
+
border: '#7C3AED', border_hover: '#6D28D9', border_active: '#5B21B6', border_disable: '#DDD6FE',
|
|
232
|
+
},
|
|
233
|
+
};
|
|
234
|
+
|
|
235
|
+
// Dạng link — nền/viền trong suốt, chỉ đổi màu chữ
|
|
236
|
+
protected readonly customTeal: IColorButton = {
|
|
237
|
+
rootColor: '#0D9488',
|
|
238
|
+
configStepColor: {
|
|
239
|
+
text: '#0D9488', text_hover: '#0F766E', text_active: '#115E59', text_disable: '#99F6E4',
|
|
240
|
+
background: 'transparent', background_hover: '#F0FDFA', background_active: '#CCFBF1', background_disable: 'transparent',
|
|
241
|
+
border: 'transparent', border_hover: 'transparent', border_active: 'transparent', border_disable: 'transparent',
|
|
221
242
|
},
|
|
222
243
|
};
|
|
223
244
|
|
|
@@ -346,7 +367,7 @@ export class ExampleComponent {
|
|
|
346
367
|
|
|
347
368
|
| Input | Type | Default | Mô tả | Ví dụ |
|
|
348
369
|
|---|---|---|---|---|
|
|
349
|
-
| `[buttonCustom]` | `IColorButton` | `undefined` | Cấu hình màu custom — bắt buộc khi `type` là `'button-custom'` hoặc `'button-link-custom'
|
|
370
|
+
| `[buttonCustom]` | `IColorButton` | `undefined` | Cấu hình màu custom — bắt buộc khi `type` là `'button-custom'` hoặc `'button-link-custom'`. Xem ví dụ "Custom Color" phía trên. | `[buttonCustom]="customPurple"` |
|
|
350
371
|
| `[classIconLeft]` | `string` | `''` | Class CSS của icon hiển thị bên trái label | `[classIconLeft]="'libs-ui-icon-add'"` |
|
|
351
372
|
| `[classIconRight]` | `string` | `''` | Class CSS của icon hiển thị bên phải label | `[classIconRight]="'libs-ui-icon-arrow-right'"` |
|
|
352
373
|
| `[classInclude]` | `string` | `''` | Class CSS bổ sung gắn vào phần tử button | `classInclude="w-full"` |
|
|
@@ -526,14 +547,6 @@ export class ToolbarComponent {
|
|
|
526
547
|
|
|
527
548
|
⚠️ **Selector dùng dấu gạch dưới**: Selector chính xác là `libs_ui-components-buttons-button` (dấu `_` sau `libs`), không phải `libs-ui-components-buttons-button`.
|
|
528
549
|
|
|
529
|
-
## Demo
|
|
530
|
-
|
|
531
|
-
```bash
|
|
532
|
-
npx nx serve core-ui
|
|
533
|
-
```
|
|
534
|
-
|
|
535
|
-
Truy cập: `http://localhost:4500/buttons/button`
|
|
536
|
-
|
|
537
550
|
## Unit Tests
|
|
538
551
|
|
|
539
552
|
```bash
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-buttons-button",
|
|
3
|
-
"version": "0.2.357-
|
|
3
|
+
"version": "0.2.357-20",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
|
-
"@libs-ui/components-popover": "0.2.357-
|
|
8
|
-
"@libs-ui/components-spinner": "0.2.357-
|
|
9
|
-
"@libs-ui/services-config-project": "0.2.357-
|
|
10
|
-
"@libs-ui/utils": "0.2.357-
|
|
7
|
+
"@libs-ui/components-popover": "0.2.357-20",
|
|
8
|
+
"@libs-ui/components-spinner": "0.2.357-20",
|
|
9
|
+
"@libs-ui/services-config-project": "0.2.357-20",
|
|
10
|
+
"@libs-ui/utils": "0.2.357-20",
|
|
11
11
|
"@ngx-translate/core": "^15.0.0",
|
|
12
12
|
"rxjs": "~7.8.0",
|
|
13
|
-
"@libs-ui/interfaces-types": "0.2.357-
|
|
13
|
+
"@libs-ui/interfaces-types": "0.2.357-20"
|
|
14
14
|
},
|
|
15
15
|
"sideEffects": false,
|
|
16
16
|
"module": "fesm2022/libs-ui-components-buttons-button.mjs",
|