stack

Stack visually puts elements on top of each other.

Base Stack

stack = SingleValueFactory("stack", "Base stack component that puts the children elements on top of each other") # Base stack component

Stack Modifiers

---

source

StackModifier

 StackModifier (value, names=None, module=None, qualname=None, type=None,
                start=1, boundary=None)

*str(object=’’) -> str str(bytes_or_buffer[, encoding[, errors]]) -> str

Create a new string object from the given object. If encoding or errors is specified, then the object must expose a data buffer that will be decoded using the given encoding and error handler. Otherwise, returns the result of object.__str__() (if defined) or repr(object). encoding defaults to sys.getdefaultencoding(). errors defaults to ‘strict’.*

class StackModifier(str, Enum):
    TOP = "top"
    BOTTOM = "bottom"
    START = "start"
    END = "end"

stack_modifiers = enums_to_simple_factory(stack, [StackModifier]) # stack modifiers

Stack Test Examples

---

source

test_stack_basic_examples

 test_stack_basic_examples ()

Test basic stack utilities.

def test_stack_basic_examples():
    """Test basic stack utilities."""
    # Basic stack
    assert str(stack) == "stack"
    
    # Test with modifiers
    assert str(stack.hover) == "hover:stack"
    assert str(stack.md) == "md:stack"
    assert str(stack.dark) == "dark:stack"

# Run the tests
test_stack_basic_examples()

---

source

test_stack_modifiers_examples

 test_stack_modifiers_examples ()

Test stack modifier utilities.

def test_stack_modifiers_examples():
    """Test stack modifier utilities."""
    assert str(stack_modifiers.top) == "stack-top"
    assert str(stack_modifiers.bottom) == "stack-bottom"
    assert str(stack_modifiers.start) == "stack-start"
    assert str(stack_modifiers.end) == "stack-end"

# Run the tests
test_stack_modifiers_examples()

---

source

test_stack_basic_divs_fasthtml_examples

 test_stack_basic_divs_fasthtml_examples ()

Test basic stack with 3 divs from daisyUI v5 documentation.

def test_stack_basic_divs_fasthtml_examples():
    """Test basic stack with 3 divs from daisyUI v5 documentation."""
    from fasthtml.common import Div
    from cjm_fasthtml_tailwind.utilities.sizing import h, w
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import place_content, grid_display
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, text_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    
    # 3 divs in a stack
    stack_divs = Div(
        Div("1", cls=combine_classes(bg_dui.primary, text_dui.primary_content, grid_display, place_content.center, border_radius.box)),
        Div("2", cls=combine_classes(bg_dui.accent, text_dui.accent_content, grid_display, place_content.center, border_radius.box)),
        Div("3", cls=combine_classes(bg_dui.secondary, text_dui.secondary_content, grid_display, place_content.center, border_radius.box)),
        cls=combine_classes(stack, h._20, w._32)
    )
    
    # Verify structure
    assert stack_divs.tag == "div"
    assert "stack" in stack_divs.attrs['class']
    assert "h-20" in stack_divs.attrs['class']
    assert "w-32" in stack_divs.attrs['class']
    
    # Verify all three divs
    assert len(stack_divs.children) == 3
    
    # First div
    first_div = stack_divs.children[0]
    assert first_div.tag == "div"
    assert "bg-primary" in first_div.attrs['class']
    assert "text-primary-content" in first_div.attrs['class']
    assert "grid" in first_div.attrs['class']
    assert "place-content-center" in first_div.attrs['class']
    assert "rounded-box" in first_div.attrs['class']
    assert first_div.children[0] == "1"
    
    # Second div
    second_div = stack_divs.children[1]
    assert "bg-accent" in second_div.attrs['class']
    assert "text-accent-content" in second_div.attrs['class']
    assert second_div.children[0] == "2"
    
    # Third div
    third_div = stack_divs.children[2]
    assert "bg-secondary" in third_div.attrs['class']
    assert "text-secondary-content" in third_div.attrs['class']
    assert third_div.children[0] == "3"
    
    return stack_divs

# Run the tests
test_stack_basic_divs_fasthtml_examples()

<div class="stack h-20 w-32">
  <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
  <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
  <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">3</div>
</div>

test_func = test_stack_basic_divs_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_stack_images_fasthtml_examples

 test_stack_images_fasthtml_examples ()

Test stacked images from daisyUI v5 documentation.

