Testé fonctionnel Magento 2.4. Source: Extending Magento 2 default JS components. Version PDF – inchoo.net-Extending Magento 2 default JS components.
Etendre le composant UI Tabs pour ajouter un effet de bordure animée sous les onglets:
app/design/frontend/MyVendor/mytheme/web/js/tabs-custom.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
define([ 'jquery', 'jquery-ui-modules/widget', 'jquery-ui-modules/core', 'mage/mage', 'mage/collapsible'], function($){ $.widget('custom.tabs', $.mage.tabs, { options: { indicator: false }, _create: function () { // IF NO options ARE POSSIBLE: // if ( $(".items.has-indicator").length > 0 ){ // this._addIndicator(); // } if (this.options.indicator) { this._addIndicator(); } }, _addIndicator: function () { var $menu = $(".items.has-indicator"), indicator = $('<span class="indicator"></span>'); $menu.append(indicator); position_indicator($menu.find("li.current")); setTimeout(function(){indicator.css("opacity", 1);}, 500); $menu.find("li").mouseenter(function(){ position_indicator($(this)); }); $menu.find("li").mouseleave(function(){ position_indicator($menu.find("li.current")); }); $(window).on('resize', function(){ position_indicator($menu.find("li.current")); }); function position_indicator(ele){ var left = ele.position().left, width = ele.outerWidth(), top = ele.position().top, height = ele.outerHeight(); if(window.matchMedia("(max-width:890px)").matches){ indicator.stop().animate({ top: top, height: height, width: 3, left: 0 }); } else{ indicator.stop().animate({ left: left, width: width, height: 3, top: "100%" }); } } } }); return $.custom.tabs; }); |
app/design/frontend/MyVendor/mytheme/requirejs-config.js
|
1 2 3 4 5 6 7 |
var config = { map: { '*' : { 'tabs': 'js/tabs-custom' } } }; |
app/design/frontend/MyVendor/mytheme/Magento_Theme/templates/html/sections.phtml
|
1 2 |
<div class="section-items <?= $block->escapeHtmlAttr($groupCss) ?>-items" data-mage-init='{"tabs":{"openedState":"active","indicator":"true"}}'> |
app/design/frontend/MyVendor/mytheme/web/css/source/tabs.less
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
@tab-item-height: 50px; @tab-item-border-width: 3px; .items:not(.nav) { border-bottom: none 0; display: flex; .nav.item { margin: 0; display: flex; > a, &.current > strong { padding: 0 @tab-item-height / 2.25; position: relative; display: flex; align-items: center; } &.current > strong { font-weight: 500; &:hover { color: @red; } } } &.has-indicator { position: relative; .indicator{ left: 0; height: 3px; position: absolute; bottom: 0; width: 0; opacity: 0; background: @red; overflow: visible !important; &:before{ content:""; position: absolute; bottom: 0; background-color: @red; } } } } // // Mobile // _____________________________________________ .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { .items:not(.nav) { flex-direction: column; background: linear-gradient(90deg, @greyLight 0%, @greyLight @tab-item-border-width, transparent @tab-item-border-width, transparent 100%); .nav.item { height: @tab-item-height; } &.has-indicator { .indicator { &:before{ width: 13px; height: 2px; left: 0; top: 50%; transform: translateY(-50%) translateX(0); } } } } } // // Desktop // _____________________________________________ .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .items:not(.nav) { flex-direction: row; background: linear-gradient(180deg, transparent 0%, transparent @tab-item-height, @greyLight @tab-item-height, @greyLight 100%); .nav.item { // total height: @tab-item-height + @tab-item-border-width; height: @tab-item-height + @tab-item-border-width; } &.has-indicator { .indicator { transform: translateY(-3px); &:before{ width: 2px; height: 13px; left: 50%; transform: translateX(-50%); } } } } } |
app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_info_links.xml et app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_guest_info_links.xml
|
1 2 3 4 5 6 |
<body> <referenceContainer name="content"> <block class="Magento\Framework\View\Element\Html\Links" as="links" name="sales.order.info.links" before="-"> <arguments> <argument name="css_class" xsi:type="string">items order-links has-indicator</argument> </arguments> |