플레이스홀더

// Placeholders

컴포넌트나 페이지에 로딩 플레이스홀더를 사용하여 아직 로딩 중임을 나타냅니다.

소개

플레이스홀더는 애플리케이션 경험을 향상시키는 데에 사용할 수 있습니다. HTML과 CSS로만 만들어졌기 때문에 만드는 데에 JavaScript가 필요하지 않습니다. 그러나 가시성을 전환하려면 일부 사용자 정의 JavaScript가 필요합니다. 외관, 색상 및 크기는 유틸리티 클래스로 쉽게 사용자 정의할 수 있습니다.

예제

아래 예에서는 일반적인 카드 컴포넌트를 가져와 “로딩 카드"를 만들기 위해 적용된 자리 표시자를 사용하여 다시 만듭니다. 크기와 비율은 둘 사이에 동일합니다.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<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를 설정합니다. 요소 내부의 텍스트를 바꾸거나 기존 컴포넌트에 수정자 클래스로 추가할 수 있습니다.

::before를 통해 .btn에 추가 스타일을 적용하여 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>

aria-hidden="true"의 사용은 요소가 스크린 리더에 숨겨져야 함을 나타냅니다. 플레이스홀더의 로딩 동작은 작성자가 실제로 플레이스홀더 스타일을 사용하는 방법, 업데이트 계획 방법 등에 따라 다릅니다. 플레이스홀더의 상태를 교환하고 사용자에게 업데이트를 알리기 위해 일부 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>

크기

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

Sass

변수

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