자리 표시자

구성 요소 또는 페이지에 로드 자리 표시자를 사용하여 아직 로드 중일 수 있음을 나타냅니다.

이 페이지에서

에 대한

자리 표시자는 응용 프로그램 경험을 향상시키는 데 사용할 수 있습니다. 그것들은 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 via 에 추가 스타일을 적용하여 존중 ::before되는지 확인합니다 . height필요에 따라 다른 상황에 대해 이 패턴을 확장하거나  실제 텍스트가 그 자리에 렌더링될 때 높이를 반영하도록 요소 내에 추가할 수 있습니다.

HTML

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

only를 사용 aria-hidden="true"하면 요소를 화면 판독기에서 숨겨야 함을 나타냅니다. 자리 표시 자의 로딩 동작은 작성자가 실제로 자리 표시자 스타일을 사용하는 방법, 업데이트 계획 방법 등에 따라 다릅니다. 자리 표시자의 상태를 바꾸고 AT 사용자에게 업데이트를 알리기 위해 일부 JavaScript 코드가 필요할 수 있습니다 .

너비

width그리드 열 클래스, 너비 유틸리티 또는 인라인 스타일을 통해 변경할 수 있습니다 .

HTML

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

색깔

기본적으로 를 placeholder사용합니다 currentColor. 이것은 사용자 정의 색상 또는 유틸리티 클래스로 재정의할 수 있습니다.

HTML

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

HTML

<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

HTML

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