Exported source
hover_gallery = SingleValueFactory("hover-gallery", "Container <div> or <figure> that includes images ") # Hover gallery containerhover gallery
Hover Gallery is container of images. The first image is visible be default and when we hover it horizontally, other images show up. Hover Gallery is useful for product cards in ecommerce sites, portfoilios or in image galleries. Hover Gallery can include up to 10 images.
Base Hover Gallery Component
The base hover gallery components:
Hover Gallery Test Examples
test_hover_gallery_basic_examples
test_hover_gallery_basic_examples ()
Test basic hover gallery utilities.
Exported source
def test_hover_gallery_basic_examples():
"""Test basic hover gallery utilities."""
# Basic components
assert str(hover_gallery) == "hover-gallery"
# With modifiers
assert str(hover_gallery.hover) == "hover:hover-gallery"
assert str(hover_gallery.md) == "md:hover-gallery"
assert str(hover_gallery.dark) == "dark:hover-gallery"
# Run the tests
test_hover_gallery_basic_examples()test_hover_gallery_basic_fasthtml_examples
test_hover_gallery_basic_fasthtml_examples ()
Test basic hover gallery from daisyUI v5 documentation.
Exported source
def test_hover_gallery_basic_fasthtml_examples():
"""Test basic hover gallery from daisyUI v5 documentation."""
from fasthtml.common import Figure, Div, Img
from cjm_fasthtml_tailwind.utilities.layout import aspect
from cjm_fasthtml_tailwind.utilities.sizing import max_w
from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import place_content, grid_display
from cjm_fasthtml_tailwind.utilities.layout import display_tw
from cjm_fasthtml_tailwind.core.base import combine_classes
from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, text_dui
# Basic hover gallery
img_gallery = Figure(
Img(src="https://img.daisyui.com/images/stock/daisyui-hat-1.webp"),
Img(src="https://img.daisyui.com/images/stock/daisyui-hat-2.webp"),
Img(src="https://img.daisyui.com/images/stock/daisyui-hat-3.webp"),
Img(src="https://img.daisyui.com/images/stock/daisyui-hat-4.webp"),
cls=combine_classes(hover_gallery, max_w(60))
)
assert img_gallery.tag == "figure"
assert "hover-gallery" in img_gallery.attrs['class']
# Return the components in a Div
return Div(img_gallery)
# Run the tests
test_hover_gallery_basic_fasthtml_examples()<div>
<figure class="hover-gallery max-w-60"><img src="https://img.daisyui.com/images/stock/daisyui-hat-1.webp"><img src="https://img.daisyui.com/images/stock/daisyui-hat-2.webp"><img src="https://img.daisyui.com/images/stock/daisyui-hat-3.webp"><img src="https://img.daisyui.com/images/stock/daisyui-hat-4.webp"></figure></div>test_func = test_hover_gallery_basic_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()test_hover_gallery_card_fasthtml_examples
test_hover_gallery_card_fasthtml_examples ()
Test basic hover gallery in card from daisyUI v5 documentation.
Exported source
def test_hover_gallery_card_fasthtml_examples():
"""Test basic hover gallery in card from daisyUI v5 documentation."""
from fasthtml.common import Figure, Div, Img, H2, Span, P
from cjm_fasthtml_tailwind.utilities.layout import aspect
from cjm_fasthtml_tailwind.utilities.sizing import max_w
from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import place_content, grid_display, flex_display, justify
from cjm_fasthtml_tailwind.utilities.layout import display_tw
from cjm_fasthtml_tailwind.utilities.effects import shadow
from cjm_fasthtml_tailwind.core.base import combine_classes
from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, text_dui
from cjm_fasthtml_daisyui.components.data_display.card import card, card_title, card_sizes, card_body
# Basic hover gallery
img_gallery = Figure(
Img(src="https://img.daisyui.com/images/stock/daisyui-hat-1.webp"),
Img(src="https://img.daisyui.com/images/stock/daisyui-hat-2.webp"),
Img(src="https://img.daisyui.com/images/stock/daisyui-hat-3.webp"),
Img(src="https://img.daisyui.com/images/stock/daisyui-hat-4.webp"),
cls=combine_classes(hover_gallery)
)
assert img_gallery.tag == "figure"
assert "hover-gallery" in img_gallery.attrs['class']
img_gallery_card = Div(
img_gallery,
Div(
H2(
"daisyUI Hat",
Span("$25", cls=combine_classes(font_weight.normal)),
cls=combine_classes(card_title, flex_display, justify.between)),
P("High Quality classic cap hat with stitch logo"),
cls=combine_classes(card_body)
),
cls=combine_classes(card, max_w(60), card_sizes.sm, bg_dui.base_200, shadow())
)
# Return the components in a Div
return Div(img_gallery_card)
# Run the tests
test_hover_gallery_card_fasthtml_examples()<div>
<div class="card max-w-60 card-sm bg-base-200 shadow">
<figure class="hover-gallery"><img src="https://img.daisyui.com/images/stock/daisyui-hat-1.webp"><img src="https://img.daisyui.com/images/stock/daisyui-hat-2.webp"><img src="https://img.daisyui.com/images/stock/daisyui-hat-3.webp"><img src="https://img.daisyui.com/images/stock/daisyui-hat-4.webp"></figure> <div class="card-body">
<h2 class="card-title flex justify-between">
daisyUI Hat<span class="font-normal">$25</span> </h2>
<p>High Quality classic cap hat with stitch logo</p>
</div>
</div>
</div>test_func = test_hover_gallery_card_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()