-
Notifications
You must be signed in to change notification settings - Fork 132
0.36.0 Breaking changes
N1XUS edited this page Jul 26, 2022
·
9 revisions
Breadcrumbs #8402
-
Breadcrumbs
component is now usesOverflow Layout
component to render items with responsive behaviour. User's markup hasn't been changed but rendered markup has changed:
Before:
<fd-breadcrumb _ngcontent-tpu-c938="" class="fd-breadcrumb">
<fd-menu>
</fd-menu>
<fd-breadcrumb-item _ngcontent-tpu-c938="" class="fd-breadcrumb__item" style="display: inline-block;">
<div style="display: inline;">
<a _ngcontent-tpu-c938="" fd-link="" routerlink="../../avatar" class="fd-link" href="#/core/avatar">
<span class="fd-link__content"> Breadcrumb Level <span _ngcontent-tpu-c938="" style="font-weight: bold;">1</span></span>
</a>
</div>
</fd-breadcrumb-item>
<fd-breadcrumb-item _ngcontent-tpu-c938="" class="fd-breadcrumb__item" style="display: inline-block;">
<div style="display: inline;">
<a _ngcontent-tpu-c938="" fd-link="" routerlink="../../alert" class="fd-link" href="#/core/alert">
<span class="fd-link__content">Breadcrumb Level 2</span>
</a>
</div>
</fd-breadcrumb-item>
<fd-breadcrumb-item _ngcontent-tpu-c938="" class="fd-breadcrumb__item" style="display: inline-block;">
<div style="display: inline;">
<a _ngcontent-tpu-c938="" fd-link="" routerlink="../../bar" class="fd-link" href="#/core/bar">
<span class="fd-link__content">Breadcrumb Level 3</span>
</a>
</div>
</fd-breadcrumb-item>
<fd-breadcrumb-item _ngcontent-tpu-c938="" class="fd-breadcrumb__item" style="display: inline-block;">
<div style="display: inline;"><span _ngcontent-tpu-c938="">Breadcrumb Level 4</span></div>
</fd-breadcrumb-item>
</fd-breadcrumb>
After:
<fd-breadcrumb _ngcontent-vsw-c915="" class="fd-breadcrumb">
<fd-overflow-layout showmoreposition="left" ng-reflect-show-more-position="left" ng-reflect-reverse-hidden-items="false" ng-reflect-enable-keyboard-navigation="false" class="fd-overflow-layout">
<div class="fd-overflow-layout__more ng-star-inserted" style="display: none;">
<fd-menu ng-reflect-close-on-escape-key="true" ng-reflect-focus-auto-capture="true" ng-reflect-placement="bottom-start" class="ng-star-inserted">
</fd-menu>
</div>
<div class="fd-overflow-layout__items-container">
<div class="fd-overflow-layout__items">
<div fdoverflowlayoutitemcontainer="" ng-reflect-soft-hidden="false" class="fd-overflow-layout__item ng-star-inserted fd-overflow-layout__item--first" ng-reflect-first="true" ng-reflect-last="false">
<div fdoverflowlayoutitem="" tabindex="-1" class="ng-star-inserted">
<fd-breadcrumb-item _ngcontent-vsw-c915="" class="fd-breadcrumb__item">
<a _ngcontent-vsw-c915="" fd-link="" routerlink="../../avatar" ng-reflect-router-link="../../avatar" class="fd-link" href="#/core/avatar">
</a>
</fd-breadcrumb-item>
</div>
</div>
<div fdoverflowlayoutitemcontainer="" ng-reflect-soft-hidden="false" class="fd-overflow-layout__item ng-star-inserted" ng-reflect-first="false" ng-reflect-last="false">
<div fdoverflowlayoutitem="" tabindex="-1" class="ng-star-inserted">
<fd-breadcrumb-item _ngcontent-vsw-c915="" class="fd-breadcrumb__item">
<a _ngcontent-vsw-c915="" fd-link="" routerlink="../../alert" ng-reflect-router-link="../../alert" class="fd-link" href="#/core/alert">
</a>
</fd-breadcrumb-item>
</div>
</div>
<div fdoverflowlayoutitemcontainer="" ng-reflect-soft-hidden="false" class="fd-overflow-layout__item ng-star-inserted" ng-reflect-first="false" ng-reflect-last="false">
<div fdoverflowlayoutitem="" tabindex="-1" class="ng-star-inserted">
<fd-breadcrumb-item _ngcontent-vsw-c915="" class="fd-breadcrumb__item">
<a _ngcontent-vsw-c915="" fd-link="" routerlink="../../bar" ng-reflect-router-link="../../bar" class="fd-link" href="#/core/bar">
</a>
</fd-breadcrumb-item>
</div>
</div>
<div fdoverflowlayoutitemcontainer="" ng-reflect-soft-hidden="false" class="fd-overflow-layout__item ng-star-inserted fd-overflow-layout__item--last" ng-reflect-first="false" ng-reflect-last="true">
<div fdoverflowlayoutitem="" tabindex="-1" class="ng-star-inserted">
<fd-breadcrumb-item _ngcontent-vsw-c915="" class="fd-breadcrumb__item"><span _ngcontent-vsw-c915="">Breadcrumb Level 4</span></fd-breadcrumb-item>
</div>
</div>
</div>
</div>
</fd-overflow-layout>
</fd-breadcrumb>