Component Preview
Interactive demonstration of the LoopButton component
🎛️ Interactive Controls
Component Overview
The LoopButton component provides intuitive control over loop playback functionality for audio and video content.
This interactive demo allows you to explore all the features and capabilities of the LoopButton component. Use the controls above to test the component's functionality and see how it integrates with other transport controls.
API Reference
The LoopButton component provides a comprehensive API for integration into your applications.
Properties: Configure the component with various properties to customize appearance and loop behavior.
Methods: Programmatically control the loop state using built-in methods for enabling/disabling loops.
Events: Listen to component events to respond to loop state changes and user interactions.
Component Events
The LoopButton component emits various events that you can listen to:
• Loop Enabled: Fired when loop mode is activated
• Loop Disabled: Fired when loop mode is deactivated
• Loop Toggle: Fired when the loop state changes
• Button State Change: Fired when the button's visual state updates
View the Event Log tab to see real-time events as they occur.
Usage Examples
Here are some common ways to use the LoopButton component in your projects:
Basic Usage:<loopbutton></loopbutton>
With Properties:<loopbutton disabled="false" size="large"></loopbutton>
Event Listeners:loopButton.addEventListener('loop-enabled', handleLoopEnabled);