You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CHANGELOG.md
+41Lines changed: 41 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,50 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
9
9
10
10
### Added
11
11
12
+
- Adding support for extending global theme added via `NgxSkeletonLoaderModule.forRoot({ theme: /* ...list of CSS atributes */} })`
13
+
14
+
By default when using `NgxSkeletonLoaderModule.forRoot({ theme: /* ...list of CSS atributes */} })` the application is using this value as source of truth, overriding any local theming passed to `<ngx-skeleton-loader>` component via `[theme]` input.
15
+
16
+
By using `NgxSkeletonLoaderModule.forRoot({ theme: { extendsFromRoot: true, /* ...list of CSS atributes */} })` in your application, you should also be aware that:
17
+
18
+
- By default, every `<ngx-skeleton-loader>` component will use `theme` coming from `NgxSkeletonLoaderModule.forRoot()` as the source of truth
19
+
- If there's any CSS attribute on the component locally which overrides the CSS spec, it combines both themes, but overriding global CSS attributes in favor of local ones.
20
+
21
+
```html
22
+
<!--
23
+
// ... E.G: App is using this configuration below
24
+
25
+
NgxSkeletonLoaderModule.forRoot({
26
+
theme: {
27
+
// Enabliong theme combination
28
+
extendsFromRoot: true,
29
+
// ... list of CSS theme attributes
30
+
height: '30px',
31
+
},
32
+
}),
33
+
-->
34
+
35
+
<divclass="item">
36
+
<ngx-skeleton-loader></ngx-skeleton-loader>
37
+
<!-- above line will produce a skeleton component using `height: 30px;`" -->
<!-- above line will produce a skeleton component using `height: 50px; background: red;`" -->
42
+
</div>
43
+
```
44
+
12
45
- Adding new `custom-content` appearance. From now on, consumers can now add their own content inside `<ng-skeleton-loader></ng-skeleton-loader>` component. So that, they can add some custom content, such as SVG, as an example
Copy file name to clipboardExpand all lines: README.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -124,7 +124,7 @@ export class YourAppComponent {}
124
124
125
125
This method is also accepting the option of having a global theme and local theme inputs. You can enable it by passing `NgxSkeletonLoaderModule.forRoot({ theme: { extendsFromRoot: true, /* ...list of CSS atributes */} })` in your module. Quite simple, right? 😄
126
126
127
-
By using that configuration in yuor application, you should also be aware that:
127
+
By using that configuration in your application, you should also be aware that:
128
128
129
129
- By default, every `<ngx-skeleton-loader>` component will use `theme` coming from `NgxSkeletonLoaderModule.forRoot()` as the source of truth
130
130
- If there's any CSS attribute on the component locally which overrides the CSS spec, it combines both themes, but overriding global CSS attributes in favor of local ones.
@@ -149,7 +149,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
0 commit comments