search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.5k stars 260 forks source link

[SF][Feature Request][Tab container]: Enable custom tab header render #7038

Closed ksblklu closed 1 year ago

ksblklu commented 1 year ago

Feature Request Description

Hi team

We have some pages that requires customize the header of the Tab component, but currently Tab have a fixed rendering layout(left icon & right text). Can we add a slot on Tab, to enable us render the Tab header in a different way? Look forward to your favourable reply!

Best Regards.

Proposed Solution

Enable customize Tab header rendering

Proposed Alternatives

No response

Additional Context

No response

Priority

Medium

Privacy Policy

georgimkv commented 1 year ago

Hi @ksblklu You can already do that by extending the Tab class and overriding the methods we use to render the stock tab presentations. The TabContainer will accept and render the custom tab implementation.

georgimkv commented 1 year ago

Actually this is for a custom rendering of the tab header. Can you clarify what design you need to achieve?

ksblklu commented 1 year ago

Hi @gmkv Here is the design of our customized tab container, you can access the demo page here

image

Best Regards

georgimkv commented 1 year ago

It's not clear what you want to achieve. The demo page already shows you are overriding the Tab component and using your own tab. What do you expect from the common ui5-tab?

olannyv commented 1 year ago

@ksblklu : seems you're internal SAP colleague. Please contact me @ internal Teams to discuss the process of design changes for the Tab Bar common component

D. Vladinov

TeodorTaushanov commented 1 year ago

Hi @ksblklu,

As every other UI5 Web Component, ui5-tabcontainer implements the SAP Fiori design and follow the SAP Fiori Design Guidelines for a consistent UX.

As you can check in the design guidelines for the ui5-tabcontainer (sap.m.IconTabBar is the name of this control in OpenUI5) https://experience.sap.com/fiori-design-web/icontabbar/, when you want to display icon, text and count, the text and the count are placed in the right side of the icon.

Placing the text below the tab icon is a part of very old Fiori design: https://ui5.sap.com/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabBar which should be no longer used.

Placing a number as an icon was never a part of the SAP Fiori Design system.

In your case, I'm not sure if you can adopt the SAP Fiori Design Guidelines of the ui5-tabcontainer in your application. But if you can, this will lead to consistent Fiori UX, which is one of the main goals of UI5 Web Components.

Best, Teo