"use strict";(self.webpackChunkreact_bootstrap_website=self.webpackChunkreact_bootstrap_website||[]).push([[3280],{38509:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>m,contentTitle:()=>p,default:()=>P,frontMatter:()=>h,metadata:()=>x,toc:()=>u});var t=o(85893),l=o(11151);const r='import Placeholder from \'react-bootstrap/Placeholder\';\n\nfunction AnimationExample() {\n  return (\n    <>\n      <Placeholder as="p" animation="glow">\n        <Placeholder xs={12} />\n      </Placeholder>\n      <Placeholder as="p" animation="wave">\n        <Placeholder xs={12} />\n      </Placeholder>\n    </>\n  );\n}\n\nexport default AnimationExample;\n',a='import Button from \'react-bootstrap/Button\';\nimport Card from \'react-bootstrap/Card\';\nimport Placeholder from \'react-bootstrap/Placeholder\';\n\nfunction CardExample() {\n  return (\n    <div className="d-flex justify-content-around">\n      <Card style={{ width: \'18rem\' }}>\n        <Card.Img variant="top" src="holder.js/100px180" />\n        <Card.Body>\n          <Card.Title>Card Title</Card.Title>\n          <Card.Text>\n            Some quick example text to build on the card title and make up the\n            bulk of the card\'s content.\n          </Card.Text>\n          <Button variant="primary">Go somewhere</Button>\n        </Card.Body>\n      </Card>\n\n      <Card style={{ width: \'18rem\' }}>\n        <Card.Img variant="top" src="holder.js/100px180" />\n        <Card.Body>\n          <Placeholder as={Card.Title} animation="glow">\n            <Placeholder xs={6} />\n          </Placeholder>\n          <Placeholder as={Card.Text} animation="glow">\n            <Placeholder xs={7} /> <Placeholder xs={4} /> <Placeholder xs={4} />{\' \'}\n            <Placeholder xs={6} /> <Placeholder xs={8} />\n          </Placeholder>\n          <Placeholder.Button variant="primary" xs={6} />\n        </Card.Body>\n      </Card>\n    </div>\n  );\n}\n\nexport default CardExample;\n',i='import Placeholder from \'react-bootstrap/Placeholder\';\n\nfunction ColorExample() {\n  return (\n    <>\n      <Placeholder xs={12} />\n\n      <Placeholder xs={12} bg="primary" />\n      <Placeholder xs={12} bg="secondary" />\n      <Placeholder xs={12} bg="success" />\n      <Placeholder xs={12} bg="danger" />\n      <Placeholder xs={12} bg="warning" />\n      <Placeholder xs={12} bg="info" />\n      <Placeholder xs={12} bg="light" />\n      <Placeholder xs={12} bg="dark" />\n    </>\n  );\n}\n\nexport default ColorExample;\n',d='import Placeholder from \'react-bootstrap/Placeholder\';\n\nfunction BasicExample() {\n  return (\n    <>\n      <p aria-hidden="true">\n        <Placeholder xs={6} />\n      </p>\n\n      <Placeholder.Button xs={4} aria-hidden="true" />\n    </>\n  );\n}\n\nexport default BasicExample;\n',s='import Placeholder from \'react-bootstrap/Placeholder\';\n\nfunction SizeExample() {\n  return (\n    <>\n      <Placeholder xs={12} size="lg" />\n      <Placeholder xs={12} />\n      <Placeholder xs={12} size="sm" />\n      <Placeholder xs={12} size="xs" />\n    </>\n  );\n}\n\nexport default SizeExample;\n',c="import Placeholder from 'react-bootstrap/Placeholder';\n\nfunction WidthExample() {\n  return (\n    <>\n      <Placeholder xs={6} />\n      <Placeholder className=\"w-75\" /> <Placeholder style={{ width: '25%' }} />\n    </>\n  );\n}\n\nexport default WidthExample;\n",h={title:"Placeholders",description:"Use loading placeholders for your components or pages to indicate something may still be loading."},p=void 0,x={id:"components/placeholder",title:"Placeholders",description:"Use loading placeholders for your components or pages to indicate something may still be loading.",source:"@site/docs/components/placeholder.mdx",sourceDirName:"components",slug:"/components/placeholder",permalink:"/docs/components/placeholder",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{title:"Placeholders",description:"Use loading placeholders for your components or pages to indicate something may still be loading."},sidebar:"sidebar",previous:{title:"Pagination",permalink:"/docs/components/pagination"},next:{title:"Progress bars",permalink:"/docs/components/progress"}},m={},u=[{value:"About",id:"about",level:2},{value:"Example",id:"example",level:2},{value:"How it works",id:"how-it-works",level:2},{value:"Width",id:"width",level:2},{value:"Color",id:"color",level:2},{value:"Sizing",id:"sizing",level:2},{value:"Animation",id:"animation",level:2},{value:"API",id:"api",level:2},{value:"Placeholder",id:"placeholder",level:3},{value:"PlaceholderButton",id:"placeholderbutton",level:3}];function g(e){const n={admonition:"admonition",code:"code",em:"em",h2:"h2",h3:"h3",p:"p",...(0,l.a)(),...e.components},{CodeBlock:o,PropsTable:h}=n;return o||j("CodeBlock",!0),h||j("PropsTable",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"about",children:"About"}),"\n",(0,t.jsx)(n.p,{children:"Placeholders can be used to enhance the experience of your application. They\u2019re\nbuilt only with HTML and CSS, meaning you don\u2019t need any JavaScript to create them.\nYou will, however, need some custom JavaScript to toggle their visibility. Their\nappearance, color, and sizing can be easily customized with our utility classes."}),"\n",(0,t.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,t.jsx)(n.p,{children:"In the example below, we take a typical card component and recreate it with placeholders\napplied to create a \u201cloading card\u201d. Size and proportions are the same between the two."}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:a}),"\n",(0,t.jsx)(n.h2,{id:"how-it-works",children:"How it works"}),"\n",(0,t.jsxs)(n.p,{children:["Create placeholders with the ",(0,t.jsx)(n.code,{children:"Placeholder"})," component and a grid column prop (e.g., ",(0,t.jsx)(n.code,{children:"xs={6}"}),")\nto set the ",(0,t.jsx)(n.code,{children:"width"}),". They can replace the text inside an element or be added to an existing\ncomponent via the ",(0,t.jsx)(n.code,{children:"as"})," prop."]}),"\n",(0,t.jsxs)(n.p,{children:["Additional styling is applied to ",(0,t.jsx)(n.code,{children:"PlaceholderButton"}),"s via ",(0,t.jsx)(n.code,{children:"::before"})," to ensure the ",(0,t.jsx)(n.code,{children:"height"}),"\nis respected. You may extend this pattern for other situations as needed, or add a ",(0,t.jsx)(n.code,{children:"&nbsp;"}),"\nwithin the element to reflect the height when actual text is rendered in its place."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:d}),"\n",(0,t.jsx)(n.admonition,{type:"info",children:(0,t.jsxs)(n.p,{children:["The use of ",(0,t.jsx)(n.code,{children:'aria-hidden="true"'})," only indicates that the element\nshould be hidden to screen readers. The ",(0,t.jsx)(n.em,{children:"loading"})," behaviour of the\nplaceholder depends on how authors will actually use the placeholder styles,\nhow they plan to update things, etc. Some JavaScript code may be needed to\n",(0,t.jsx)(n.em,{children:"swap"})," the state of the placeholder and inform AT users of the update."]})}),"\n",(0,t.jsx)(n.h2,{id:"width",children:"Width"}),"\n",(0,t.jsxs)(n.p,{children:["You can change the ",(0,t.jsx)(n.code,{children:"width"})," through grid column classes, width utilities, or inline styles."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:c}),"\n",(0,t.jsx)(n.h2,{id:"color",children:"Color"}),"\n",(0,t.jsxs)(n.p,{children:["By default, the ",(0,t.jsx)(n.code,{children:"Placeholder"})," uses ",(0,t.jsx)(n.code,{children:"currentColor"}),". This can be overridden with a custom color\nor utility class."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:i}),"\n",(0,t.jsx)(n.h2,{id:"sizing",children:"Sizing"}),"\n",(0,t.jsxs)(n.p,{children:["The size of ",(0,t.jsx)(n.code,{children:"Placeholder"}),"s are based on the typographic style of the parent element.\nCustomize them with sizing props: ",(0,t.jsx)(n.code,{children:"lg"}),", ",(0,t.jsx)(n.code,{children:"sm"}),", or ",(0,t.jsx)(n.code,{children:"xs"}),"."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:s}),"\n",(0,t.jsx)(n.h2,{id:"animation",children:"Animation"}),"\n",(0,t.jsxs)(n.p,{children:["Animate placeholders by setting the prop ",(0,t.jsx)(n.code,{children:"animation"})," to ",(0,t.jsx)(n.code,{children:"glow"})," or ",(0,t.jsx)(n.code,{children:"wave"})," to better\nconvey the perception of something being ",(0,t.jsx)(n.em,{children:"actively"})," loaded."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:r}),"\n",(0,t.jsx)(n.h2,{id:"api",children:"API"}),"\n",(0,t.jsx)(n.h3,{id:"placeholder",children:"Placeholder"}),"\n",(0,t.jsx)(h,{name:"Placeholder"}),"\n",(0,t.jsx)(n.h3,{id:"placeholderbutton",children:"PlaceholderButton"}),"\n",(0,t.jsx)(h,{name:"PlaceholderButton"})]})}function P(e={}){const{wrapper:n}={...(0,l.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(g,{...e})}):g(e)}function j(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},11151:(e,n,o)=>{o.d(n,{Z:()=>i,a:()=>a});var t=o(67294);const l={},r=t.createContext(l);function a(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:a(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]);