Component Preview
Interactive demonstration of the ChordDiagram component
🎛️ Interactive Controls
Component Overview
Visual representation of chord fingerings for various string instruments
This interactive demo allows you to explore all the features and capabilities of the ChordDiagram component. Use the controls above to modify the component's behavior and see the results in real-time.
API Reference
The ChordDiagram component provides a comprehensive API for integration into your applications.
Properties: Configure the component with various properties to customize its behavior.
Methods: Programmatically control the component using built-in methods for chord display and instrument switching.
Events: Listen to component events to respond to user interactions and state changes.
Component Events
The ChordDiagram component emits various events that you can listen to:
• Initialization: Fired when the component is ready for use
• Chord Display: Fired when chord diagrams are shown
• Instrument Changes: Fired when the instrument type is switched
• Diagram Clear: Fired when diagrams are cleared
View the Event Log tab to see real-time events as they occur.
Usage Examples
Here are some common ways to use the ChordDiagram component in your projects:
Basic Usage:<chorddiagram></chorddiagram>
With Properties:<chorddiagram chord="C" instrument="ukulele"></chorddiagram>
Event Listeners:diagram.addEventListener('chord-display', handleChordDisplay);