Skip to content

Commit 1c0c981

Browse files
wiistrikerwiistriker
committed
add demo app
1 parent fb8fa2f commit 1c0c981

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+25880
-169
lines changed

‎.editorconfig

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 4
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
max_line_length = off
13+
trim_trailing_whitespace = false

‎.gitignore

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
# Only exists if Bazel was run
8+
/bazel-out
9+
10+
# dependencies
11+
/node_modules
12+
13+
# profiling files
14+
chrome-profiler-events*.json
15+
speed-measure-plugin*.json
16+
17+
# IDEs and editors
18+
/.idea
19+
.project
20+
.classpath
21+
.c9/
22+
*.launch
23+
.settings/
24+
*.sublime-workspace
25+
26+
# IDE - VSCode
27+
.vscode/*
28+
!.vscode/settings.json
29+
!.vscode/tasks.json
30+
!.vscode/launch.json
31+
!.vscode/extensions.json
32+
.history/*
33+
34+
# misc
35+
/.sass-cache
36+
/connect.lock
37+
/coverage
38+
/libpeerconnection.log
39+
npm-debug.log
40+
yarn-error.log
41+
testem.log
42+
/typings
43+
44+
# System Files
45+
.DS_Store
46+
Thumbs.db

‎README.md

+14-133
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,27 @@
1-
# ngx-splide
1+
# NgxSplide
22

3-
![npm](https://img.shields.io/npm/v/ngx-splide)
4-
![npm bundle size](https://img.shields.io/bundlephobia/min/ngx-splide)
3+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.2.
54

6-
[Splide.js](https://splidejs.com/) integration to angular
5+
## Development server
76

8-
## Installation
7+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
98

10-
Using `npm`
9+
## Code scaffolding
1110

12-
`npm i --save ngx-splide`
11+
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
1312

14-
Or if you prefer `yarn`
13+
## Build
1514

16-
`yarn add ngx-splide`
15+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
1716

18-
Also this module doesnt have Splide.js as dependency so you need to import it yourself
17+
## Running unit tests
1918

20-
### With CDN
19+
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
2120

22-
```html
23-
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
24-
```
21+
## Running end-to-end tests
2522

26-
## As dependency:
23+
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
2724

28-
```
29-
"dependencies": {
30-
//..
31-
"@splidejs/splide": "^2.4.14",
32-
"ngx-splide": "^0.0.4"
33-
//...
34-
}
35-
```
36-
37-
And add splide.js into your build scripts in `angular.json`:
38-
39-
```json
40-
"scripts": [
41-
//..
42-
"node_modules/@splidejs/splide/dist/js/splide.js",
43-
//..
44-
]
45-
```
46-
47-
48-
## Setup
49-
50-
Add `NgxSplideModule` into `app.module.ts`
51-
52-
```typescript
53-
import { NgxSplideModule } from 'ngx-splide';
54-
55-
@NgModule({
56-
//...
57-
imports: [
58-
//...
59-
NgxSplideModule
60-
],
61-
//...
62-
})
63-
export class AppModule {}
64-
```
65-
66-
## Usage
67-
68-
You can use `<splide />` component with `<splide-slide />` components inside.
69-
70-
### Basic example
71-
72-
```angular2html
73-
<splide>
74-
<splide-slide>
75-
<img src="image1.jpg" alt="" />
76-
</splide-slide>
77-
<splide-slide>
78-
<img src="image2.jpg" alt="" />
79-
</splide-slide>
80-
</splide>
81-
```
82-
83-
### Splide options
84-
85-
```angular2html
86-
<splide [options]="{ type: 'loop', perPage: 1, keyboard: false }">
87-
<splide-slide *ngFor="image in images">
88-
<img [src]="image.src" alt="" />
89-
</splide-slide>
90-
</splide>
91-
```
92-
93-
Please refer to official documentation for supported options https://splidejs.com/options/
94-
95-
### Get splide instance
96-
97-
```angular2html
98-
<splide (onInit)="onSplideInit($event)">
99-
<splide-slide>
100-
<img src="image1.jpg" alt="" />
101-
</splide-slide>
102-
<splide-slide>
103-
<img src="image2.jpg" alt="" />
104-
</splide-slide>
105-
</splide>
106-
```
107-
108-
```typescript
109-
onSplideInit(splide)
110-
{
111-
console.log(splide);
112-
}
113-
```
114-
115-
### Select slide
116-
117-
You can programatically change selected splide slide with `selectedSlideIndex` option
118-
119-
```angular2html
120-
<button type="button"
121-
*ngFor="let image of images; let index = index"
122-
(click)="selectedImageIndex = index">Select image {{ index + 1 }}</button>
123-
124-
<splide [options]="{ type: 'loop', perPage: 1, keyboard: false }">
125-
<splide-slide *ngFor="image in images" [selectedSlideIndex]="selectedImageIndex">
126-
<img [src]="image.src" alt="" />
127-
</splide-slide>
128-
</splide>
129-
```
130-
131-
### Other
132-
133-
You can also pass `containerClass` to append custom class for root `div.splide` node
134-
135-
```angular2html
136-
<splide containerClass="customSplideClass">
137-
```
138-
139-
Will produce:
140-
141-
```html
142-
<div class="splide customSplideClass">
143-
...
144-
</div>
145-
```
25+
## Further help
14626

27+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

‎angular.json

+169
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"ngx-splide": {
7+
"projectType": "library",
8+
"root": "projects/ngx-splide",
9+
"sourceRoot": "projects/ngx-splide/src",
10+
"prefix": "lib",
11+
"architect": {
12+
"build": {
13+
"builder": "@angular-devkit/build-angular:ng-packagr",
14+
"options": {
15+
"tsConfig": "projects/ngx-splide/tsconfig.lib.json",
16+
"project": "projects/ngx-splide/ng-package.json"
17+
},
18+
"configurations": {
19+
"production": {
20+
"tsConfig": "projects/ngx-splide/tsconfig.lib.prod.json"
21+
}
22+
}
23+
},
24+
"test": {
25+
"builder": "@angular-devkit/build-angular:karma",
26+
"options": {
27+
"main": "projects/ngx-splide/src/test.ts",
28+
"tsConfig": "projects/ngx-splide/tsconfig.spec.json",
29+
"karmaConfig": "projects/ngx-splide/karma.conf.js"
30+
}
31+
},
32+
"lint": {
33+
"builder": "@angular-devkit/build-angular:tslint",
34+
"options": {
35+
"tsConfig": [
36+
"projects/ngx-splide/tsconfig.lib.json",
37+
"projects/ngx-splide/tsconfig.spec.json"
38+
],
39+
"exclude": [
40+
"**/node_modules/**"
41+
]
42+
}
43+
}
44+
}
45+
},
46+
"ngx-splide-app": {
47+
"projectType": "application",
48+
"schematics": {},
49+
"root": "projects/ngx-splide-app",
50+
"sourceRoot": "projects/ngx-splide-app/src",
51+
"prefix": "app",
52+
"architect": {
53+
"build": {
54+
"builder": "@angular-devkit/build-angular:browser",
55+
"options": {
56+
"outputPath": "dist/ngx-splide-app",
57+
"index": "projects/ngx-splide-app/src/index.html",
58+
"main": "projects/ngx-splide-app/src/main.ts",
59+
"polyfills": "projects/ngx-splide-app/src/polyfills.ts",
60+
"tsConfig": "projects/ngx-splide-app/tsconfig.app.json",
61+
"aot": true,
62+
"assets": [
63+
"projects/ngx-splide-app/src/favicon.ico",
64+
"projects/ngx-splide-app/src/assets"
65+
],
66+
"styles": [
67+
"projects/ngx-splide-app/src/styles.css",
68+
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
69+
"node_modules/@splidejs/splide/dist/css/splide.min.css",
70+
"node_modules/@splidejs/splide/dist/css/themes/splide-default.min.css"
71+
],
72+
"scripts": [
73+
"node_modules/@splidejs/splide/dist/js/splide.js"
74+
]
75+
},
76+
"configurations": {
77+
"production": {
78+
"fileReplacements": [
79+
{
80+
"replace": "projects/ngx-splide-app/src/environments/environment.ts",
81+
"with": "projects/ngx-splide-app/src/environments/environment.prod.ts"
82+
}
83+
],
84+
"optimization": true,
85+
"outputHashing": "all",
86+
"sourceMap": false,
87+
"extractCss": true,
88+
"namedChunks": false,
89+
"extractLicenses": true,
90+
"vendorChunk": false,
91+
"buildOptimizer": true,
92+
"budgets": [
93+
{
94+
"type": "initial",
95+
"maximumWarning": "2mb",
96+
"maximumError": "5mb"
97+
},
98+
{
99+
"type": "anyComponentStyle",
100+
"maximumWarning": "6kb",
101+
"maximumError": "10kb"
102+
}
103+
]
104+
}
105+
}
106+
},
107+
"serve": {
108+
"builder": "@angular-devkit/build-angular:dev-server",
109+
"options": {
110+
"browserTarget": "ngx-splide-app:build"
111+
},
112+
"configurations": {
113+
"production": {
114+
"browserTarget": "ngx-splide-app:build:production"
115+
}
116+
}
117+
},
118+
"extract-i18n": {
119+
"builder": "@angular-devkit/build-angular:extract-i18n",
120+
"options": {
121+
"browserTarget": "ngx-splide-app:build"
122+
}
123+
},
124+
"test": {
125+
"builder": "@angular-devkit/build-angular:karma",
126+
"options": {
127+
"main": "projects/ngx-splide-app/src/test.ts",
128+
"polyfills": "projects/ngx-splide-app/src/polyfills.ts",
129+
"tsConfig": "projects/ngx-splide-app/tsconfig.spec.json",
130+
"karmaConfig": "projects/ngx-splide-app/karma.conf.js",
131+
"assets": [
132+
"projects/ngx-splide-app/src/favicon.ico",
133+
"projects/ngx-splide-app/src/assets"
134+
],
135+
"styles": [
136+
"projects/ngx-splide-app/src/styles.css"
137+
],
138+
"scripts": []
139+
}
140+
},
141+
"lint": {
142+
"builder": "@angular-devkit/build-angular:tslint",
143+
"options": {
144+
"tsConfig": [
145+
"projects/ngx-splide-app/tsconfig.app.json",
146+
"projects/ngx-splide-app/tsconfig.spec.json",
147+
"projects/ngx-splide-app/e2e/tsconfig.json"
148+
],
149+
"exclude": [
150+
"**/node_modules/**"
151+
]
152+
}
153+
},
154+
"e2e": {
155+
"builder": "@angular-devkit/build-angular:protractor",
156+
"options": {
157+
"protractorConfig": "projects/ngx-splide-app/e2e/protractor.conf.js",
158+
"devServerTarget": "ngx-splide-app:serve"
159+
},
160+
"configurations": {
161+
"production": {
162+
"devServerTarget": "ngx-splide-app:serve:production"
163+
}
164+
}
165+
}
166+
}
167+
}},
168+
"defaultProject": "ngx-splide"
169+
}

0 commit comments

Comments
 (0)