Conteúdo v1.0.0

Scroll infinito

Carrega automaticamente mais conteúdo ao rolar próximo ao final de um contêiner. Funciona naturalmente com Turbo Frames para integração fluida com Rails. Suporta carregamento automático via IntersectionObserver e modo de botão "Carregar mais" manual.

Pré-visualização e Código

_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

Opções

Nome	Tipo	Padrão	Descrição
`url` *	String	obrigatório	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

Nome	Tipo	Padrão	Descrição
`url` *	String	obrigatório	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

Changelog v1.0.0

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

Obter Acesso Completo

Desbloqueie o código-fonte deste componente e de todos os outros. Pagamento único para acesso vitalício.

Obter Acesso Agora