Skeleton

Skeleton loading placeholder component.

template 0 required 5 optional 0 slots 0 a11y rules

variant

width

height

skeleton(variant='text', width='200px', height='1rem')

Usage

views.py

from djust import LiveView


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.variant = 'text'
        self.width = '200px'
        self.height = '1rem'

my_template.html

{% load theme_components %}
{% theme_skeleton variant=variant width=width height=height %}

Props

Name	Type	Default	Description
variant	str	text	—
width	str	100%	—
height	str	1rem	—
css_prefix	str	—	—
attrs	dict	—	—

Source & styles

File	Path	Notes
template	djust_theming/components/skeleton.html	Copy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/.
css	djust_theming/components.css	Defines 4 of this component's classes at line 1028, 1033, 1037, 1041. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
css	djust_components/components.css	Defines 3 of this component's classes at line 539, 540, 542. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
css	djust_theming/performance.css	Defines 1 of this component's classes at line 160. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
css	djust_theming/scaffold.css	Defines 1 of this component's classes at line 1211. Override those rules, or the custom properties they read, in a stylesheet loaded after it.

CSS variables

--muted --radius

Template source — skeleton.html

<div class="{{ css_prefix }}skeleton {{ css_prefix }}skeleton-{{ variant }} {% if attrs.class %}{{ attrs.class }}{% endif %}"
     aria-hidden="true"
     style="width: {{ width }}; height: {{ height }}"
     {% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
</div>

Skeleton

Preview

Usage

Props

Accessibility