alfresco-ng2-components/docs/core/empty-content.component.md
Denys Vuika 6e5d6ea3bb
[ADF-2930] general purpose "Empty Page" component (#3296)
* empty content component

* fix selector name

* style fixes

* cleanup code

* docs for empty content

* update docs

* update docs

* use typography for icon

* layout fixes for Login (ported from ACA)
2018-05-10 16:13:53 +01:00

55 lines
1.6 KiB
Markdown

---
Added: v2.4.0
Status: Active
Last reviewed:
---
# Empty Content Component
Provides a generic "Empty Content" UI and can used as a placeholder for components that need to show different content when being empty.
## Properties
| Name | Type | Description |
| --- | --- | --- |
| icon | string | Material Icon to use |
| title | string | String or Resource Key for the title |
| subtitle | string | String or Resource Key for the subtitle |
## Examples
```html
<adf-document-list>
<empty-folder-content>
<ng-template>
<adf-empty-content
icon="star_rate"
title="APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE"
subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
</adf-empty-folder>
</ng-template>
</empty-folder-content>
</adf-document-list>
```
![Favorites screen](../docassets/images/empty-content-favorites.png)
You can also use multiple lines instead of the subtitle section:
```html
<adf-document-list>
<empty-folder-content>
<ng-template>
<adf-empty-content
icon="delete"
title="APP.BROWSE.TRASHCAN.EMPTY_STATE.TITLE">
<p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
<p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
</adf-empty-content>
</ng-template>
</empty-folder-content>
</adf-document-list>
```
![Trashcan screen](../docassets/images/empty-content-trashcan.png)