Designbest Core - Componenti riutilizzabili: differenze tra le versioni

Da Webmobili Wiki.
Creata pagina con "== Slider Base == Un semplice slider che si basa sullo scorrimento orizzontale di due pannelli innestati. * '''CSS''': Includere <code>"~/css/components/slider-base.min.css"</code> * '''JS''': Chiamare <code>designbest.sliderBase();</code> di <code>DesignbestCommon</code> <syntaxhighlight lang="html"> <script type="module" async="async"> import { Loader } from "/js/modules/Extensions.min.js"; import { designbest } from "/js/modules/DesignbestCommon.min.js";..."
 
Riga 24: Riga 24:
     <div>...</div> <!-- Elemento 3 -->
     <div>...</div> <!-- Elemento 3 -->
     <div>...</div> <!-- Elemento 4 -->
     <div>...</div> <!-- Elemento 4 -->
    <!-- Elemento N... -->
   </div>
   </div>
   <div class="slider-base-left-control">
   <div class="slider-base-left-control">
     &lt;
     &lt; <!-- Contenuto freccia sinistra -->
   </div>
   </div>
   <div class="slider-base-right-control">
   <div class="slider-base-right-control">
     &gt;
     &gt; <!-- Contenuto freccia destra-->
   </div>
   </div>
</div>
</div>
</syntaxhighlight>
</syntaxhighlight>

Versione delle 14:00, 30 ago 2024

Slider Base

Un semplice slider che si basa sullo scorrimento orizzontale di due pannelli innestati.

  • CSS: Includere "~/css/components/slider-base.min.css"
  • JS: Chiamare designbest.sliderBase(); di DesignbestCommon
  <script type="module" async="async">
    import { Loader } from "/js/modules/Extensions.min.js";
    import { designbest } from "/js/modules/DesignbestCommon.min.js";

    Loader.domReady(() => {
      designbest.sliderBase();
    });
  </script>

Tutti gli elementi con classe .slider-base verranno inizializzati con gli eventi sulle frecce (se presenti)

<div class="slider-base">
  <div class="slider-base-inner">
    <div>...</div> <!-- Elemento 1 -->
    <div>...</div> <!-- Elemento 2 -->
    <div>...</div> <!-- Elemento 3 -->
    <div>...</div> <!-- Elemento 4 -->
    <!-- Elemento N... -->
  </div>
  <div class="slider-base-left-control">
    &lt; <!-- Contenuto freccia sinistra -->
  </div>
  <div class="slider-base-right-control">
    &gt; <!-- Contenuto freccia destra-->
  </div>
</div>