Popover
Reichhaltiges Inhalts-Overlay, ausgelöst durch Klick oder Hover. Im Gegensatz zum Tooltip (Hover, nur Text) kann das Popover Formulare, Menüs und interaktive Inhalte mit konfigurierbarer Platzierung und optionalem Pfeilindikator enthalten. Unterstützt 8 Platzierungspositionen, schließbare Schaltfläche, Titelkopfzeile sowie Klick- und Hover-Auslösemodi.
Vorschau & Code
_popover.html.erb
███ ███████ █████████
█████████
██████████ ██████ █ ███████ ██████████ █████ ██████ ███████ ███████████ █████████ ██████████████ ███████████
██████ ███████ █ ████ █████████
████████ ██████ █ ██████ ██████████ ██████
███████ ███████ █ █ █████████ █ ████████ ████ ███████ ██ ██████
██████ ██████ █ ███ █████████ █ ████████ ██████ █████
████████████ ███████ █ ████ █████████ █ ████ █████ ██████
██████ ██████ █ ██████████ ███ ███████ ███ ███ █████████
██████ ███ ███████ ███████ ████████ ███████ ████ ███████ ████ ███████
popover_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ █████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████
██████ ██████ █ █
█████ █ █████ ████████ ████████ █████ ██
████████████ █ █████ ███████ ████████ ███████ ██
████████████ █ █████ ████████ ████████ ████ █
█
popover_component.html.erb
████ █████████████████████████
████████████████████████████████████ █████████████ ███
███████████████████████████████████ ████████████ ███
██████████████████████████████████████████████████████ ██████████████████████████████████████
███████████████ ████████████ ███ ██████████████ ████
███ ███████ ██
████ █████████████████████████████
████████████████ ██████████████ ████
██ ██ ████████ ██
popover_component.rb
█ ██████████████████████ ████
█████ ████████████████ █ ███████████████████
██████████ █ █
████ ████████████ ████████ ████████████████ ██████
███████ █████████ ████████ ████████████████ ██████
█████ ███████████ ███████ ████████████████ ██████
██████ ██████████ ███████ ████████████████ ██████
██████████ ████████████ ██████ ██████
████████ ████████████ ███████ ██████
popover_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ █████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████
██████ ██████ █ █
█████ █ █████ ████████ ████████ █████ ██
████████████ █ █████ ███████ ████████ ███████ ██
████████████ █ █████ ████████ ████████ ████ █
█
Änderungsprotokoll
- v1.0.0: Initial release with placement, arrow, trigger mode, title, and dismissible options
Vollzugang erhalten
Schalte den Quellcode für diese und alle anderen Komponenten frei. Einmalige Zahlung für lebenslangen Zugang.
Jetzt Zugang erhalten