ngx-opalbytes-components 1.21.0 → 1.22.0
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 +75 -0
- package/fesm2022/ngx-opalbytes-components.mjs +291 -19
- package/fesm2022/ngx-opalbytes-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/shared/components/index.ts +6 -1
- package/src/lib/shared/components/skeleton/skeleton.css +92 -0
- package/src/lib/shared/components/skeleton/skeleton.html +3 -0
- package/src/lib/shared/components/skeleton/skeleton.spec.ts +22 -0
- package/src/lib/shared/components/skeleton/skeleton.stories.ts +131 -0
- package/src/lib/shared/components/skeleton/skeleton.ts +46 -0
- package/types/ngx-opalbytes-components.d.ts +110 -2
package/README.md
CHANGED
|
@@ -145,6 +145,7 @@ src/
|
|
|
145
145
|
| ├── kpi/
|
|
146
146
|
| ├── links-button/
|
|
147
147
|
| ├── paginator/
|
|
148
|
+
| ├── skeleton/
|
|
148
149
|
| ├── stepper/
|
|
149
150
|
| ├── tab-group/
|
|
150
151
|
| ├── tab-panel/
|
|
@@ -955,6 +956,80 @@ Controle de paginação para tabelas ou listas.
|
|
|
955
956
|
|
|
956
957
|
---
|
|
957
958
|
|
|
959
|
+
### `CaoSkeleton`
|
|
960
|
+
Um componente de esqueleto de carregamento (skeleton/placeholder) com variantes de retângulo, círculo e texto, animação shimmer customizável e cor configurável.
|
|
961
|
+
|
|
962
|
+
**Seletor:** `<cao-skeleton>`
|
|
963
|
+
|
|
964
|
+
**Tipo `CaoSkeletonVariant`**
|
|
965
|
+
|
|
966
|
+
| Valor | Descrição |
|
|
967
|
+
| --- | --- |
|
|
968
|
+
| `'rect'` | Retângulo (padrão). |
|
|
969
|
+
| `'circle'` | Círculo (largura/altura devem ser iguais, mas é garantido via `aspect-ratio`). |
|
|
970
|
+
| `'text'` | Linha de texto (altura `1em`, raio `4px`). |
|
|
971
|
+
|
|
972
|
+
**Atributos (Inputs)**
|
|
973
|
+
|
|
974
|
+
| Atributo | Tipo | Padrão | Descrição |
|
|
975
|
+
| --- | --- | --- | --- |
|
|
976
|
+
| `borderRadius` | `string` | `'14px'` | Raio da borda do retângulo (ignorado nas variantes `circle` e `text`). |
|
|
977
|
+
| `width` | `string` | `'100%'` | Largura do esqueleto (usada quando `size` não é informado). |
|
|
978
|
+
| `height` | `string` | `'100%'` | Altura do esqueleto (usada quando `size` não é informado). |
|
|
979
|
+
| `bgColor` | `string` | `'#e2e8f0'` | Cor de fundo do esqueleto. |
|
|
980
|
+
| `shine` | `string` | `'#f8fafc'` | Cor do reflexo (shimmer). |
|
|
981
|
+
| `variant` | `CaoSkeletonVariant` | `'rect'` | Formato do esqueleto (`'rect'`, `'circle'` ou `'text'`). |
|
|
982
|
+
| `speed` | `string` | `'2s'` | Duração da animação shimmer. |
|
|
983
|
+
| `size` | `string` | `undefined` | Quando definido, sobrescreve `width` e `height` simultaneamente (ex.: `'48px'`). |
|
|
984
|
+
| `animationDeg` | `string` | `'90deg'` | Ângulo do gradiente da animação shimmer. |
|
|
985
|
+
|
|
986
|
+
**CSS Custom Properties**
|
|
987
|
+
|
|
988
|
+
O componente expõe todas as suas propriedades visuais via CSS custom properties, que cascateiam naturalmente e podem ser sobrescritas por um elemento pai ou globalmente:
|
|
989
|
+
|
|
990
|
+
| Propriedade | Padrão | Descrição |
|
|
991
|
+
| --- | --- | --- |
|
|
992
|
+
| `--skeleton-width` | `100%` | Largura do esqueleto. |
|
|
993
|
+
| `--skeleton-height` | `100%` | Altura do esqueleto. |
|
|
994
|
+
| `--skeleton-bg` | `#e2e8f0` | Cor de fundo do esqueleto. |
|
|
995
|
+
| `--skeleton-shine` | `#f8fafc` | Cor do reflexo (shimmer). |
|
|
996
|
+
| `--skeleton-radius` | `14px` | Raio da borda. |
|
|
997
|
+
| `--skeleton-speed` | `2s` | Duração da animação shimmer. |
|
|
998
|
+
| `--skeleton-animation-deg` | `90deg` | Ângulo do gradiente do shimmer. |
|
|
999
|
+
|
|
1000
|
+
```css
|
|
1001
|
+
.my-card {
|
|
1002
|
+
--skeleton-bg: #d1d5db;
|
|
1003
|
+
--skeleton-shine: #f3f4f6;
|
|
1004
|
+
--skeleton-radius: 8px;
|
|
1005
|
+
--skeleton-speed: 2s;
|
|
1006
|
+
}
|
|
1007
|
+
```
|
|
1008
|
+
|
|
1009
|
+
**Exemplo de uso:**
|
|
1010
|
+
|
|
1011
|
+
```html
|
|
1012
|
+
<!-- Retângulo -->
|
|
1013
|
+
<cao-skeleton width="200px" height="40px"></cao-skeleton>
|
|
1014
|
+
|
|
1015
|
+
<!-- Círculo -->
|
|
1016
|
+
<cao-skeleton variant="circle" size="48px"></cao-skeleton>
|
|
1017
|
+
|
|
1018
|
+
<!-- Linha de texto -->
|
|
1019
|
+
<cao-skeleton variant="text" width="120px"></cao-skeleton>
|
|
1020
|
+
|
|
1021
|
+
<!-- Cores customizadas e duração da animação -->
|
|
1022
|
+
<cao-skeleton
|
|
1023
|
+
width="100%"
|
|
1024
|
+
height="24px"
|
|
1025
|
+
bgColor="#e0e7ff"
|
|
1026
|
+
shine="#ffffff"
|
|
1027
|
+
speed="1.5s"
|
|
1028
|
+
></cao-skeleton>
|
|
1029
|
+
```
|
|
1030
|
+
|
|
1031
|
+
---
|
|
1032
|
+
|
|
958
1033
|
### `TimePicker`
|
|
959
1034
|
Um seletor de horário.
|
|
960
1035
|
|