Skeleton
General
Portal actor can display a placeholder preview when it is loading.
| View when loading | View after loading |
|---|---|
Skeleton Global Settings
Specify the height and padding of the default shaded rectangle. width is either 100% or controlled by the grid.
Code JSON "skeleton": {
"listView": {
"withAction": {
"height": "72px",
"padding": "24px 12px"
},
"noAction": {
"height": "48px",
"padding": "12px"
}
},
"queueView": {
"height": "150px",
"padding": "16px"
},
"cardView": {
"height": "300px",
"padding": "16px"
}, | Code JSON "detailView": {
"large": {
"height": "108.75px",
"padding": "28px 12px 20px 12px"
},
"medium": {
"height": "104px",
"padding": "28px 12px 20px 12px"
},
"small": {
"height": "101.625px",
"padding": "28px 12px 20px 12px"
}
}
} |
|---|
Skeleton Items
Each actor needs to specify how many skeleton rectangles are to be displayed.
Code JSON
"appearance": {
"skeleton": {
"items": 3
}
}Skeleton Overridden
| View when loading | View after loading |
|---|---|
Code JSON
"appearance": {
"skeleton": {
"items": 6,
"style": {
"padding": "12px",
"height": "74px"
},
"grid": {
"sm": 6
}
}
}Skeleton with renderAs
Code JSON
"appearance": {
"renderAs": [{
"condition": "$client; == \"phone\"",
"value": "card-view"
}, {
"condition": "$client; != \"phone\"",
"value": "list-view"
}],
"skeleton": {
"card-view": {
"items": 10,
"style": { "height": "160px" }
},
"list-view": {
"items": 10
}
}
}Skeleton with Conditional Entries
Code JSON
"appearance": {
"skeleton": [{
"value": {
"items": 3,
"style": { "height": "120px" }
},
"condition": "$client; != \"phone\""
}, {
"value": {
"items": 3,
"style": { "height": "178px" }
},
"condition": "$client; == \"phone\""
}]
}Status
| Release Available | Status | Framework Name |
|---|---|---|
| 3.4 | Current | TBC |