def test_stack_images_fasthtml_examples():
    """Test stacked images from daisyUI v5 documentation."""
    from fasthtml.common import Div, Img
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    
    # Stacked images
    stack_images = Div(
        Img(src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp", cls=str(border_radius.box)),
        Img(src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp", cls=str(border_radius.box)),
        Img(src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp", cls=str(border_radius.box)),
        cls=combine_classes(stack, w._48)
    )
    
    # Verify structure
    assert stack_images.tag == "div"
    assert "stack" in stack_images.attrs['class']
    assert "w-48" in stack_images.attrs['class']
    
    # Verify all three images
    assert len(stack_images.children) == 3
    
    # First image
    first_img = stack_images.children[0]
    assert first_img.tag == "img"
    assert first_img.attrs['src'] == "https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"
    assert first_img.attrs['class'] == "rounded-box"
    
    # Second image
    second_img = stack_images.children[1]
    assert second_img.tag == "img"
    assert second_img.attrs['src'] == "https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"
    assert second_img.attrs['class'] == "rounded-box"
    
    # Third image
    third_img = stack_images.children[2]
    assert third_img.tag == "img"
    assert third_img.attrs['src'] == "https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"
    assert third_img.attrs['class'] == "rounded-box"
    
    return stack_images

# Run the tests
test_stack_images_fasthtml_examples()

<div class="stack w-48">
<img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" class="rounded-box"><img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" class="rounded-box"><img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" class="rounded-box"></div>

test_func = test_stack_images_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_stack_cards_fasthtml_examples

 test_stack_cards_fasthtml_examples ()

Test stacked cards from daisyUI v5 documentation.

def test_stack_cards_fasthtml_examples():
    """Test stacked cards from daisyUI v5 documentation."""
    from fasthtml.common import Div
    from cjm_fasthtml_tailwind.utilities.sizing import size_util
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.typography import text_align
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, border_dui
    from cjm_fasthtml_daisyui.components.data_display.card import card, card_body
    
    # Stacked cards
    stack_cards = Div(
        Div(
            Div("A", cls=str(card_body)),
            cls=combine_classes(border_dui.base_content, card, bg_dui.base_100, border(), text_align.center)
        ),
        Div(
            Div("B", cls=str(card_body)),
            cls=combine_classes(border_dui.base_content, card, bg_dui.base_100, border(), text_align.center)
        ),
        Div(
            Div("C", cls=str(card_body)),
            cls=combine_classes(border_dui.base_content, card, bg_dui.base_100, border(), text_align.center)
        ),
        cls=combine_classes(stack, size_util._28)
    )
    
    # Verify structure
    assert stack_cards.tag == "div"
    assert "stack" in stack_cards.attrs['class']
    assert "size-28" in stack_cards.attrs['class']
    
    # Verify all three cards
    assert len(stack_cards.children) == 3
    
    for i, letter in enumerate(["A", "B", "C"]):
        card_div = stack_cards.children[i]
        assert card_div.tag == "div"
        assert "border-base-content" in card_div.attrs['class']
        assert "card" in card_div.attrs['class']
        assert "bg-base-100" in card_div.attrs['class']
        assert "border" in card_div.attrs['class']
        assert "text-center" in card_div.attrs['class']
        
        # Verify card body
        card_body_div = card_div.children[0]
        assert card_body_div.tag == "div"
        assert card_body_div.attrs['class'] == "card-body"
        assert card_body_div.children[0] == letter
    
    return stack_cards

# Run the tests
test_stack_cards_fasthtml_examples()

<div class="stack size-28">
  <div class="border-base-content card bg-base-100 border text-center">
    <div class="card-body">A</div>
  </div>
  <div class="border-base-content card bg-base-100 border text-center">
    <div class="card-body">B</div>
  </div>
  <div class="border-base-content card bg-base-100 border text-center">
    <div class="card-body">C</div>
  </div>
</div>

test_func = test_stack_cards_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_stack_cards_directions_fasthtml_examples

 test_stack_cards_directions_fasthtml_examples ()

Test stacked cards with different directions from daisyUI v5 documentation.

def test_stack_cards_directions_fasthtml_examples():
    """Test stacked cards with different directions from daisyUI v5 documentation."""
    from fasthtml.common import Div
    from cjm_fasthtml_tailwind.utilities.sizing import size_util
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.typography import text_align
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, border_dui
    from cjm_fasthtml_daisyui.components.data_display.card import card, card_body
    
    # Helper function to create a card
    def create_card(letter):
        return Div(
            Div(letter, cls=str(card_body)),
            cls=combine_classes(border_dui.base_content, card, bg_dui.base_100, border(), text_align.center)
        )
    
    # Stacked cards - top direction
    stack_top = Div(
        create_card("A"),
        create_card("B"),
        create_card("C"),
        cls=combine_classes(stack, stack_modifiers.top, size_util._28)
    )
    
    # Verify top stack
    assert "stack" in stack_top.attrs['class']
    assert "stack-top" in stack_top.attrs['class']
    assert "size-28" in stack_top.attrs['class']
    assert len(stack_top.children) == 3
    
    # Stacked cards - start direction
    stack_start = Div(
        create_card("A"),
        create_card("B"),
        create_card("C"),
        cls=combine_classes(stack, stack_modifiers.start, size_util._28)
    )
    
    # Verify start stack
    assert "stack" in stack_start.attrs['class']
    assert "stack-start" in stack_start.attrs['class']
    assert "size-28" in stack_start.attrs['class']
    assert len(stack_start.children) == 3
    
    # Stacked cards - end direction
    stack_end = Div(
        create_card("A"),
        create_card("B"),
        create_card("C"),
        cls=combine_classes(stack, stack_modifiers.end, size_util._28)
    )
    
    # Verify end stack
    assert "stack" in stack_end.attrs['class']
    assert "stack-end" in stack_end.attrs['class']
    assert "size-28" in stack_end.attrs['class']
    assert len(stack_end.children) == 3
    
    # Verify all cards in each stack
    for stack_element in [stack_top, stack_start, stack_end]:
        for i, letter in enumerate(["A", "B", "C"]):
            card_div = stack_element.children[i]
            assert card_div.tag == "div"
            assert "card" in card_div.attrs['class']
            assert card_div.children[0].children[0] == letter
    
    return Div(stack_top, stack_start, stack_end)

# Run the tests
test_stack_cards_directions_fasthtml_examples()

<div>
  <div class="stack stack-top size-28">
    <div class="border-base-content card bg-base-100 border text-center">
      <div class="card-body">A</div>
    </div>
    <div class="border-base-content card bg-base-100 border text-center">
      <div class="card-body">B</div>
    </div>
    <div class="border-base-content card bg-base-100 border text-center">
      <div class="card-body">C</div>
    </div>
  </div>
  <div class="stack stack-start size-28">
    <div class="border-base-content card bg-base-100 border text-center">
      <div class="card-body">A</div>
    </div>
    <div class="border-base-content card bg-base-100 border text-center">
      <div class="card-body">B</div>
    </div>
    <div class="border-base-content card bg-base-100 border text-center">
      <div class="card-body">C</div>
    </div>
  </div>
  <div class="stack stack-end size-28">
    <div class="border-base-content card bg-base-100 border text-center">
      <div class="card-body">A</div>
    </div>
    <div class="border-base-content card bg-base-100 border text-center">
      <div class="card-body">B</div>
    </div>
    <div class="border-base-content card bg-base-100 border text-center">
      <div class="card-body">C</div>
    </div>
  </div>
</div>

test_func = test_stack_cards_directions_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_stack_cards_shadow_fasthtml_examples

 test_stack_cards_shadow_fasthtml_examples ()

Test stacked cards with shadow from daisyUI v5 documentation.

def test_stack_cards_shadow_fasthtml_examples():
    """Test stacked cards with shadow from daisyUI v5 documentation."""
    from fasthtml.common import Div
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_tailwind.utilities.typography import text_align
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.components.data_display.card import card, card_body
    
    # Stacked cards with shadow
    stack_shadow = Div(
        Div(
            Div("A", cls=str(card_body)),
            cls=combine_classes(card, bg_dui.base_200, text_align.center, shadow.md)
        ),
        Div(
            Div("B", cls=str(card_body)),
            cls=combine_classes(card, bg_dui.base_200, text_align.center, shadow())
        ),
        Div(
            Div("C", cls=str(card_body)),
            cls=combine_classes(card, bg_dui.base_200, text_align.center, shadow.sm)
        ),
        cls=str(stack)
    )
    
    # Verify structure
    assert stack_shadow.tag == "div"
    assert stack_shadow.attrs['class'] == "stack"
    assert len(stack_shadow.children) == 3
    
    # First card with shadow-md
    first_card = stack_shadow.children[0]
    assert first_card.tag == "div"
    assert "card" in first_card.attrs['class']
    assert "bg-base-200" in first_card.attrs['class']
    assert "text-center" in first_card.attrs['class']
    assert "shadow-md" in first_card.attrs['class']
    assert first_card.children[0].attrs['class'] == "card-body"
    assert first_card.children[0].children[0] == "A"
    
    # Second card with shadow
    second_card = stack_shadow.children[1]
    assert "card" in second_card.attrs['class']
    assert "bg-base-200" in second_card.attrs['class']
    assert "text-center" in second_card.attrs['class']
    assert "shadow" in second_card.attrs['class']
    assert second_card.children[0].children[0] == "B"
    
    # Third card with shadow-sm
    third_card = stack_shadow.children[2]
    assert "card" in third_card.attrs['class']
    assert "bg-base-200" in third_card.attrs['class']
    assert "text-center" in third_card.attrs['class']
    assert "shadow-sm" in third_card.attrs['class']
    assert third_card.children[0].children[0] == "C"
    
    return stack_shadow

# Run the tests
test_stack_cards_shadow_fasthtml_examples()

<div class="stack">
  <div class="card bg-base-200 text-center shadow-md">
    <div class="card-body">A</div>
  </div>
  <div class="card bg-base-200 text-center shadow">
    <div class="card-body">B</div>
  </div>
  <div class="card bg-base-200 text-center shadow-sm">
    <div class="card-body">C</div>
  </div>
</div>

test_func = test_stack_cards_shadow_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_stack_notification_cards_fasthtml_examples

 test_stack_notification_cards_fasthtml_examples ()

Test stacked notification cards from daisyUI v5 documentation.

def test_stack_notification_cards_fasthtml_examples():
    """Test stacked notification cards from daisyUI v5 documentation."""
    from fasthtml.common import Div, H2, P
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.components.data_display.card import card, card_body, card_title
    
    # Stacked notification cards
    stack_notifications = Div(
        Div(
            Div(
                H2("Notification 1", cls=str(card_title)),
                P("You have 3 unread messages. Tap here to see."),
                cls=str(card_body)
            ),
            cls=combine_classes(card, shadow.md, bg_dui.base_100)
        ),
        Div(
            Div(
                H2("Notification 2", cls=str(card_title)),
                P("You have 3 unread messages. Tap here to see."),
                cls=str(card_body)
            ),
            cls=combine_classes(card, shadow.md, bg_dui.base_100)
        ),
        Div(
            Div(
                H2("Notification 3", cls=str(card_title)),
                P("You have 3 unread messages. Tap here to see."),
                cls=str(card_body)
            ),
            cls=combine_classes(card, shadow.md, bg_dui.base_100)
        ),
        cls=str(stack)
    )
    
    # Verify structure
    assert stack_notifications.tag == "div"
    assert stack_notifications.attrs['class'] == "stack"
    assert len(stack_notifications.children) == 3
    
    # Verify each notification card
    for i in range(1, 4):
        card_div = stack_notifications.children[i-1]
        assert card_div.tag == "div"
        assert "card" in card_div.attrs['class']
        assert "shadow-md" in card_div.attrs['class']
        assert "bg-base-100" in card_div.attrs['class']
        
        # Verify card body
        card_body_div = card_div.children[0]
        assert card_body_div.tag == "div"
        assert card_body_div.attrs['class'] == "card-body"
        
        # Verify title
        title = card_body_div.children[0]
        assert title.tag == "h2"
        assert title.attrs['class'] == "card-title"
        assert title.children[0] == f"Notification {i}"
        
        # Verify paragraph
        paragraph = card_body_div.children[1]
        assert paragraph.tag == "p"
        assert paragraph.children[0] == "You have 3 unread messages. Tap here to see."
    
    return stack_notifications

# Run the tests
test_stack_notification_cards_fasthtml_examples()

<div class="stack">
  <div class="card shadow-md bg-base-100">
    <div class="card-body">
      <h2 class="card-title">Notification 1</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
  <div class="card shadow-md bg-base-100">
    <div class="card-body">
      <h2 class="card-title">Notification 2</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
  <div class="card shadow-md bg-base-100">
    <div class="card-body">
      <h2 class="card-title">Notification 3</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
</div>

test_func = test_stack_notification_cards_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()