Skeleton
Skeleton
Component demo
Interactive example
<ic-skeletonvariant="circle"></ic-skeleton><ic-typographyvariant="caption"><ic-skeletonvariant="text"></ic-skeleton></ic-typography><ic-skeleton></ic-skeleton>
<IcSkeletonvariant="circle"/><IcTypographyvariant="caption"><IcSkeletonvariant="text"/></IcTypography><IcSkeleton/>
Skeleton details
Props
All components also accept native properties supported by the DOM, such asclassName
and
style
.
|
|
|
---|---|---|
|
The appearance of the skeleton. |
|
|
|
|
|
The variant of the skeleton that will be displayed. |
|
The appearance of the skeleton. |
|
The variant of the skeleton that will be displayed. |
Variants
Inherited size from child
Interactive example
<ic-skeleton><divstyle="height:200px;width:450px;">Test text</div></ic-skeleton>
<IcSkeleton><divstyle={{height:"200px",width:"450px"}}>Test text</div></IcSkeleton>
Set width and height
Interactive example
<ic-typographyvariant="h4">Height and width set with styles</ic-typography><ic-skeletonstyle="height:200px;width:200px;"></ic-skeleton><ic-typographyvariant="h4">Height set with styles</ic-typography><ic-skeletonstyle="height:75px;"></ic-skeleton><ic-typographyvariant="h4">Width set with styles</ic-typography><ic-skeletonstyle="width:450px;"></ic-skeleton>
<IcTypographyvariant="h4">Height and width set with styles</IcTypography><IcSkeletonstyle={{height:"200px",width:"200px"}}/><IcTypographyvariant="h4">Height set with styles</IcTypography><IcSkeletonstyle={{height:"75px"}}/><IcTypographyvariant="h4">Width set with styles</IcTypography><IcSkeletonstyle={{width:"450px"}}/>
Light
Interactive example
<ic-skeletonvariant="circle"appearance="light"></ic-skeleton><ic-typographyvariant="caption"><ic-skeletonvariant="text"appearance="light"></ic-skeleton></ic-typography><ic-skeletonappearance="light"></ic-skeleton>
<IcSkeletonvariant="circle"appearance="light"/><IcTypographyvariant="caption"><IcSkeletonvariant="text"appearance="light"/></IcTypography><IcSkeletonappearance="light"/>
Within IcCard component
Interactive example
Americano Order
<div><divid="content-container"></div><br/><ic-buttonvariant="primary"id="reload"><svgslot="icon"xmlns="http://www.w3.org/2000/svg"height="24px"viewBox="0 0 24 24"width="24px"fill="#000000"><pathd="M0 0h24v24H0V0z"fill="none"></path><pathd="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"></path></svg> Reload</ic-button></div><script> window.onload = function () { document.getElementById("content-container").innerHTML = loading(); }; const loading = () => { return ( <ic-card heading="Coffee" subheading="What is coffee?" message="Coffee is a brewed drink." > <ic-skeleton slot="icon" variant="circle" style="height: 32px; width: 32px;" /> <ic-skeleton slot="heading" variant="rectangle" style="height: 32px; width: 130px;" /> <ic-skeleton slot="subheading" variant="text" style="height: 18px; width: 150px;" /> <ic-skeleton slot="message" variant="rectangle" style="height: 24px; width: 500px;" /> <ic-skeleton slot="interaction-controls" variant="rectangle" style="height: 40px; width: 110px;" /> <ic-skeleton slot="interaction-controls" variant="rectangle" style="height: 40px; width: 110px;" /> </ic-card> ); };const loaded = () => { return ( <ic-card heading="Coffee" subheading="What is coffee?" message="Coffee is a brewed drink." > <svg slot="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" > <path d="M0 0h24v24H0V0z" fill="none" /> <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" /> </svg> <div slot="interaction-controls" style="display: flex; gap: 16px;"> <ic-button variant="primary">Learn more</ic-button> <ic-button variant="secondary">Hide</ic-button> </div> </ic-card> ); }; const btn = document.querySelector("#reload"); btn.addEventListener("click", (ev) => { setTimeout(() => { document.getElementById("content-container").innerHTML = loaded(); }, 3000); });</script>
constloading=()=>{return(<IcCardheading="Coffee"subheading="What is coffee?"message="Coffee is a brewed drink."><IcSkeletonslot="icon"variant="circle"style={{height:"32px",width:"32px",}}/><IcSkeletonslot="heading"variant="rectangle"style={{height:"32px",width:"130px",}}/><IcSkeletonslot="subheading"variant="text"style={{height:"18px",width:"150px",}}/><IcSkeletonslot="message"variant="rectangle"style={{height:"24px",width:"500px",}}/><IcSkeletonslot="interaction-controls"variant="rectangle"style={{height:"40px",width:"110px",}}/><IcSkeletonslot="interaction-controls"variant="rectangle"style={{height:"40px",width:"110px",}}/></IcCard>);};constloaded=()=>{return(<IcCardheading="Coffee"subheading="What is coffee?"message="Coffee is a brewed drink."><SlottedSVGslot="icon"xmlns="http://www.w3.org/2000/svg"height="24px"viewBox="0 0 24 24"width="24px"fill="#000000"><pathd="M0 0h24v24H0V0z"fill="none"/><pathd="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></SlottedSVG><divslot="interaction-controls"style={{display:"flex",gap:"16px"}}><IcButtonvariant="primary">Learn more</IcButton><IcButtonvariant="secondary">Hide</IcButton></div></IcCard>);};constContentFunction=()=>{const[content, setContent]=React.useState(loading);constloadFunc=()=>{setContent(loading);setTimeout(()=>{setContent(loaded);},3000);};return(<div>{content}<br/><IcButtonvariant="primary"onClick={()=>{loadFunc();}}><SlottedSVGslot="icon"xmlns="http://www.w3.org/2000/svg"height="24px"viewBox="0 0 24 24"width="24px"fill="#000000"><pathd="M0 0h24v24H0V0z"fill="none"></path><pathd="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"></path></SlottedSVG> Refresh</IcButton></div>);};