States

Loading, empty, and placeholder card components for the card stack viewport.

render_placeholder_card

Rendered in viewport slots that fall outside the items list (e.g., before the first item or after the last).

render_placeholder_card


def render_placeholder_card(
    placeholder_type:Literal, # Which edge of the list
)->Any: # Placeholder card component

Render a placeholder card for viewport edges.

# Test render_placeholder_card
from fasthtml.common import to_xml

start_card = render_placeholder_card("start")
html = to_xml(start_card)
assert "Beginning" in html
assert 'data-placeholder-type="start"' in html

end_card = render_placeholder_card("end")
html = to_xml(end_card)
assert "End" in html
assert 'data-placeholder-type="end"' in html
print("render_placeholder_card tests passed!")

render_placeholder_card tests passed!

render_loading_state

Displayed while the card stack is initializing (e.g., fetching items from a service).

source

render_loading_state


def render_loading_state(
    ids:CardStackHtmlIds, # HTML IDs for this card stack instance
    message:str='Loading...', # Loading message text
)->Any: # Loading component

Render loading state with spinner and message.

# Test render_loading_state
ids = CardStackHtmlIds(prefix="cs0")
loading_el = render_loading_state(ids)
html = to_xml(loading_el)
assert 'id="cs0-loading"' in html
assert "Loading..." in html

# Test custom message
loading_el = render_loading_state(ids, message="Initializing segments...")
html = to_xml(loading_el)
assert "Initializing segments..." in html
print("render_loading_state tests passed!")

render_loading_state tests passed!

render_empty_state

Displayed when the items list is empty.

source

render_empty_state


def render_empty_state(
    ids:CardStackHtmlIds, # HTML IDs for this card stack instance
    title:str='No items available', # Main empty state message
    subtitle:str='', # Optional subtitle text
)->Any: # Empty state component

Render empty state when no items exist.

# Test render_empty_state
ids = CardStackHtmlIds(prefix="cs0")
empty_el = render_empty_state(ids)
html = to_xml(empty_el)
assert 'id="cs0-card-stack-empty"' in html
assert "No items available" in html

# Test with subtitle
empty_el = render_empty_state(ids, title="Nothing here", subtitle="Add items to begin")
html = to_xml(empty_el)
assert "Nothing here" in html
assert "Add items to begin" in html
print("render_empty_state tests passed!")

render_empty_state tests passed!