Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commita331760

Browse files
committed
Added circle component and updated instagram preset
1 parent2a78bca commita331760

File tree

8 files changed

+33
-20
lines changed

8 files changed

+33
-20
lines changed

‎README.md‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ Please notice this is a work in progress and may not be ready for production usa
2929
<svg:g ngx-facebook-preset></svg:g>
3030
</ngx-content-loading>
3131

32+
<ngx-content-loading [width]="800" [height]="800">
33+
<svg:g ngx-instagram-preset></svg:g>
34+
</ngx-content-loading>
35+
3236

3337
####Available presets
3438
- ngx-facebook-preset
@@ -37,7 +41,18 @@ Please notice this is a work in progress and may not be ready for production usa
3741

3842
###Custom templates
3943

40-
<ngx-content-loading [width]="800">
44+
<ngx-content-loading [width]="800" [height]="800">
45+
<svg:g ngx-circle cx="30" cy="30" r="30"></svg:g>
4146
<svg:g ngx-rect width="50" height="50" y="0" x="0"></svg:g>
4247
<svg:g ngx-rect width="150" height="10" y="10" x="60" rx="5" ry="5"></svg:g>
4348
</ngx-content-loading>
49+
50+
##API
51+
52+
**`width`** -[**`?string`**] (default: 400)
53+
**`height`** -[**`?string`**] (default: 130)
54+
**`preserveAspectRatio`** -[**`?string`**] (default: xMidYMid meet)
55+
**`speed`** -[**`?string`**] (default: 1000ms)
56+
**`primaryColor`** -[**`?string`**] (default: #f3f3f3)
57+
**`secondaryColor`** -[**`?string`**] (default: #ecebeb)
58+

‎demo/app/app.component.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
<divclass="container">
2-
<ngx-content-loading[width]="800"[height]="400">
3-
<svg:gngx-facebook-preset></svg:g>
4-
</ngx-content-loading>
5-
6-
<ngx-content-loading[width]="800"[height]="400">
2+
<ngx-content-loading[width]="800"[height]="800">
73
<svg:gngx-instagram-preset></svg:g>
84
</ngx-content-loading>
95
</div>

‎demo/app/app.module.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { NgModule } from '@angular/core';
44
import{AppComponent}from'./app.component';
55
import{NgxContentLoadingModule}from'../../src/ngx-content-loading.module';
66

7-
87
@NgModule({
98
declarations:[
109
AppComponent

‎src/ngx-content-loading.module.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { SvgElementComponent } from './ngx-content-loading/svg-element/svg-eleme
77
import{SvgStopComponent}from'./ngx-content-loading/svg-stop/svg-stop.component';
88
import{FacebookPresetComponent}from'./ngx-content-loading/facebook-preset/facebook-preset.component';
99
import{InstagramPresetComponent}from'./ngx-content-loading/instagram-preset/instagram-preset.component';
10+
import{CircleComponent}from'./ngx-content-loading/circle/circle.component';
1011

1112
@NgModule({
1213
imports:[
@@ -15,6 +16,7 @@ import { InstagramPresetComponent } from './ngx-content-loading/instagram-preset
1516
declarations:[
1617
NgxContentLoadingComponent,
1718
RectComponent,
19+
CircleComponent,
1820
SvgElementComponent,
1921
SvgStopComponent,
2022
FacebookPresetComponent,
@@ -23,6 +25,7 @@ import { InstagramPresetComponent } from './ngx-content-loading/instagram-preset
2325
exports:[
2426
NgxContentLoadingComponent,
2527
RectComponent,
28+
CircleComponent,
2629
FacebookPresetComponent,
2730
InstagramPresetComponent
2831
]
Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<svg:gngx-rectwidth="50"height="50"y="0"x="0"rx="5"ry="5"></svg:g>
2-
<svg:gngx-rectwidth="100"height="10"y="10"x="60"rx="5"ry="5"></svg:g>
3-
<svg:gngx-rectwidth="40"height="10"y="30"x="60"rx="5"ry="5"></svg:g>
4-
<svg:gngx-rectwidth="250"height="250"y="60"x="0"rx="5"ry="5"></svg:g>
1+
<svg:gngx-circlecx="30"cy="30"r="30"></svg:g>
2+
<svg:gngx-rectwidth="120"height="10"y="20"x="80"rx="5"ry="5"></svg:g>
3+
<svg:gngx-rectwidth="60"height="10"y="40"x="80"rx="5"ry="5"></svg:g>
4+
<svg:gngx-rectwidth="250"height="250"y="70"x="0"rx="5"ry="5"></svg:g>

‎src/ngx-content-loading/rect/rect.component.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<svg:rect[attr.x]="x"
1+
<svg:rect
2+
[attr.x]="x"
23
[attr.y]="y"
34
[attr.rx]="rx"
45
[attr.ry]="ry"
Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import{Component,OnInit,Input}from'@angular/core';
22
import{SvgElementComponent}from'../svg-element/svg-element.component';
3+
import{Defaults}from'../defaults.enum';
34

45
@Component({
56
selector:'[ngx-rect]',
67
templateUrl:'./rect.component.html',
78
styleUrls:['./rect.component.scss']
89
})
910
exportclassRectComponentextendsSvgElementComponent{
10-
11+
@Input()publicy:string;
12+
@Input()publicx:string;
13+
@Input()publicrx:string=Defaults.Rx;
14+
@Input()publicry:string=Defaults.Ry;
15+
@Input()publicwidth:string;
16+
@Input()publicheight:string;
1117
}

‎src/ngx-content-loading/svg-element/svg-element.component.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,6 @@ import { NgxContentLoadingComponent } from '../index';
99
changeDetection:ChangeDetectionStrategy.OnPush
1010
})
1111
exportclassSvgElementComponentimplementsOnInit{
12-
@Input()publicwidth:string;
13-
@Input()publicheight:string;
14-
@Input()publicy:string;
15-
@Input()publicx:string;
16-
@Input()publicrx:string=Defaults.Rx;
17-
@Input()publicry:string=Defaults.Ry;
18-
1912
publicclipPathId:string=getId();
2013
publiclinearGradientId:string=getId();
2114

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp