Class: Daisy::Layout::AuraComponent

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

Overview

Note:

The glow is drawn with blurred pseudo-elements that extend slightly outside the wrapper, so avoid overflow-hidden on the aura itself (or on a tight parent) or the glow will be clipped.

Note:

Inside a column flex container (e.g. a card body on small screens), the wrapper is stretched to the parent's full width by the default align-items: stretch, painting the aura far beyond its content. Add w-fit (or an appropriate self-* utility) to keep the aura sized to its content.

The AuraComponent wraps any content with the DaisyUI aura effect — an animated border light that rotates around the element. Common use cases include:

  • Highlighting a call-to-action button.
  • Drawing attention to a featured card or pricing section.
  • Adding a subtle glow to avatars or badges.

The effect is pure CSS: the wrapper paints a rotating conic gradient behind your content (plus two blurred copies for the glow), so no JavaScript is required. The gradient uses currentColor, which means the aura color is simply the wrapper's text color — set it with any Tailwind text-* utility.

Includes the LocoMotion::Concerns::LinkableComponent module so that providing an href: will render the wrapper as an <a> tag, making the entire aura-wrapped element clickable.

Constant Summary

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) ⇒ AuraComponent

Creates a new Aura component.

Parameters:

  • kws (Hash) —

    The keyword arguments for the component.

Options Hash (**kws):

  • css (String) —

    Additional CSS classes for styling. Common options include:

    • Style: aura-dual, aura-rainbow, aura-holo, aura-gold, aura-silver, aura-glow
    • Size: aura-xs, aura-sm, aura-md, aura-lg, aura-xl
    • Color: any text-* utility (the effect renders in currentColor)
  • href (String) —

    When provided, the wrapper renders as an <a> tag so the entire aura-wrapped element is clickable.

  • 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.



98
99
100
 
# File 'app/components/daisy/layout/aura_component.rb', line 98

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

Instance Method Details

#before_render ⇒ Object

Sets up the component's CSS classes.



105
106
107
108
 
# File 'app/components/daisy/layout/aura_component.rb', line 105

def before_render
  setup_component
  super
end