feat(ui5-breadcrumbs): Initial implementation #3435
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #3166
Two implementations are available:
ui5-breadcrumbs with "current-location" property e.g.:
<ui5-breadcrumbs current-location="Laptop"> <ui5-link>Products</ui5-link> <ui5-link>Suppliers</ui5-link> <ui5-link>Titanium</ui5-link> </ui5-breadcrumbs>
Code: https://github.com/kineticjs/ui5-webcomponents/tree/breadcrumbs
ui5-breadcrumbs with links only e.g.:
<ui5-breadcrumbs> <ui5-link>Products</ui5-link> <ui5-link>Suppliers</ui5-link> <ui5-link>Titanium</ui5-link> <ui5-link>Current</ui5-link> </ui5-breadcrumbs>
Code: https://github.com/kineticjs/ui5-webcomponents/tree/breadcrumbs1
THIS PR IS FOR THE 2nd INPLEMENTATION (links only), because its API seemed to be preferred
However, both versions are proposed, esp. as the 1st seem better to me from performance perspective)
Note:
The 2nd implementation (links only) seemed to require some extra performance cost.
This is because the last slotted link is used to indicate the current location
=> the text of the last slotted link is rendered as ui5-label
=> I had to ensure we are notified for changes in the text of the last link
=> I had to additionally declare:
-- ui5-link declared to have managedSlots = true
-- ui5-breadcrumbs declared to invalidateOnChildChange: {
properties: false,
slots: true,
}
No such need detected for implementation 1 (with "current-location" property) as it only listens for resize of its content.
Feel free to propose improvements. I will complete the version (1 or 2) that we eventually choose.