Installation
Let's start by copying the necessary files to their respective directories in your Laravel project.
- Copy the
AccordionDemo.php
andGithubProfileAccordion.php
files to yourapp/Livewire
directory. - Copy the
accordion-demo.blade.php
andgithub-profile-accordion.blade.php
view files to yourresources/views/livewire
directory. - Copy the
accordion/index.blade.php
andaccordion/item.blade.php
component files to theresources/views/components/accordion
directory.
Ensure each file is in the correct location, then proceed to integrate the component into your Laravel project.
Integration
To use the accordion component in your Laravel project, you need to include it in your blade file. Here's a basic usage example:
@livewire('accordion-demo')
This line of code includes the Livewire component in your blade file, rendering the accordion with the specified profiles. The accordion items will fetch and display GitHub profiles dynamically.
Configuration
The GithubProfileAccordion
Livewire component has a public property $username
that it uses to fetch the GitHub profile. You can change the profiles displayed by modifying the $profiles
array in the AccordionDemo
component.
The accordion is styled using Tailwind CSS. You can customize the appearance by modifying the classes in the blade files.
For more advanced usage, you can modify the methods in the Livewire components to change the behaviour of the accordion. For example, the fetchProfile
method in the GithubProfileAccordion
component fetches the profile data from the GitHub API. You could modify this method to fetch data from a different source.