mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
3b1842f038
* ADF-5505 Removed some angular flex usages * ADF-5505 Deprecated usage of angular flex layout in demo shell * ADF-5505 Deprecated usage of angular flex layout in core files * ADF-5505 Removed usage of angular flex layout from files from process services * ADF-5505 Removed usage of angular flex layout from files from process services cloud * ADF-5505 Removed usage of fxflex and fxlayout from left files * ADF-5505 Removed usage of fxhide from left files * ADF-5505 Fixed issue with incorrect colors * ADF-5505 Fixed some lint issues * ADF-5505 Removed imports of FlexLayoutModule * ADF-5505 Uninstalled angular flex layout dependency * ADF-5505 Removed usage of ngClass with gt-md * ADF-5505 Removed duplicated selector * ADF-5505 Removed empty line * ADF-5505 Changed encapsulation
88 lines
3.2 KiB
HTML
88 lines
3.2 KiB
HTML
<main>
|
|
<h1>Breadcrumb</h1>
|
|
<ul>
|
|
<li>Try creating and navigating long paths</li>
|
|
<li>Try resizing the browser width to ensure items are trimmed as expected</li>
|
|
</ul>
|
|
|
|
<h2>1. Standalone (fixed size)</h2>
|
|
<small>Component is used in the fixed-width layout</small>
|
|
|
|
<div class="app-breadcrumb-container-restricted">
|
|
<adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
|
|
</adf-breadcrumb>
|
|
</div>
|
|
|
|
<h2>2. Standalone (full width)</h2>
|
|
<small>Component fits the parent container width</small>
|
|
|
|
<div>
|
|
<adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
|
|
</adf-breadcrumb>
|
|
</div>
|
|
|
|
<h2>2.1 Standalone with Dropdown (full width)</h2>
|
|
<small>
|
|
Component fits the parent container width but is limited to 3 items to display at once.
|
|
It should automatically switch to the Dropdown mode if the path exceeds 3 nodes.
|
|
</small>
|
|
|
|
<div>
|
|
<adf-breadcrumb [maxItems]="3" root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
|
|
</adf-breadcrumb>
|
|
</div>
|
|
|
|
<h2>3. Toolbar (standalone)</h2>
|
|
<small>Component used as a child of the Toolbar component</small>
|
|
|
|
<adf-toolbar>
|
|
<adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
|
|
</adf-breadcrumb>
|
|
</adf-toolbar>
|
|
|
|
<h2>4. Toolbar (title)</h2>
|
|
<small>Component is wrapped into the Toolbar Title component</small>
|
|
|
|
<adf-toolbar>
|
|
<adf-toolbar-title>
|
|
<adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
|
|
</adf-breadcrumb>
|
|
</adf-toolbar-title>
|
|
</adf-toolbar>
|
|
|
|
<h2>5. Toolbar with separators and buttons</h2>
|
|
<small>
|
|
Component is wrapped into the Toolbar Title component.
|
|
The toolbar also has separators and buttons that might provide impact on breadcrumb layout.
|
|
Buttons do nothing and are present for layout purposes.
|
|
</small>
|
|
|
|
<adf-toolbar class="app-full-content-toolbar">
|
|
<adf-toolbar-title>
|
|
<adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
|
|
</adf-breadcrumb>
|
|
</adf-toolbar-title>
|
|
<adf-toolbar-divider></adf-toolbar-divider>
|
|
<button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.NEW_FOLDER_LABEL' | translate">
|
|
<mat-icon>create_new_folder</mat-icon>
|
|
</button>
|
|
<button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.EDIT_NODE_LABEL' | translate">
|
|
<mat-icon>create</mat-icon>
|
|
</button>
|
|
<button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.DELETE_NODE_LABEL' | translate">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</adf-toolbar>
|
|
|
|
<h2>6. Dropdown Breadcrumb</h2>
|
|
|
|
<adf-dropdown-breadcrumb class="app-files-breadcrumb"
|
|
[target]="documentList">
|
|
</adf-dropdown-breadcrumb>
|
|
|
|
<div class="app-content">
|
|
<adf-document-list #documentList currentFolderId="-my-">
|
|
</adf-document-list>
|
|
</div>
|
|
</main>
|