占位符

使用加载占位符来指示您的组件或页面可能仍在加载。

关于

占位符可用于增强应用程序体验。它们仅使用 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" 仅表示应将元素隐藏在屏幕阅读器中。占位符的加载行为取决于作者实际使用占位符样式的方式，以及他们计划如何更新内容等。可能需要一些 JavaScript 代码来切换占位符的状态并通知 AT 用户更新。

宽度

您可以通过网格列类、宽度实用程序或内联样式更改 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

占位符

占位符按钮