Class: Daisy::Layout::HoverComponent

Inherits:
LocoMotion::BaseComponent show all
Includes:
LocoMotion::Concerns::LinkableComponent
Defined in:
app/components/daisy/layout/hover_component.rb

Overview

Note:

The hover-3d effect relies on DaisyUI's display: inline-grid. Passing a display utility such as block or flex via css: overrides it and collapses the eight hover zones, so the content only scales instead of tilting. Use sizing and spacing utilities (w-60, max-w-100, m-4) without changing display.

The HoverComponent wraps any content with the DaisyUI hover-3d effect, tilting and rotating the content based on the mouse position to create an interactive 3D feel. Common use cases include:

  • Credit cards, ID cards, and ticket mockups.
  • Image galleries and product showcases.
  • Marketing or hero sections that benefit from a subtle 3D flourish.

DaisyUI's hover-3d works by overlaying eight invisible "hover zones" on top of the content. Each zone applies a slight rotation as the cursor moves over it, and the combined effect produces a smooth 3D tilt. This component takes care of generating those eight empty zones for you so the API is just a wrapper around your content.

Includes the LocoMotion::Concerns::LinkableComponent module so that providing an href: will render the wrapper as an <a> tag, which is the DaisyUI-recommended way to make the entire 3D card clickable. Avoid placing interactive elements (buttons, links) inside the wrapper since they will conflict with the hover zones.

Constant Summary collapse

HOVER_ZONE_COUNT =

The number of empty hover zones DaisyUI's hover-3d requires.

8

Constants inherited from LocoMotion::BaseComponent

LocoMotion::BaseComponent::EMPTY_PART_IGNORED_TAGS, LocoMotion::BaseComponent::SELF_CLOSING_TAGS

Instance Attribute Summary

Attributes inherited from LocoMotion::BaseComponent

#config, #loco_parent

Instance Method Summary collapse

Methods inherited from LocoMotion::BaseComponent

build, #component_ref, #config_option, #cssify, define_modifier, define_modifiers, define_part, define_parts, define_size, define_sizes, #empty_part_content, #inspect, #part, register_component_initializer, register_component_setup, #rendered_css, #rendered_data, #rendered_html, #rendered_stimulus_controllers, #rendered_tag_name, renders_many, renders_one, set_component_name, #set_loco_parent, #strip_spaces

Methods included from LocoMotion::Concerns::InspectableComponent

#build_inspect_string

Constructor Details

#initialize(*args, **kws, &block) ⇒ HoverComponent

Creates a new Hover (3D) component.

Parameters:

  • kws (Hash) —

    The keyword arguments for the component.

Options Hash (**kws):

  • css (String) —

    Additional CSS classes for styling. Common options include:

    • Sizing: w-96, max-w-md
    • Spacing: m-4, mx-2 my-12
    • Cursor: cursor-pointer (recommended when also passing href:)

    Avoid display utilities (block, flex); they override the effect's inline-grid and break the tilt (see the note above).

  • href (String) —

    When provided, the wrapper renders as an <a> tag. Use this to make the entire 3D card clickable rather than placing interactive elements inside the wrapper.

  • target (String) —

    The link target (e.g., _blank). Only applied when href: is also provided.

  • title (String) —

    The HTML title attribute for the link (a native tooltip). Only applied when href: is also provided.

  • turbo_frame (String) —

    The Turbo Frame to target, rendered as data-turbo-frame.

  • turbo_action (String, Symbol) —

    How Turbo Drive updates the browser history for the visit, rendered as data-turbo-action (e.g. :advance or :replace).

  • turbo_method (String, Symbol) —

    The HTTP method Turbo should use for the request, rendered as data-turbo-method (e.g. :delete).

  • turbo_confirm (String) —

    A confirmation prompt Turbo shows before submitting, rendered as data-turbo-confirm.

  • action (String) —

    A Stimulus action wired to the component via its data-action attribute (e.g. "click->my-controller#handle"). Stimulus infers the click event, so "my-controller#handle" works as a shorthand.



95
96
97
 
# File 'app/components/daisy/layout/hover_component.rb', line 95

def initialize(*args, **kws, &block)
  super
end

Instance Method Details

#before_render ⇒ Object

Sets up the component's CSS classes.



102
103
104
105
 
# File 'app/components/daisy/layout/hover_component.rb', line 102

def before_render
  setup_component
  super
end