before – devfrontend.info

[Magento 2] Utilisation de before et after sur les containers dans les layout xml

13/10/2020 / admin

Le truc à retenir est que les attributs before et after applicables sur les balises container et block des layouts XML de Magento 2 ont BESOIN d’un contexte pour fonctionner. Exemple:

Pas bon:

L’attribut before ne fonctionnera PAS! Votre block cart.product.slider ne s’affichera pas ou s’affichera au mauvais endroit (ou au bon endroit sur un malentendu… jusqu’à la prochaine modification de layout que vous effectuerez).

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="checkout_cart_item_renderers"/>
    <body>
            <container name="cart.product.slider.container" htmlTag="div" htmlClass="page-bottom" before="page.bottom.container">
                <block class="Magento\Cms\Block\Block" name="cart.product.slider">
                    <arguments>
                        <argument name="block_id" xsi:type="string">cart-product-slider</argument>
                    </arguments>
                </block>
            </container>
    </body>
</page>

<?xml version="1.0"?>

<body>

<argument name="block_id" xsi:type="string">cart-product-slider</argument>

</arguments>

</block>

</container>

</body>

</page>

Bon:

L’attribut before fonctionnera!

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="checkout_cart_item_renderers"/>
    <body>
        <referenceContainer name="content">
            <container name="cart.product.slider.container" htmlTag="div" htmlClass="page-bottom" before="page.bottom.container">
                <block class="Magento\Cms\Block\Block" name="cart.product.slider">
                    <arguments>
                        <argument name="block_id" xsi:type="string">cart-product-slider</argument>
                    </arguments>
                </block>
            </container>
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<body>

<argument name="block_id" xsi:type="string">cart-product-slider</argument>

</arguments>

</block>

</container>

</referenceContainer>

</body>

</page>

Vous avez saisi la différence entre les deux samples de code ci-dessus?

La ligne <referenceContainer name="content"> précise un contexte, une parenté. Les containers cart.product.slider.container et page.bottom.container sont des enfants directs du container content.

[CSS][SASS] Un chemin à étapes complexe avec les pseudo classes Before, After et les sélecteurs Sibling

04/01/2016 / admin

L’idée ici est de mettre en place un chemin à étapes pour un tunnel d’achat sans avoir recours à JavaScript ou jQuery. La petite difficulté repose notamment dans le fait que la bordure qui se trouve sous chaque intitulé doit être affichée en 2 couleurs lorsqu’on veut signifier l’étape en cours.

Markup HTML:

<div class="process-steps">
  <ol>
    <li>
      <span class="label">Etape #1</span>
    </li>
    <li class="current">
      <span class="label">Etape #2</span>
    </li>
    <li>
      <span class="label">Etape #3</span>
    </li>
    <li>
      <span class="label">Etape #4</span>
    </li>
  </ol>
</div>

<ol>

<li>

Etape #1

</li>

Etape #2

</li>

<li>

Etape #3

</li>

<li>

Etape #4

</li>

</ol>

</div>

SASS:

.process-steps ol{
  display: table;
  table-layout: fixed;
  width: 100%;
  font-size: rem(18);
  text-transform: uppercase;
  li{
    position: relative;
    display: table-cell;
    text-align: center;
    &::before,
    &::after{
      position: absolute;
      z-index: 1;
      display: inline-block;
      content: "";
      width: 50%;
      height: 2px;
      bottom: 0;
      background-color: #000;
    }
    &::before{
      left: 0;
    }
    &::after{
      right: 0;
    }
    .label{
      display: block;
      padding-bottom: $grid-gutter-width / 2;
      color: $corporate-color-one;
      &::after{
        position: absolute;
        z-index: 2;
        left: calc(50% - 10px);
        bottom: -9px;
        display: inline-block;
        content: "";
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: $corporate-color-one;
      }
    }
    &.current{
      &::before{
        background-color: #000;
      }
      &::after{
        background-color: $site-font-color-light;
      }
      .label{
        color: $corporate-color-one;
        &::after{
          background-color: $corporate-color-one;
        }
      }
    }
    &.current ~ li{
      &::before,
      &::after{
        background-color: $site-font-color-light;
      }
      .label{
        color: $site-font-color-light;
        &::before,
        &::after{
          background-color: $site-font-color-light;
        }
      }
    }
  }
}

