tonystore/livewire-interactions
Livewire Interactions
Package to generate interactions in a Laravel application with Livewire.
REQUIREMENTS
INSTALLATION VIA COMPOSER
Step 1: Composer
Run this command line in console.
composer require tonystore/livewire-interactions
Step 2: Publish Assets
Publish Config File
php artisan vendor:publish --provider="Tonystore\LivewireInteraction\LivewireInteractionProvider" --tag=config-interaction
Publish Lang
Publish the translations in case you wish to modify any of them.
php artisan vendor:publish --provider="Tonystore\LivewireInteraction\LivewireInteractionProvider" --tag=langs-interaction
Usage
By default, Bootstrap is the default theme to use for the follow component.But you can switch to Tailwind.
<?php
return [
/*
* Supported Theme: 'bootstrap', 'tailwind'.
*/
'theme' => 'bootstrap',
];
You can customize the default styles applied to the follow component by following the instructions below.
<?php
return [
'bootstrap' => [ // Bootstrap styles
'btn' => [
'follow_class' => 'btn btn-info btn-sm',
'unfollow_class' => 'btn btn-danger btn-sm'
],
'icon' => [
'follow_icon' => 'fas fa-user-plus',
'unfollow_icon' => 'fas fa-user-xmark'
]
],
];
To use the follow and unfollow component, you can add it anywhere in your code as follows:
<body>
//INSERT COMPONENT
<livewire:follow :user="$user" :wire:key="$user->id" />
//OR BLADE DIRECTIVE
@livewire('follow', ['user' => $jugador], key($user->id))
//The user parameter is mandatory.
</body>
You can also customize the styles to be used directly in a component, passing as parameters the new settings to be used.
<div>
<livewire:follow
:user="$user" //User to follow
:follow_class="btn btn-block btn-lg" //Classes for follow button.
:unfollow_class="btn btn-block btn-lg" //Classes for unfollowing button
:follow_icon="btn btn-block btn-lg" //Classes for icon to follow.
:unfollow_icon="btn btn-block btn-lg" //Classes to icon unfollowing
:only_icon="btn btn-block btn-lg" //Show only the icon, without a description
/>
</div>