diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md index dbf6133fb6..d64057d881 100644 --- a/ng2-components/ng2-alfresco-documentlist/README.md +++ b/ng2-components/ng2-alfresco-documentlist/README.md @@ -65,6 +65,19 @@ Note the use of ```DOCUMENT_LIST_DIRECTIVES``` barrel that consolidates all the It gives you access to ``````, `````` and many other directives. In addition ```DOCUMENT_LIST_PROVIDERS``` exports all primary services and providers needed for component to function. +### Custom columns + +```html + + + + + + +``` + +![Custom columns](docs/assets/custom-columns.png) + ### Custom folder icon Document list element exposes `folder-icon` property that accepts a CSS class list value with @@ -88,14 +101,27 @@ Document List supports declarative actions for Documents and Folders. Each action can be bound to either default out-of-box handler or a custom behavior. You can define both folder and document actions at the same time. -#### Document actions +#### Menu actions ```html - - - - + + + + + + + + + ``` @@ -109,7 +135,7 @@ export class MyView { } ``` -All document actions are rendered as a dropdown menu as on the picture below: +All document actions with `type="menu"` are rendered as a dropdown menu as on the picture below: ![Document Actions](docs/assets/document-actions.png) @@ -129,42 +155,75 @@ Initiates download of the corresponding document file. ```html - - - + + + + + + ``` ![Download document action](docs/assets/document-action-download.png) -#### Quick document actions +#### Document action buttons -It is also possible to display most frequent actions within a separate `` -buttons panel: +It is also possible to display most frequent actions within a separate buttons panel: ```html - - - - + + + + + + + + + ``` -Quick actions provide same support for system and custom handlers. -In addition it is possible setting button icon (css class list), text of the label or both. +Button actions provide same support for system and custom handlers. ![Quick document Actions](docs/assets/quick-document-actions.png) #### Folder actions +Folder actions have the same declaration as document actions except ```taget="folder"``` attribute value. + ```html - - - - + + + + + + + + + ``` @@ -180,48 +239,28 @@ export class MyView { ![Folder Actions](docs/assets/folder-actions.png) -#### Quick folder actions +#### Folder action buttons -Quick folder actions have the same behavior as quick document actions. -You can use custom or system handler, provide icon and title. Every folder action is rendered as a separate button. ```html - - - + + + + + + ``` ![Quick folder Actions](docs/assets/quick-folder-actions.png) -#### Using all actions at the same time - -```html - - - - - - - - - - - - - - - - -``` - ## Advanced usage and customization ### Customizing default actions @@ -237,9 +276,16 @@ Example below demonstrates how a new action handler can be registered with the ```html - - - + + + + + + ``` diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-columns.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-columns.png new file mode 100644 index 0000000000..10ef72c925 Binary files /dev/null and b/ng2-components/ng2-alfresco-documentlist/docs/assets/custom-columns.png differ