Maypi churanakuna

Componentesniykipaq icha p'anqaykikunapaq kargay tiyanakunata llamk'achiy imapas kargachkallanraq kanman chayta rikuchinaykipaq.

Kay p'anqapi

Sobre

Maypikuna ruwanaykipa experiencian allinchaypaq llamk'achiy atikun. HTML chaymanta CSS kaqlla ruwasqa kanku, niyta munan mana ima JavaScripttapas necesitankichu chayta ruwanaykipaq. Ichaqa, wakin ruwasqa JavaScript necesitanki rikuyninkuta tikranaykipaq. Rikchayninku, llimp’inkuna, sayaynin ima, utilidad claseykuwan mana sasachu ruwasqa kanman.

Qatina

Uraypi ejemplopi, huk componente típico tarjetata hap’iyku chaymanta wakmanta ruwayku huk “tarjeta carga” ruwanapaq churanakuna churasqawan. Hatun kayninpas, proporcionkunapas iskayninmi kaqlla.

Titulo de tarjeta

Wakin usqhayta ejemplo qillqa tarjetapa titulonpi ruwanapaq chaymanta tarjetapa contenidomanta aswan achkata ruwanapaq.

Maymanpas riy

<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>

Imayna llamkan

Yachaywan .placeholderchaymanta huk llika sapaq clasewan (kayhina, .col-6) tiyaqkunata ruway width. Chaykunaqa huk elemento ukhupi qillqasqata tikrayta atinku icha huk kachkaq componenteman huk tikraq clase hina yapasqa kanman.

Aplicamos estilo adicional a .btns via ::beforepara asegurar que el heightes respetado. Kay patrón huk situacionkunapaq mast'ariyta atikunki necesitasqanmanhina, utaq  elemento ukhupi huk yapayta atikunki sayayninta rikuchinanpaq mayk'aq chiqa qillqa maychus rantinpi ruwasqa.

html nisqapi

<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>

Chay llamk'achiyninqa aria-hidden="true"pantalla ñawiriqkunaman elemento pakasqa kanantalla rikuchin. Maypi kaqpa karga ruwayninqa imayna qillqaqkuna chiqamanta tiyana estilokuna llamk'achinqanku, imayna imakunata musuqchayta yuyaykunku, wakkuna wakin JavaScript codigo necesitakunman tiyana estadota t'inkinapaq chaymanta AT llamk'aqkunaman musuqyachiymanta willanapaq.

Kinray

widthA través de rejilla columna clasekuna, ancho yanapakuykuna utaq chiru ukhupi estilokuna tikrayta atikunki .

html nisqapi

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

Llinpi

Ñawpaqmanta, chay placeholderllamk'achiykuna currentColor. Kayqa huk sapanchasqa llimp'iwan utaq yanapakuy clasewan llallichisqa kanman.

html nisqapi

<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>

Tamaño

s nisqap sayayninqa .placeholdertayta elemento nisqap qillqap rikch'ayninpim kachkan. Chaykunata sayachiy tikraqkunawan ruway: .placeholder-lg, .placeholder-sm, utaq .placeholder-xs.

html nisqapi

<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

Imapas llamk'achisqa kargasqa .placeholder-glowkasqanmanta .placeholder-wavehamut'ayta aswan allinta willanapaq tiyanakunata kawsachiy .

html nisqapi

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

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

Sass

Variables nisqakuna

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