The building block of a placeholder that you make yourself. Give the
blocks to withBones() as skeleton, laid out with any tags. Each block
takes the colours, the corner radius and the animation of bones, so your
placeholder moves and looks like the built-in shapes.
Usage
bones_block(width = "100%", height = "0.75rem", shape = c("rect", "circle"))Arguments
- width
A CSS width, or a number of pixels.
"100%"fills the width.- height
A CSS height, or a number of pixels. The default is the height of one line of text in the built-in shapes.
- shape
"rect"for a block with the corner radius of bones, or"circle"for a round block, such as an avatar. Give a circle the same width and height.
Value
An htmltools::tag.
Details
The tags at the top level of skeleton stack with a small gap. Inside a
tag of your own, you set the layout: for example display: flex for a
row, or display: grid; gap: 0.5rem for a column.
See also
withBones() and its section "Your own placeholder".
Examples
# A line of text, 60% wide.
bones_block("60%")
#> <div class="bones-bar bones-block" style="width: 60%; height: 0.75rem;"></div>
# An avatar.
bones_block(48, 48, shape = "circle")
#> <div class="bones-bar bones-block bones-block-circle" style="width: 48px; height: 48px;"></div>
if (requireNamespace("shiny", quietly = TRUE)) {
library(shiny)
# A list of three people: an avatar, a name and a line of text each.
person <- div(
style = "display: flex; gap: 0.75rem; align-items: center;",
bones_block(40, 40, shape = "circle"),
div(
style = "flex: 1; display: grid; gap: 0.4rem;",
bones_block("40%"), bones_block("80%", "0.6rem")
)
)
withBones(uiOutput("people"), skeleton = tagList(person, person, person))
}
#> <div class="bones-wrap bones-anim-wave" data-bones-type="custom" data-bones-stale="true" data-bones-min-time="500" data-bones-remember="true" data-bones-id="people" style="--bones-reserve: 72px; --bones-delay: 300ms;">
#> <div class="bones-skeleton bones-skeleton-custom" aria-hidden="true">
#> <div style="display: flex; gap: 0.75rem; align-items: center;">
#> <div class="bones-bar bones-block bones-block-circle" style="width: 40px; height: 40px;"></div>
#> <div style="flex: 1; display: grid; gap: 0.4rem;">
#> <div class="bones-bar bones-block" style="width: 40%; height: 0.75rem;"></div>
#> <div class="bones-bar bones-block" style="width: 80%; height: 0.6rem;"></div>
#> </div>
#> </div>
#> <div style="display: flex; gap: 0.75rem; align-items: center;">
#> <div class="bones-bar bones-block bones-block-circle" style="width: 40px; height: 40px;"></div>
#> <div style="flex: 1; display: grid; gap: 0.4rem;">
#> <div class="bones-bar bones-block" style="width: 40%; height: 0.75rem;"></div>
#> <div class="bones-bar bones-block" style="width: 80%; height: 0.6rem;"></div>
#> </div>
#> </div>
#> <div style="display: flex; gap: 0.75rem; align-items: center;">
#> <div class="bones-bar bones-block bones-block-circle" style="width: 40px; height: 40px;"></div>
#> <div style="flex: 1; display: grid; gap: 0.4rem;">
#> <div class="bones-bar bones-block" style="width: 40%; height: 0.75rem;"></div>
#> <div class="bones-bar bones-block" style="width: 80%; height: 0.6rem;"></div>
#> </div>
#> </div>
#> </div>
#> <div class="bones-content">
#> <div id="people" class="shiny-html-output"></div>
#> </div>
#> </div>