mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-06-30 18:15:11 +00:00
documentation and example (#2081)
This commit is contained in:
parent
f6c3fafe32
commit
ef518ea822
@ -19,3 +19,25 @@
|
||||
.adf-not-overlay-viewer {
|
||||
height:900px;
|
||||
}
|
||||
|
||||
adf-document-list >>> adf-datatable .alfresco-datatable__row--selected .image-table-cell {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
adf-document-list >>> adf-datatable .alfresco-datatable__row--selected .image-table-cell::before {
|
||||
content: "\E876"; /* "done" */
|
||||
font-family: "Material Icons";
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -16px;
|
||||
margin-left: -14px;
|
||||
border-radius: 100%;
|
||||
background: #00bcd4;
|
||||
}
|
||||
|
@ -40,7 +40,7 @@
|
||||
</md-menu>
|
||||
</adf-toolbar>
|
||||
</ng-container>
|
||||
<alfresco-document-list
|
||||
<adf-document-list
|
||||
#documentList
|
||||
[creationMenuActions]="!useCustomToolbar"
|
||||
[currentFolderId]="currentFolderId"
|
||||
@ -52,7 +52,12 @@
|
||||
(preview)="showFile($event)"
|
||||
(permissionError)="handlePermissionError($event)">
|
||||
<data-columns>
|
||||
<data-column key="$thumbnail" type="image" [sortable]="false"></data-column>
|
||||
<data-column
|
||||
key="$thumbnail"
|
||||
type="image"
|
||||
[sortable]="false"
|
||||
class="image-table-cell">
|
||||
</data-column>
|
||||
<data-column
|
||||
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
|
||||
key="name"
|
||||
@ -111,7 +116,7 @@
|
||||
handler="delete">
|
||||
</content-action>
|
||||
</content-actions>
|
||||
</alfresco-document-list>
|
||||
</adf-document-list>
|
||||
</alfresco-upload-drag-area>
|
||||
</div>
|
||||
|
||||
|
@ -201,6 +201,60 @@ It helps examining other valuable information you can have access to if needed:
|
||||
|
||||
**Important note**: for this particular scenario you must also trigger `changeDetector.detectChanges()` as in the example above.
|
||||
|
||||
## Custom icons for selected rows
|
||||
|
||||
You can use the "class" property of the "DataColumn" component to apply your custom css.
|
||||
|
||||
As an example, this feature can be used to change the look and feel of the icon for the selected rows.
|
||||
|
||||
Let's start by assigning an "image-table-cell" class to the thumbnail column:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<data-columns>
|
||||
|
||||
<data-column
|
||||
key="$thumbnail"
|
||||
type="image"
|
||||
[sortable]="false"
|
||||
class="image-table-cell">
|
||||
</data-column>
|
||||
|
||||
...
|
||||
</data-columns>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
Now your application can define custom styles to change the content of the column based on some other conditions, like selection state:
|
||||
|
||||
```css
|
||||
adf-document-list >>> adf-datatable .alfresco-datatable__row--selected .image-table-cell {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
adf-document-list >>> adf-datatable .alfresco-datatable__row--selected .image-table-cell::before {
|
||||
content: "\E876"; /* "done" */
|
||||
font-family: "Material Icons";
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -16px;
|
||||
margin-left: -14px;
|
||||
border-radius: 100%;
|
||||
background: #00bcd4;
|
||||
}
|
||||
```
|
||||
|
||||
Once your application starts you should see the following icon for each selected row:
|
||||
|
||||

|
||||
|
||||
## Calling DocumentList api directly
|
||||
|
||||
Typically you will be binding DocumentList properties to your application/component class properties:
|
||||
|
Binary file not shown.
After Width: | Height: | Size: 54 KiB |
Loading…
x
Reference in New Issue
Block a user