pns-component-library 1.6.0 → 1.6.2
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
CHANGED
|
@@ -594,9 +594,12 @@ Notification badge component with customizable size, position, themes, and conte
|
|
|
594
594
|
| content | badge content (number or text) | `string \| number` | `''` |
|
|
595
595
|
| size | badge size | `'small' \| 'medium' \| 'large'` | `'small'` |
|
|
596
596
|
| position_type | badge position relative to content | `'top-right' \| 'center-right'` | `'top-right'` |
|
|
597
|
+
| customized_top_distance | top offset for top-right position (CSS length) | `string` | `''` |
|
|
598
|
+
| customized_right_distance | right offset for top-right position (CSS length) | `string` | `''` |
|
|
597
599
|
| built_in_theme | color theme | `'primary' \| 'secondary'` | `'primary'` |
|
|
598
600
|
| customized_theme_color | custom background color (any valid CSS color) | `string` | `''` |
|
|
599
601
|
| customized_class | custom CSS class | `string` | `''` |
|
|
602
|
+
| disabled | hide the badge without affecting the wrapped content | `boolean` | `false` |
|
|
600
603
|
|
|
601
604
|
##### Size Specifications
|
|
602
605
|
|
|
@@ -617,6 +620,19 @@ Notification badge component with customizable size, position, themes, and conte
|
|
|
617
620
|
|
|
618
621
|
> **Note**: Use padding on the wrapper div to control badge position. The badge positions relative to the wrapper's content.
|
|
619
622
|
|
|
623
|
+
Position customization (top-right only):
|
|
624
|
+
|
|
625
|
+
- You can fine-tune the distance of a top-right badge using `customized_top_distance` and `customized_right_distance`. These map to internal CSS variables and only apply when `position_type="top-right"`.
|
|
626
|
+
|
|
627
|
+
```vue
|
|
628
|
+
<Badge position_type="top-right" customized_top_distance="8px" customized_right_distance="12px" content="3">
|
|
629
|
+
<div style="padding: 8px;">
|
|
630
|
+
<div>Icon</div>
|
|
631
|
+
</div>
|
|
632
|
+
|
|
633
|
+
</Badge>
|
|
634
|
+
```
|
|
635
|
+
|
|
620
636
|
##### Built-in Themes
|
|
621
637
|
|
|
622
638
|
| Theme | Background | Text Color |
|