Placeholders

About

プレイスホルダーは、アプリケーションの体験を向上させるために使用できます。プレイスホルダーはHTMLとCSSだけで作られているので、JavaScriptは必要ありません。ただし、表示/非表示を切り替えるにはカスタムJavaScriptが必要です。外観、色、サイズはユーティリティクラスで簡単にカスタマイズできます。

Example

下の例では、典型的なカードコンポーネントにプレイスホルダーを適用して、「ローディングカード」を作成します。サイズと比率は両者で同じです。

Card title

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

Go somewhere

vue

<template>
 <Row gutter="4">
  <Col>
   <Card>
    <CardImgTop
     src="https://dummyimage.com/100x100/20c997/20c997"
     height="180"
    />
    <CardBody>
     <CardTitle>Card title</CardTitle>
     <CardText>
      Some quick example text to build on the card title and make up the
      bulk of the card's content.
     </CardText>
     <Anchor
      to="/"
      tabindex="-1"
      color="primary"
      col="6"
     >
      Go somewhere
     </Anchor>
    </CardBody>
   </Card>
  </Col>

  <Col>
   <Card>
    <CardImgTop
     src="https://dummyimage.com/100x100/868e96/868e96"
     height="180"
    />
    <CardBody>
     <CardTitle placeholder="glow">
      <b-span
       placeholder
       col="6"
      />
     </CardTitle>
     <CardText placeholder="glow">
      <b-span
       placeholder
       col="7"
      />
      <b-span
       placeholder
       col="4"
      />
      <b-span
       placeholder
       col="4"
      />
      <b-span
       placeholder
       col="6"
      />
      <b-span
       placeholder
       col="8"
      />
     </CardText>
     <Anchor
      to="/"
      tabindex="-1"
      color="primary"
      disabled
      placeholder
      col="6"
     />
    </CardBody>
   </Card>
  </Col>
 </Row>
</template>

How it works

placeholder属性とグリッドカラム属性（例：col="6"）でプレイスホルダーを作成し、widthを設定します。これらは、要素内のテキストを置き換えたり、既存のコンポーネントに就職クラスとして追加することができます。

button属性には、::beforeを介して追加のスタイルを適用し、heightが尊重されるようにしています。必要に応じてほかの状況用にこのパターンを拡張したり、実際のテキストがその場所にレンダリングされるときに高さを反映するために要素内に追加したりできます。

vue

<template>
 <b-p
  placeholder
  col="6"
 />
 <br />
 <Anchor
  to="/"
  tabindex="-1"
  button
  color="primary"
  disabled
  placeholder
  col="4"
 />
</template>

tip

aria-hidden="true"の使用は、要素がスクリーンリーダーに隠されるべきことを示すだけです。プレイスホルダーの読み込み動作は、作者が実際にどのようにプレイスホルダーのスタイルを使うか、どのように更新するかなどに依存します。プレイスホルダーの状態を入れ替え、ATユーザーに更新を知らせるために、JavaScriptのコードが必要になるかもしれません。

Width

グリッドのカラムクラス、widthユーティリティ、インラインスタイルでwidthを変更できます。

vue

<template>
 <b-span
  placeholder
  col="6"
 />
 <b-span
  placeholder
  relative-width="75"
 />
 <b-span
  placeholder
  style="width: 25%"
 />
</template>

Color

デフォルトでは、placeholderはcurrentColorを使用します。これは、カスタムカラーまたはユーティリティクラスでオーバーライドできます。

vue

<template>
 <b-span
  placeholder
  col="12"
 />
 <b-span
  placeholder
  col="12"
  background-color="primary"
 />
 <b-span
  placeholder
  col="12"
  background-color="secondary"
 />
 <b-span
  placeholder
  col="12"
  background-color="success"
 />
 <b-span
  placeholder
  col="12"
  background-color="danger"
 />
 <b-span
  placeholder
  col="12"
  background-color="warning"
 />
 <b-span
  placeholder
  col="12"
  background-color="info"
 />
 <b-span
  placeholder
  col="12"
  background-color="light"
 />
 <b-span
  placeholder
  col="12"
  background-color="dark"
 />
</template>

Animation

placeholder="glow"またはplaceholder="wave"でプレースホルダーをアニメーション化すると、何かがアクティブにロードされているという認識をよりよく伝えることができます。

vue

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

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

Bootstrap

Browse docs