manja_ui_dev/dist/assets/Placeholders-BDATl2HW.js

import{$t as e,Bt as t,It as n,Lt as r,Qt as i,Vt as a,Xt as o,Zt as s,qt as c,rn as l}from"./index-qNrWYJXL.js";import{t as u}from"./vue-CKP9jW_Y.js";var d={class:`d-flex justify-content-around`},f={"aria-hidden":`true`},p={__name:`Placeholders`,setup(p){return(p,m)=>{let h=o(`DocsComponents`),g=o(`CCardHeader`),_=o(`CCardImage`),v=o(`CCardTitle`),y=o(`CCardText`),b=o(`CButton`),x=o(`CCardBody`),S=o(`CCard`),C=o(`CPlaceholder`),w=o(`DocsExample`),T=o(`CCol`),E=o(`CRow`),D=s(`c-placeholder`);return c(),r(E,null,{default:i(()=>[a(T,{xs:12},{default:i(()=>[a(h,{href:`components/placeholder.html`}),a(S,{class:`mb-4`},{default:i(()=>[a(g,null,{default:i(()=>[...m[0]||=[n(`strong`,null,`Vue Placeholder`,-1)]]),_:1}),a(x,null,{default:i(()=>[m[5]||=n(`p`,{class:`text-body-secondary small`},` In the example below, we take a typical card component and recreate it with placeholders applied to create a "loading card". Size and proportions are the same between the two. `,-1),a(w,{href:`components/placeholder.html`},{default:i(()=>[n(`div`,d,[a(S,{style:{width:`18rem`}},{default:i(()=>[a(_,{orientation:`top`,src:l(u)},null,8,[`src`]),a(x,null,{default:i(()=>[a(v,null,{default:i(()=>[...m[1]||=[t(`Card title`,-1)]]),_:1}),a(y,null,{default:i(()=>[...m[2]||=[t(` Some quick example text to build on the card title and make up the bulk of the card's content. `,-1)]]),_:1}),a(b,{color:`primary`,href:`#`},{default:i(()=>[...m[3]||=[t(`Go somewhere`,-1)]]),_:1})]),_:1})]),_:1}),a(S,{style:{width:`18rem`}},{default:i(()=>[a(_,{as:`svg`,orientation:`top`,width:`100%`,height:`162`,role:`img`,"aria-label":`Placeholder`,preserveAspectRatio:`xMidYMid slice`,focusable:`false`},{default:i(()=>[...m[4]||=[n(`title`,null,`Placeholder`,-1),n(`rect`,{width:`100%`,height:`100%`,fill:`#868e96`},null,-1)]]),_:1}),a(x,null,{default:i(()=>[e((c(),r(v,null,{default:i(()=>[a(C,{xs:6})]),_:1})),[[D,{animation:`glow`,xs:7}]]),e((c(),r(y,null,{default:i(()=>[a(C,{xs:7}),a(C,{xs:4}),a(C,{xs:4}),a(C,{xs:6}),a(C,{xs:8})]),_:1})),[[D,{animation:`glow`}]]),e(a(b,{color:`primary`,"aria-hidden":`true`,disabled:``,href:`#`,tabindex:`-1`},null,512),[[D,{xs:6}]])]),_:1})]),_:1})])]),_:1})]),_:1})]),_:1}),a(S,{class:`mb-4`},{default:i(()=>[a(g,null,{default:i(()=>[...m[6]||=[n(`strong`,null,`Vue Placeholder`,-1)]]),_:1}),a(x,null,{default:i(()=>[m[7]||=n(`p`,null,[t(` Create placeholders with the `),n(`code`,null,`<CPlaceholder>`),t(` component and a grid column propx (e.g., `),n(`code`,null,`:xs="6"`),t(`) to set the `),n(`code`,null,`width`),t(`. They can replace the text inside an element or be added as a modifier class to an existing component. `)],-1),a(w,{href:`components/placeholder.html`},{default:i(()=>[n(`p`,f,[a(C,{xs:6})]),e(a(b,{color:`primary`,"aria-hidden":`true`,disabled:``,href:`#`,tabindex:`-1`},null,512),[[D,{xs:4}]])]),_:1})]),_:1})]),_:1}),a(S,{class:`mb-4`},{default:i(()=>[a(g,null,{default:i(()=>[...m[8]||=[n(`strong`,null,`Vue Placeholder`,-1),t(),n(`small`,null,` Width`,-1)]]),_:1}),a(x,null,{default:i(()=>[m[9]||=n(`p`,null,[t(` You can change the `),n(`code`,null,`width`),t(` through grid column classes, width utilities, or inline styles. `)],-1),a(w,{href:`components/placeholder.html#width`},{default:i(()=>[a(C,{xs:6}),a(C,{class:`w-75`}),a(C,{style:{width:`30%`}})]),_:1})]),_:1})]),_:1}),a(S,{class:`mb-4`},{default:i(()=>[a(g,null,{default:i(()=>[...m[10]||=[n(`strong`,null,`Vue Placeholder`,-1),t(),n(`small`,null,` Color`,-1)]]),_:1}),a(x,null,{default:i(()=>[m[11]||=n(`p`,null,[t(` By default, the `),n(`code`,null,`<CPlaceholder>`),t(` uses `),n(`code`,null,`currentColor`),t(`. This can be overridden with a custom color or utility class. `)],-1),a(w,{href:`components/placeholder.html#color`},{default:i(()=>[a(C,{xs:12}),a(C,{color:`primary`,xs:12}),a(C,{color:`secondary`,xs:12}),a(C,{color:`success`,xs:12}),a(C,{color:`danger`,xs:12}),a(C,{color:`warning`,xs:12}),a(C,{color:`info`,xs:12}),a(C,{color:`light`,xs:12}),a(C,{color:`dark`,xs:12})]),_:1})]),_:1})]),_:1}),a(S,{class:`mb-4`},{default:i(()=>[a(g,null,{default:i(()=>[...m[12]||=[n(`strong`,null,`Vue Placeholder`,-1),t(),n(`small`,null,` Sizing`,-1)]]),_:1}),a(x,null,{default:i(()=>[m[13]||=n(`p`,null,[t(` The size of `),n(`code`,null,`<CPlaceholder>`),t(`s are based on the typographic style of the parent element. Customize them with `),n(`code`,null,`size`),t(` prop: `),n(`code`,null,`lg`),t(`, `),n(`code`,null,`sm`),t(`, or `),n(`code`,null,`xs`),t(`. `)],-1),a(w,{href:`components/placeholder.html#color`},{default:i(()=>[a(C,{xs:12,size:`lg`}),a(C,{xs:12}),a(C,{xs:12,size:`sm`}),a(C,{xs:12,size:`xs`})]),_:1})]),_:1})]),_:1}),a(S,{class:`mb-4`},{default:i(()=>[a(g,null,{default:i(()=>[...m[14]||=[n(`strong`,null,`Vue Placeholder`,-1),t(),n(`small`,null,` Animation`,-1)]]),_:1}),a(x,null,{default:i(()=>[m[15]||=n(`p`,null,[t(` Animate placeholders with `),n(`code`,null,`animation="glow"`),t(` or `),n(`code`,null,`animation="wave"`),t(` to better convey the perception of something being `),n(`em`,null,`actively`),t(` loaded. `)],-1),a(w,{href:`components/placeholder.html#animation`},{default:i(()=>[a(C,{as:`p`,animation:`glow`},{default:i(()=>[a(C,{xs:12})]),_:1}),a(C,{as:`p`,animation:`wave`},{default:i(()=>[a(C,{xs:12})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})}}};export{p as default};