Inhalt v1.0.0

Unendliches Scrollen

Lädt automatisch weitere Inhalte beim Scrollen nahe dem Ende eines Containers. Funktioniert nahtlos mit Turbo Frames für reibungslose Rails-Integration. Unterstützt automatisches Laden via IntersectionObserver und manuellen „Mehr laden"-Button-Modus.

Vorschau & Code

_infinite_scroll.html.erb

██
  ███          █ █████████████████████████
  █████████    █ ███████████████████████████████ ████
  ████████████ █ ██████████████████████████████████ █████████████
  ████████     █ ██████████████████████████████ ███ ████ ███████
  ████         █ ██████████████████████████ █████████████
  ███████████  █ █████████████████████████████████ ████
  ███████████  █ █████████████████████████████████ █████ ██████
  █████        █ ███████████████████████████ ██████
  ███████████  █ ███████████████████████████ ███

Get Access to View Code

infinite_scroll_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ ████████████ ██████████ █████████ ██████ ██████████
  ██████ ██████ █ █
    ████ ███████
    ██████████ █ █████ ███████ ████████ ███ ██
    █████ █ █████ ███████ ████████ ██████ ██
    ███████████ ███████
    ████████ █ █████ ████████ ████████ █████ ██

Get Access to View Code

infinite_scroll_component.rb

█ ██████████████████████ ████

█████ ███████████████████████ █ ███████████████████
  ███ ████████████████ ██████████ ████ █████████████ █████████████ █████████ ███ ████ ███████
                 █████ ██████ ████████████ ████ ████████████ █████ ██████ █████████ ██████
                 ██████ ██████ ████████████████
    ████          █ ███
    ██████████    █ █████████
    █████████████ █ ████████████
    █████████     █ ████████

Get Access to View Code

infinite_scroll_component.html.erb

████ ███ ████████████████████ ████████████████ ██ ██████████ ██████████████ ████
  ███ ███████ ████ █████ █████ ███ ████████ ██
  ████ ██████████████████████████████████████
    ███ ███████ ██
  ██████

  ███ ███████ █████████ ███████ ██ ████████ ██
  ████ █████████████████████████████████████ ██████████ ███████████████ ████
    ████ ██████████ ███ ████████████ ██████████████ ████████████████████
         ███████████

Get Access to View Code

infinite_scroll_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ ████████████ ██████████ █████████ ██████ ██████████
  ██████ ██████ █ █
    ████ ███████
    ██████████ █ █████ ███████ ████████ ███ ██
    █████ █ █████ ███████ ████████ ██████ ██
    ███████████ ███████
    ████████ █ █████ ████████ ████████ █████ ██

Get Access to View Code

Optionen

Name	Typ	Standard	Beschreibung
`url` *	String	erforderlich	URL to fetch the next page of content
`threshold`	Integer	`200`	Pixels from bottom to trigger loading
`loading_text`	String	`"Loading..."`	Text shown while loading
`end_text`	String	`"No more items"`	Text shown when all content loaded
`mode`	Symbol	`:auto`	:auto (IntersectionObserver) or :manual (button)
`turbo_frame`	String		Target Turbo Frame ID for content insertion
`button_text`	String	`"Load More"`	Button text for manual mode
`ended`	Boolean	`false`	Whether all content has been loaded

Name	Typ	Standard	Beschreibung
`url` *	String	erforderlich	URL to fetch next page
`threshold`	Integer	`200`	Trigger threshold in pixels
`loading_text`	String	`"Loading..."`	Loading indicator text
`end_text`	String	`"No more items"`	End state text
`mode`	Symbol	`:auto`	Loading mode
`turbo_frame`	String		Turbo Frame target ID
`button_text`	String	`"Load More"`	Manual mode button text
`ended`	Boolean	`false`	All content loaded flag

Änderungsprotokoll v1.0.0

- v1.0.0: Initial release with auto and manual modes

Vollzugang erhalten

Schalte den Quellcode für diese und alle anderen Komponenten frei. Einmalige Zahlung für lebenslangen Zugang.

Jetzt Zugang erhalten