Umi tenda rehegua

Eipuru ekargávo tenda’i nde componente térã página-kuérape g̃uarã ehechauka hag̃ua peteĩ mba’e ikatuha gueteri ojekarga.

Ko páhinape

Upéva rehegua

Umi tenda’i ikatu ojepuru oñembotuichave hag̃ua ne purupyrã jeikove. Oñemopu’ã HTML ha CSS rupive añoite, he’iséva natekotevẽiha mba’eveichagua JavaScript emoheñói hag̃ua. Ha katu, reikotevẽta peteĩ JavaScript jeporupyre emoambue hag̃ua ijehecharã. Ijehecha, ikolor ha tamaño ikatu ojejapo fácilmente personalización ore clase utilidad rehegua ndive.

Tembiecharã

Pe techapyrã iguýpe, jagueraha peteĩ componente típico tarjeta rehegua ha jajapo jey umi tenda’i oñemboguapýva reheve jajapo hag̃ua peteĩ “tarjeta de carga”. Tuicha ha proporción ojoguaite mokõivéva apytépe.

Tarjeta título rehegua

Oĩ texto techapyrã pya’e oñemopu’ã haĝua pe tarjeta título rehe ha ojapo haĝua pe gran parte pe tarjeta contenido-gui.

Tereho peteĩ hendápe

<div class="card">
  <img src="..." class="card-img-top" alt="...">

  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

Mba’éichapa omba’apo

Ejapo tenda’i .placeholdermbo’esyry ha peteĩ mbo’esyry vore cuadrícula rehegua ndive (techapyrã, .col-6) emohenda hag̃ua width. Ikatu omyengovia jehaipyre peteĩ elemento ryepýpe térã oñembojoapy clase modificador ramo peteĩ componente oĩmavape.

Roaplika estilo adicional .btns vía ::before-pe roasegura haguã pe heightoñemomba'eguasúva. Ikatu embohape ko patrón ambue situación-pe g̃uarã oñeikotevẽháicha, térã emoĩ peteĩ  elemento ryepýpe ohechauka hag̃ua yvatekuépe oñembohasa jave jehaipyre añetegua hendaguépe.

html rehegua

<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>

Pe jepuru aria-hidden="true"ohechauka añoite pe elemento oñeñomivaꞌerãha umi omoñeꞌeva pantalla-pe g̃uarã. Pe tenda’i jeguerahauka reko odepende mba’éichapa umi haihára oipurúta añetehápe umi tenda’i estilo, mba’éichapa oplanea ombopyahu hag̃ua umi mba’e, ha mba’e Ikatu oñeikotevẽ peteĩ código JavaScript oñembohasa hag̃ua tenda’i reko ha oikuaauka hag̃ua AT puruhárape ñembopyahu.

Ipekue

Ikatu emoambue umi widthclase columna cuadrícula rupive, utilidad ancho rehegua térã estilo inline rehegua.

html rehegua

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

Sa'y

Por defecto, umi placeholderoipuru currentColor. Kóva ikatu oñemboyke peteĩ color personalizado térã clase utilidad reheve.

html rehegua

<span class="placeholder col-12"></span>

<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>

Dimensionamiento rehegua

Pe .placeholders tuichakue oñemopyenda estilo tipográfico elemento túva rehegua rehe. Emohenda umíva umi modificador de tamaño reheve: .placeholder-lg, .placeholder-sm, térã .placeholder-xs.

html rehegua

<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>

Animación rehegua

Emoingove umi tenda’i oguerekóva .placeholder-glowtérã .placeholder-waveembohasa porãve hag̃ua mba’ekuaarã ojekargáva activamente .

html rehegua

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

Sass rehegua

Variables rehegua

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;