Տեղապահներ
Օգտագործեք բեռնման տեղապահեր ձեր բաղադրիչների կամ էջերի համար՝ ցույց տալու համար, որ ինչ-որ բան դեռ բեռնվում է:
Մասին
Տեղապահները կարող են օգտագործվել ձեր հավելվածի փորձը բարելավելու համար: Դրանք կառուցված են միայն HTML-ով և CSS-ով, այսինքն՝ դրանք ստեղծելու համար JavaScript-ի կարիք չունեք: Այնուամենայնիվ, ձեզ հարկավոր կլինի հատուկ JavaScript՝ դրանց տեսանելիությունը փոխելու համար: Նրանց տեսքը, գույնը և չափերը կարող են հեշտությամբ հարմարեցվել մեր կոմունալ ծառայությունների դասերի հետ:
Օրինակ
Ստորև բերված օրինակում մենք վերցնում ենք տիպիկ քարտի բաղադրիչ և վերստեղծում այն տեղապահներով, որոնք կիրառվում են «բեռնման քարտ» ստեղծելու համար: Չափը և համամասնությունները նույնն են երկուսի միջև:
Քարտի անվանումը
Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:
Գնացեք ինչ-որ տեղ<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>
Ինչպես է դա աշխատում
Ստեղծեք տեղապահեր .placeholder
դասի և ցանցի սյունակ դասի հետ (օրինակ՝ .col-6
)՝ սահմանելու համար width
: Նրանք կարող են փոխարինել տեքստը տարրի ներսում կամ որպես փոփոխող դաս ավելացնել գոյություն ունեցող բաղադրիչին:
Մենք կիրառում ենք լրացուցիչ ոճավորում .btn
s-ի միջոցով ::before
՝ ապահովելու համար, որ height
այն հարգվի: Դուք կարող եք ընդլայնել այս օրինաչափությունը այլ իրավիճակների համար, ըստ անհրաժեշտության, կամ ավելացնել
տարրի ներսում բարձրությունը արտացոլելու համար, երբ իրական տեքստը արտատվում է իր տեղում:
<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>
aria-hidden="true"
միայն ցույց է տալիս, որ տարրը պետք է թաքցվի էկրանի ընթերցողների համար: Տեղապահի
բեռնման վարքագիծը կախված է նրանից, թե ինչպես են հեղինակները իրականում օգտագործել տեղապահի ոճերը, ինչպես են նրանք նախատեսում թարմացնել իրերը և այլն: Որոշ JavaScript կոդ կարող է անհրաժեշտ լինել
տեղապահի վիճակը փոխելու և AT օգտատերերին թարմացման մասին տեղեկացնելու համար:
Լայնություն
Դուք կարող եք փոխել width
միջոցով ցանցի սյունակների դասերը, լայնության կոմունալները կամ ներդիր ոճերը:
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Գույն
Լռելյայն, placeholder
օգտագործում է currentColor
. Սա կարող է վերացվել հատուկ գույնի կամ օգտակար դասի միջոցով:
<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>
Չափսերը
s-ի չափերը .placeholder
հիմնված են մայր տարրի տպագրական ոճի վրա: Անհատականացրեք դրանք չափերի փոփոխիչներով՝ .placeholder-lg
, .placeholder-sm
, կամ .placeholder-xs
:
<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>
Անիմացիա
Ակտիվորեն բեռնված ինչ-որ բանի ընկալումը աշխուժացրեք կամ ավելի լավ փոխանցելու համար .placeholder-glow
:.placeholder-wave
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Սաս
Փոփոխականներ
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;