.process-steps ol{

display: table;

table-layout: fixed;

width: 100%;

font-size: rem(18);

text-transform: uppercase;

li{

position: relative;

display: table-cell;

text-align: center;

&::before,

&::after{

position: absolute;

z-index: 1;

display: inline-block;

content: "";

width: 50%;

height: 2px;

bottom: 0;

background-color: #000;

}

&::before{

left: 0;

}

&::after{

right: 0;

}

.label{

display: block;

padding-bottom: $grid-gutter-width / 2;

color: $corporate-color-one;

&::after{

position: absolute;

z-index: 2;

left: calc(50% - 10px);

bottom: -9px;

display: inline-block;

content: "";

width: 20px;

height: 20px;

border-radius: 50%;

background-color: $corporate-color-one;

}

&.current{

&::before{

background-color: #000;

}

&::after{

background-color: $site-font-color-light;

}

.label{

color: $corporate-color-one;

&::after{

background-color: $corporate-color-one;

}

&.current ~ li{

&::before,

&::after{

background-color: $site-font-color-light;

}

.label{

color: $site-font-color-light;

&::before,

&::after{

background-color: $site-font-color-light;

}

Autre déclinaison (responsive !)

Les mixins sont ceux de la grille Flexbox de Foundation 6.

<div class="steps">
<h1>Déclarer un arrêt de travail</h1>
<p>Les étapes suivantes vont vous guider pour déclarer un arrêt de travail sans omettre d'informations.</p>
<ol class="steps-list">
  <li class="steps-item">
    <a href="#">
      <span class="number">1</span>
      <br /><span class="label">Employeur</span>
    </a>
  </li>
  <li class="steps-item">
    <a href="#">
      <span class="number">2</span>
      <br /><span class="label">Assuré</span>
    </a>
  </li>
  <li class="steps-item is-current">
    <a href="#">
      <span class="number">3</span>
      <br /><span class="label">Arrêt de travail</span>
    </a>
  </li>
  <li class="steps-item">
    <a href="#">
      <span class="number">4</span>
      <br /><span class="label">Salaires</span>
    </a>
  </li>
  <li class="steps-item">
    <a href="#">
      <span class="number">5</span>
      <br /><span class="label">Documents d'instruction</span>
    </a>
  </li>
  <li class="steps-item">
    <a href="#">
      <span class="number">6</span>
      <br /><span class="label">Récapitulatif</span>
    </a>
  </li>
</ol>

<h1>Déclarer un arrêt de travail</h1>

Les étapes suivantes vont vous guider pour déclarer un arrêt de travail sans omettre d'informations.

1

Employeur

</a>

</li>

2

Assuré

</a>

</li>

3

Arrêt de travail

</a>

</li>

4

Salaires

</a>

</li>

5

Documents d'instruction

</a>

</li>

6

Récapitulatif

</a>

</li>

</ol>

//
// steps
$steps-item-width: 30px;

.steps {

  &-list {
    // reset
    margin: 0;
    padding: 0;
    list-style-type: none;

    position: relative;
  }

  &-item {
    position: relative;
    &::before,
    &::after {
      position: absolute;
      display: inline-block;
      content: "";
      background-color: tomato;           
    } 
    &::before {
      z-index: -2;
    }
    &::after {
      z-index: -3;      
    }
    &:last-child {
      &::before,
      &::after {
        display: none;
      }
    }
    .number {
      display: inline-block;
      width: $steps-item-width;
      height: $steps-item-width;
      line-height: $steps-item-width - 4;
      text-align: center;
      border-radius: 50%;
      border: 3px solid tomato;
      color: tomato;
      background: #fff;
    }
    &.is-current {
      &::after {
        background-color: black;
      }
    }
    &.is-current ~ li {
      &::before {
        display: none;
      }
      &::after {
        background-color: black;
      }
      .number {
        line-height: $steps-item-width;
        border: 1px solid black;
        color: black;
        &::after {
          background-color: black;
        }
      }
    }            
  }

  @include breakpoint(medium down) {
    &-list {
      @include flex-direction(
        $direction: column);
    }
    &-item {
      br {
        display: none;
      }
      &::before,
      &::after {
        left: ($steps-item-width/2) - 1;
        width: 3px;
      }
      &::before {
        height: $steps-item-width + 5;
      }
      &::after {
        height: 100%;        
      }
      .number {
        margin-bottom: $steps-item-width/2;
      }
    }
  }

  @include breakpoint(large) {
    &-list {
      @include flex-grid-row(
        $behavior: collapse,
        $columns: extend,
        $gutters: 0);
    }
    &-item {
      @include flex-grid-column(
        $gutters: 0);
      &::before,
      &::after {
        top: ($steps-item-width/2) - 1;
        height: 3px;
      }
      &::before  {
        width: $steps-item-width + 10;
        left: 0;
      }
      &::after {
        width: 100%;
        right: 0;
      }
      .number {
        position: absolute;
        z-index: -1;
        left: calc(50% - ($steps-item-width/3));
      }
      &.is-current {
        &::after {
          top: ($steps-item-width/2);
          height: 1px;
        }
      }
      &.is-current ~ li {
        &::after {
          top: ($steps-item-width/2);
          height: 1px;
        }
      }
    }
  }
}
// end: steps

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

// steps

$steps-item-width: 30px;

.steps {

&-list {

// reset

margin: 0;

padding: 0;

list-style-type: none;

position: relative;

}

&-item {

position: relative;

&::before,

&::after {

position: absolute;

display: inline-block;

content: "";

background-color: tomato;

}

&::before {

z-index: -2;

}

&::after {

z-index: -3;

}

&:last-child {

&::before,

&::after {

display: none;

}

.number {

display: inline-block;

width: $steps-item-width;

height: $steps-item-width;

line-height: $steps-item-width - 4;

text-align: center;

border-radius: 50%;

border: 3px solid tomato;

color: tomato;

background: #fff;

}

&.is-current {

&::after {

background-color: black;

}

&.is-current ~ li {

&::before {

display: none;

}

&::after {

background-color: black;

}

.number {

line-height: $steps-item-width;

border: 1px solid black;

color: black;

&::after {

background-color: black;

}

@include breakpoint(medium down) {

&-list {

@include flex-direction(

$direction: column);

}

&-item {

br {

display: none;

}

&::before,

&::after {

left: ($steps-item-width/2) - 1;

width: 3px;

}

&::before {

height: $steps-item-width + 5;

}

&::after {

height: 100%;

}

.number {

margin-bottom: $steps-item-width/2;

}

@include breakpoint(large) {

&-list {

@include flex-grid-row(

$behavior: collapse,

$columns: extend,

$gutters: 0);

}

&-item {

@include flex-grid-column(

$gutters: 0);

&::before,

&::after {

top: ($steps-item-width/2) - 1;

height: 3px;

}

&::before {

width: $steps-item-width + 10;

left: 0;

}

&::after {

width: 100%;

right: 0;

}

.number {

position: absolute;

z-index: -1;

left: calc(50% - ($steps-item-width/3));

}

&.is-current {

&::after {

top: ($steps-item-width/2);

height: 1px;

}

&.is-current ~ li {

&::after {

top: ($steps-item-width/2);

height: 1px;

}

// end: steps

[jQuery] Insérer du contenu devant, derrière et à l’intérieur des éléments avec before, after, prepend et append

07/05/2013 / admin

Pour insérer du contenu	Utiliser
Devant une div	.before()
Derrière une div	.after()
A l’intérieur d’une div, mais avant le contenu existant	.prepend()
A l’intérieur d’une div, mais après le contenu existant	.append()

Pour déplacer un bloc HTML existant complet (et non plus insérer du nouveau contenu) vers un autre emplacement dans le DOM, utiliser appendTo.

[jQuery][CSS] Menu horizontal : gérer l’apparition/disparition, au survol, de séparateurs à gauche et à droite d’un libellé

20/03/2013 / admin

Nouvelle version en full-CSS (sans jQuery) à l’aide des pseudo-classes before/after et des sélecteurs adjacents

Source : demo JSFiddle.

<ul>
<li><a href="">item </a></li>
<li><a href="">item </a></li>
<li><a href="">item </a></li>
<li><a href="">item </a></li>
</ul>

<ul>

</ul>

ul {
  display: table;
  width: 100%;
}
li{
  display: table-cell;
  position: relative;
}

a{
  display: block;
  text-align: center;
}

a:before{
  content:"";
  width: 1px;
  height: 25px;
  background: #000;
  display: inline-block;
  position: absolute;
  left: 0;
}

a:hover:before{
  width: 0;
}

li:hover + li > a:before{
  width: 0;
}

ul {

display: table;

width: 100%;

}

li{

display: table-cell;

position: relative;

}

display: block;

text-align: center;

}

a:before{

content:"";

width: 1px;

height: 25px;

background: #000;

display: inline-block;

position: absolute;

left: 0;

}

a:hover:before{

width: 0;

}

li:hover + li > a:before{

width: 0;

}

Ancienne version (avec jQuery)

Simulation : http://jsfiddle.net/frontenddeveloper/Db6AD/7/

jQuery(document).ready(function(){
	// Menu horizontal : gérer l'apparition/disparition du séparateur au survol de la souris
	// Remplacer '#principal-nav' par l'id ou la classe qui définit le menu
	jQuery('#principal-nav .level1 > li').hover(
		function(){
			jQuery(this).next('li').addClass('no-separator');
		},
		function(){
			jQuery('#principal-nav .level1 li').removeClass('no-separator');
		}
	);
	// Cas du current
	jQuery('#principal-nav .level1 .current, #principal-nav .level1 .inpath').closest('li').next('li').addClass('current-no-separator');
});

jQuery(document).ready(function(){

// Menu horizontal : gérer l'apparition/disparition du séparateur au survol de la souris

// Remplacer '#principal-nav' par l'id ou la classe qui définit le menu

jQuery('#principal-nav .level1 > li').hover(

function(){

jQuery(this).next('li').addClass('no-separator');

function(){

jQuery('#principal-nav .level1 li').removeClass('no-separator');

}

);

// Cas du current

jQuery('#principal-nav .level1 .current, #principal-nav .level1 .inpath').closest('li').next('li').addClass('current-no-separator');

});

Articles récents

Catégories

Archives

Méta

Étiquette : before

[Magento 2] Utilisation de before et after sur les containers dans les layout xml

Pas bon:

Bon:

Vous avez saisi la différence entre les deux samples de code ci-dessus?

[CSS][SASS] Un chemin à étapes complexe avec les pseudo classes Before, After et les sélecteurs Sibling

Autre déclinaison (responsive !)

[jQuery] Insérer du contenu devant, derrière et à l’intérieur des éléments avec before, after, prepend et append

[jQuery][CSS] Menu horizontal : gérer l’apparition/disparition, au survol, de séparateurs à gauche et à droite d’un libellé

Nouvelle version en full-CSS (sans jQuery) à l’aide des pseudo-classes before/after et des sélecteurs adjacents

Ancienne version (avec jQuery)