[ADF-3514] Added transclusions sections to doc files (#3756)

* [ADF-3514] Added transclusion sections and guide page

* [ADF-3514] Updated tables of contents where needed

* [ADF-3514] Updated index files
This commit is contained in:
Andy Stark
2018-09-10 11:11:25 +01:00
committed by Eugenio Romano
parent 35e1563fde
commit 2c49de6070
35 changed files with 682 additions and 515 deletions

View File

@@ -8,17 +8,17 @@ Last reviewed: 2018-08-07
Authenticates to Alfresco Content Services and or Alfresco Process Services.
![Login component](../docassets/images/custom-footer.png)
![Login component](../docassets/images/login-extra-content.png)
## Contents
- [Basic usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Handling events](#handling-events)
- [Changing content](#changing-content)
- [Custom logo and background](#custom-logo-and-background)
- [Customizing validation rules](#customizing-validation-rules)
- [Call an external identity provider to fetch the auth token](#call-an-external-identity-provider-to-fetch-the-auth-token)
@@ -34,6 +34,41 @@ Authenticates to Alfresco Content Services and or Alfresco Process Services.
</adf-login>
```
### [Transclusions](../user-guide/transclusion.md)
You can replace the content of the header and footer of the [Login component](../core/login.component.md) with your own custom content:
```html
<adf-login ...>
<login-header><ng-template>My custom HTML for the header</ng-template></login-header>
<login-footer><ng-template>My custom HTML for the footer</ng-template></login-footer>
</adf-login>`
```
Header:
![Login with custom header](../docassets/images/custom-header.png)
Footer:
![Login with custom footer](../docassets/images/custom-footer.png)
Also, any content that you put inside the `<adf-login>` tags will be rendered as part
of the Login dialog:
```html
<adf-login ...>
<div>
<div><!-- Custom content goes here --></div>
</div>
</adf-login>
```
This is useful if you need to extend the functionality of the dialog
with custom input fields handled by your application or parent component:
![Login with custom content](../docassets/images/login-extra-content.png)
## Class members
### Properties
@@ -88,43 +123,6 @@ export class AppComponent {
}
```
### Changing content
You can replace the content of the header and footer of the [Login component](../core/login.component.md) with
your own custom content, as shown in the examples below:
```html
<adf-login ...>
<login-footer><ng-template>My custom HTML for the footer</ng-template></login-footer>
</adf-login>`
```
![Login with custom footer](../docassets/images/custom-footer.png)
```html
<adf-login ...>
<login-header><ng-template>My custom HTML for the header</ng-template></login-header>
</adf-login>`
```
![Login with custom header](../docassets/images/custom-header.png)
Also, any content that you put inside the &lt;adf-login> tags will be rendered as part
of the Login dialog:
```html
<adf-login ...>
<div>
<div>Your extra content</div>
</div>
</adf-login>
```
This is useful if you need to extend the functionality of the dialog
with custom input fields handled by your application or parent component:
![Login with custom content](../docassets/images/login-extra-content.png)
### Custom logo and background
You can change the logo and background images using the `backgroundImageUrl` and