Aircraft Info Card Demo
Configuration
Demo
This page demonstrates the AircraftInfoCard component.
Hover over
the aircraft type below to display information about it:
When you charter a
Gulfstream G650
for your journey, you can expect exceptional performance and luxury.How to use in code:
<script>
import AircraftInfoCard from '../core/booking-engine/AircraftInfoCard.svelte';
</script>
I recommend flying in a
<AircraftInfoCard
aircraftType="Gulfstream G650"
showOnHover=true
position="top"
theme="light"
/>
for your trip.
Implementation Notes
- The component fetches aircraft data from your MySQL database via the API endpoints.
- It first tries an exact match with the aircraft name, and falls back to fuzzy search if needed.
- Card position can be set to top, bottom, left, or right relative to the trigger element.
- The component can be set to show on hover or on click.
- Light and dark themes are available to match your site design.
- The trigger can either use the default aircraft name display or a custom element via slots.