#9 simple breadcrumb

- simple breadcrumb implementation (not bootstrap)
- readme updates
This commit is contained in:
Denys Vuika
2016-05-10 10:46:29 +01:00
parent e0b4eadedf
commit a6f25013ec
3 changed files with 39 additions and 2 deletions

View File

@@ -10,7 +10,6 @@ npm install --save <TBD>
```html
<alfresco-document-list
#list
[thumbnails]="thumbnails"
[breadcrumb]="breadcrumb"
[navigate]="navigation"
@@ -56,6 +55,20 @@ Note the use of ```DOCUMENT_LIST_DIRECTIVES``` barrel that consolidates all the
It gives you access to ```<document-actions>```, ```<folder-actions>``` and many other directives.
In addition ```DOCUMENT_LIST_PROVIDERS``` exports all primary services and providers needed for component to function.
### Breadcrumb
Document List provides simple breadcrumb element to indicate the current position within a navigation hierarchy.
It can be enabled via `thumbnails` attribute:
```html
<alfresco-document-list [thumbnails]="true">
</alfresco-document-list>
```
![Breadcrumb](docs/assets/breadcrumb.png)
Parent folder button is not displayed when breadcrumb is enabled.
### Custom columns
It is possible to reorder, extend or completely redefine data columns displayed by the component.

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

View File

@@ -30,4 +30,28 @@
cursor: pointer;
}
:host .breadcrumb { margin-bottom: 4px; }
/* breadcrumb */
:host .breadcrumb {
text-align: left;
padding: 8px 15px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
margin: 0 0 4px;
}
:host .breadcrumb > li {
display: inline-block;
box-sizing: border-box;
}
:host .breadcrumb > li+li:before {
content: "/\00a0";
padding: 0 0 0 5px;
color: #ccc;
}
:host .breadcrumb > .active {
color: #777;
}