mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
@@ -32,14 +32,6 @@ Add the following dependency to your index.html:
|
|||||||
<script src="node_modules/alfresco-js-api/bundle.js"></script>
|
<script src="node_modules/alfresco-js-api/bundle.js"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Style
|
|
||||||
The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
|
|
||||||
design dependency to your project:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install --save material-design-icons material-design-lite
|
|
||||||
```
|
|
||||||
|
|
||||||
Also make sure you include these dependencies in your .html page:
|
Also make sure you include these dependencies in your .html page:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@@ -49,8 +41,50 @@ Also make sure you include these dependencies in your .html page:
|
|||||||
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Make sure your systemjs.config has the following configuration:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
System.config({
|
||||||
|
defaultJSExtensions: true,
|
||||||
|
map: {
|
||||||
|
'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
|
||||||
|
'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload',
|
||||||
|
'rxjs': 'node_modules/rxjs',
|
||||||
|
'angular2' : 'node_modules/angular2',
|
||||||
|
'ng2-translate': 'node_modules/ng2-translate',
|
||||||
|
'app': 'dist/src'
|
||||||
|
},
|
||||||
|
packages: {
|
||||||
|
'app': {
|
||||||
|
defaultExtension: 'js'
|
||||||
|
},
|
||||||
|
'ng2-alfresco-core': {
|
||||||
|
defaultExtension: 'js'
|
||||||
|
},
|
||||||
|
'ng2-alfresco-upload': {
|
||||||
|
defaultExtension: 'js'
|
||||||
|
},
|
||||||
|
'rxjs': {
|
||||||
|
defaultExtension: 'js'
|
||||||
|
},
|
||||||
|
'angular2': {
|
||||||
|
defaultExtension: 'js'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Style
|
||||||
|
The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
|
||||||
|
design dependency to your project:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install --save material-design-icons material-design-lite
|
||||||
|
```
|
||||||
|
|
||||||
#### Basic usage
|
#### Basic usage
|
||||||
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<alfresco-upload-button [showUdoNotificationBar]="true"
|
<alfresco-upload-button [showUdoNotificationBar]="true"
|
||||||
[uploadFolders]="true"
|
[uploadFolders]="true"
|
||||||
@@ -64,11 +98,12 @@ Also make sure you include these dependencies in your .html page:
|
|||||||
Example of an App that declares upload button component :
|
Example of an App that declares upload button component :
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { Component } from '@angular/core';
|
import { Component } from 'angular2/core';
|
||||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
import { bootstrap } from 'angular2/platform/browser';
|
||||||
import { HTTP_PROVIDERS } from '@angular/http';
|
import { HTTP_PROVIDERS } from 'angular2/http';
|
||||||
import { AlfrescoSettingsService , ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core';
|
import { AlfrescoSettingsService , ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
|
||||||
import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload';
|
import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload/dist/ng2-alfresco-upload';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'my-app',
|
selector: 'my-app',
|
||||||
@@ -121,11 +156,12 @@ This component, provide a drag and drop are to upload files to alfresco.
|
|||||||
Example of an App that declares upload drag and drop component :
|
Example of an App that declares upload drag and drop component :
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { Component } from '@angular/core';
|
import { Component } from 'angular2/core';
|
||||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
import { bootstrap } from 'angular2/platform/browser';
|
||||||
import { HTTP_PROVIDERS } from '@angular/http';
|
import { HTTP_PROVIDERS } from 'angular2/http';
|
||||||
import { AlfrescoSettingsService, ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core';
|
import { AlfrescoSettingsService, ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
|
||||||
import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload';
|
import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload/dist/ng2-alfresco-upload';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'my-app',
|
selector: 'my-app',
|
||||||
|
Reference in New Issue
Block a user