Extend icon tab bar to accept user defined HTML structure as the tab link template #11771
Assignees
Milestone
Comments
|
Hi @markywilson, |
|
Hi @khotcholava The FdTabs have the functionality of defining own template with routerLink (highlighting and selecting the tab based on <nav fd-tab-nav>
<div fd-tab-item>
<a fd-tab-link [active]="rla1.isActive" [routerLink]="'tab1'" routerLinkActive #rla1="routerLinkActive">
<span fd-tab-tag>Link 1</span>
</a>
</div>
<div fd-tab-item>
<a fd-tab-link [active]="rla2.isActive" [routerLink]="'tab2'" routerLinkActive #rla2="routerLinkActive">
<span fd-tab-tag>Link 2</span>
</a>
</div>
<div fd-tab-item>
<a fd-tab-link [active]="rla3.isActive" [routerLink]="'tab3'" routerLinkActive #rla3="routerLinkActive">
<span fd-tab-tag>Link 3</span>
</a>
</div>
</nav>However this functionality isn't available in icon tab bar. We mitigated that by adding extra code in the class <fd-dynamic-page>
<fdp-icon-tab-bar #tabs (iconTabSelected)="navigate($event)">
<fdp-icon-tab-bar-tab [active]="activeTab === 'tab1'" label="Link 1" id="tab1"></fdp-icon-tab-bar-tab>
<fdp-icon-tab-bar-tab [active]="activeTab === 'tab2'" label="Link 2" id="tab2"></fdp-icon-tab-bar-tab>
<ng-container fdpIconTabBarFreeContent>
<fd-dynamic-page-content>
<router-outlet></router-outlet>
</fd-dynamic-page-content>
</ng-container>
</fdp-icon-tab-bar>
</fd-dynamic-page>And in the class public activeTab: string;
constructor(
private activatedRoute: ActivatedRoute,
private router: Router
) {}
public ngOnInit(): void {
this.activeTab = this.router.url.split('/').pop();
}
public navigate(item: IconTabBarItem): void {
void this.router.navigate([item.id], {relativeTo: this.activatedRoute});
} |
|
@markywilson Could you please create a working example on StackBlitz? |
droshev
added a commit
that referenced
this issue
Sep 16, 2024
* fix(platform): fix fdp-table popover alignment closes [#11230](#11230) ## Description Ensure that the column header alignment is preserved when sorting columns in the fdp-table component. Previously, the header would jump to the start regardless of the initial alignment when sorting was activated. The header styles have been adjusted to maintain the specified alignment. Additionally, the popover used for sorting is now aligned according to the column alignment, rather than always defaulting to the left. * fix(platform): fix fdp-table popover alignment closes [#11230](#11230) ## Description - Resolved PR comments * fix(platform): fix fdp-table popover alignment closes [#11230](#11230) ## Description - Fixed e2e tests * feat(platform): Icon tab bar content closes:[#11771](#11771) ## Description - Fixed build --------- Co-authored-by: Mike O'Donnell <[email protected]> Co-authored-by: deno <[email protected]> Co-authored-by: Akaki <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Is this a bug, enhancement, or feature request?
Enhancement
Describe your proposal.
Extend icon tab bar to accept user defined HTML structure as the tab link template in order to support routerLink functionality like fd-tabs https://sap.github.io/fundamental-ngx/#/core/tabs
Can you handle that on the application side
Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)
If this is a bug, please provide steps for reproducing it; the exact components you are using;
Please provide relevant source code (if applicable).
Please provide stackblitz example(s).
In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.
Did you check the documentation and the API?
Did you search for similar issues?
Is there anything else we should know?
IMPORTANT: Please refrain from providing links or screenshots of SAP's internal information, as this project is open-source, and its contents are accessible to anyone.
The text was updated successfully, but these errors were encountered: