プレースホルダー

コンポーネントまたはページに読み込み中のプレースホルダーを使用して、読み込み中のことを示します。

概要

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

例

次の例では、一般的なカードコンポーネントを取り上げ、プレースホルダーを適用して「読み込み中のカード」を作成します。サイズと比率は、両方で同じです。

結果

読み込み中…

ライブエディター

import Button from 'react-bootstrap/Button'; import Card from 'react-bootstrap/Card'; import Placeholder from 'react-bootstrap/Placeholder'; function CardExample() { return ( <div className="d-flex justify-content-around"> <Card style={{ width: '18rem' }}> <Card.Img variant="top" src="holder.js/100px180" /> <Card.Body> <Card.Title>Card Title</Card.Title> <Card.Text> Some quick example text to build on the card title and make up the bulk of the card's content. </Card.Text> <Button variant="primary">Go somewhere</Button> </Card.Body> </Card> <Card style={{ width: '18rem' }}> <Card.Img variant="top" src="holder.js/100px180" /> <Card.Body> <Placeholder as={Card.Title} animation="glow"> <Placeholder xs={6} /> </Placeholder> <Placeholder as={Card.Text} animation="glow"> <Placeholder xs={7} /> <Placeholder xs={4} /> <Placeholder xs={4} />{' '} <Placeholder xs={6} /> <Placeholder xs={8} /> </Placeholder> <Placeholder.Button variant="primary" xs={6} /> </Card.Body> </Card> </div> ); } export default CardExample;

import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import Placeholder from 'react-bootstrap/Placeholder';

function CardExample() {
  return (
    <div className="d-flex justify-content-around">
      <Card style={{ width: '18rem' }}>
        <Card.Img variant="top" src="holder.js/100px180" />
        <Card.Body>
          <Card.Title>Card Title</Card.Title>
          <Card.Text>
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>

      <Card style={{ width: '18rem' }}>
        <Card.Img variant="top" src="holder.js/100px180" />
        <Card.Body>
          <Placeholder as={Card.Title} animation="glow">
            <Placeholder xs={6} />
          </Placeholder>
          <Placeholder as={Card.Text} animation="glow">
            <Placeholder xs={7} /> <Placeholder xs={4} /> <Placeholder xs={4} />{' '}
            <Placeholder xs={6} /> <Placeholder xs={8} />
          </Placeholder>
          <Placeholder.Button variant="primary" xs={6} />
        </Card.Body>
      </Card>
    </div>
  );
}

export default CardExample;

動作方法

Placeholderコンポーネントとグリッドカラムプロップ（例：xs={6}）を使用してプレースホルダーを作成し、widthを設定します。これらは、要素内のテキストを置き換えるか、asプロップを使用して既存のコンポーネントに追加できます。

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

結果

読み込み中…

ライブエディター

import Placeholder from 'react-bootstrap/Placeholder'; function BasicExample() { return ( <> <p aria-hidden="true"> <Placeholder xs={6} /> </p> <Placeholder.Button xs={4} aria-hidden="true" /> </> ); } export default BasicExample;

import Placeholder from 'react-bootstrap/Placeholder';

function BasicExample() {
  return (
    <>
      <p aria-hidden="true">
        <Placeholder xs={6} />
      </p>

      <Placeholder.Button xs={4} aria-hidden="true" />
    </>
  );
}

export default BasicExample;

情報

aria-hidden="true"の使用は、要素をスクリーンリーダーに非表示にする必要があることを示すだけです。プレースホルダーの読み込み動作は、作成者がプレースホルダーのスタイルを実際にどのように使用するか、どのように更新を計画するかなどに依存します。プレースホルダーの状態を交換し、ATユーザーに更新を知らせるには、JavaScriptコードが必要になる場合があります。

幅

グリッドカラムクラス、幅ユーティリティ、またはインラインスタイルを使用してwidthを変更できます。

結果

読み込み中…

ライブエディター

import Placeholder from 'react-bootstrap/Placeholder'; function WidthExample() { return ( <> <Placeholder xs={6} /> <Placeholder className="w-75" /> <Placeholder style={{ width: '25%' }} /> </> ); } export default WidthExample;

import Placeholder from 'react-bootstrap/Placeholder';

function WidthExample() {
  return (
    <>
      <Placeholder xs={6} />
      <Placeholder className="w-75" /> <Placeholder style={{ width: '25%' }} />
    </>
  );
}

export default WidthExample;

色

デフォルトでは、PlaceholderはcurrentColorを使用します。これは、カスタムカラーまたはユーティリティクラスで上書きできます。

結果

読み込み中…

ライブエディター

import Placeholder from 'react-bootstrap/Placeholder'; function ColorExample() { return ( <> <Placeholder xs={12} /> <Placeholder xs={12} bg="primary" /> <Placeholder xs={12} bg="secondary" /> <Placeholder xs={12} bg="success" /> <Placeholder xs={12} bg="danger" /> <Placeholder xs={12} bg="warning" /> <Placeholder xs={12} bg="info" /> <Placeholder xs={12} bg="light" /> <Placeholder xs={12} bg="dark" /> </> ); } export default ColorExample;

import Placeholder from 'react-bootstrap/Placeholder';

function ColorExample() {
  return (
    <>
      <Placeholder xs={12} />

      <Placeholder xs={12} bg="primary" />
      <Placeholder xs={12} bg="secondary" />
      <Placeholder xs={12} bg="success" />
      <Placeholder xs={12} bg="danger" />
      <Placeholder xs={12} bg="warning" />
      <Placeholder xs={12} bg="info" />
      <Placeholder xs={12} bg="light" />
      <Placeholder xs={12} bg="dark" />
    </>
  );
}

export default ColorExample;

サイズ

Placeholderのサイズは、親要素のタイポグラフィスタイルに基づいています。サイズプロップ（lg、sm、またはxs）を使用してカスタマイズします。

結果

読み込み中…

ライブエディター

import Placeholder from 'react-bootstrap/Placeholder'; function SizeExample() { return ( <> <Placeholder xs={12} size="lg" /> <Placeholder xs={12} /> <Placeholder xs={12} size="sm" /> <Placeholder xs={12} size="xs" /> </> ); } export default SizeExample;

import Placeholder from 'react-bootstrap/Placeholder';

function SizeExample() {
  return (
    <>
      <Placeholder xs={12} size="lg" />
      <Placeholder xs={12} />
      <Placeholder xs={12} size="sm" />
      <Placeholder xs={12} size="xs" />
    </>
  );
}

export default SizeExample;

アニメーション

プロップanimationをglowまたはwaveに設定することで、プレースホルダーをアニメーション化し、アクティブに読み込み中であることをより明確に示すことができます。

結果

読み込み中…

ライブエディター

import Placeholder from 'react-bootstrap/Placeholder'; function AnimationExample() { return ( <> <Placeholder as="p" animation="glow"> <Placeholder xs={12} /> </Placeholder> <Placeholder as="p" animation="wave"> <Placeholder xs={12} /> </Placeholder> </> ); } export default AnimationExample;

import Placeholder from 'react-bootstrap/Placeholder';

function AnimationExample() {
  return (
    <>
      <Placeholder as="p" animation="glow">
        <Placeholder xs={12} />
      </Placeholder>
      <Placeholder as="p" animation="wave">
        <Placeholder xs={12} />
      </Placeholder>
    </>
  );
}

export default AnimationExample;

API

Placeholder

PlaceholderButton