1. Go to this page and download the library: Download jibaymcs/filament-tour library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
jibaymcs / filament-tour example snippets
return [
"only_visible_once" => true,
];
use JibayMcs\FilamentTour\FilamentTourPlugin;
public function panel(Panel $panel) {
return $panel->default()
->[...]
->plugins([ FilamentTourPlugin::make() ]);
}
namespace App\Filament\Pages;
use JibayMcs\FilamentTour\Tour\HasTour;
class Dashboard extends FilamentDashboard {
use HasTour;
// ...
public function tours(): array {
return [];
}
}
use JibayMcs\FilamentTour\Tour\Step;
use JibayMcs\FilamentTour\Tour\Tour;
public function tours(): array {
return [
Tour::make('dashboard')
->steps(
Step::make()
->title("Welcome to your Dashboard !")
->description(view('tutorial.dashboard.introduction')),
Step::make('.fi-avatar')
->title('Woaw ! Here is your avatar !')
->description('You look nice !')
->icon('heroicon-o-user-circle')
->iconColor('primary')
),
];
}
->route('/admin')
use App\Models\Post;
use Illuminate\Support\Facades\Config;
use Livewire\Attributes\On;
/**
* Renders the first tour.
*
* @param boolean $only_visible_once Whether the tour should only be visible once.
* @param array $tours Tours to render.
* @param array $highlights Highlights to render.
*
* @return void
*/
#[On('filament-tour::loaded-elements')]
public function renderPostTour(bool $only_visible_once, array $tours, array $highlights): void
{
// If there are posts, don't show this tour
if (Post::count() > 0) {
return;
}
// Get the tour prefix value
$prefix = Config::get('filament-tour.tour_prefix_id');
// Remove the prefix
$firstTourID = substr($tours[0]['id'], strlen($prefix));
// Dispatch the event to open the tour
$this->dispatch('filament-tour::open-tour', $firstTourID);
}
use JibayMcs\FilamentTour\Tour\Tour;
public function tours(): array {
return [
Tour::make(url: "https://gist.githubusercontent.com/JibayMcs/cc06efddadcfc0a0ff59e116533ee727/raw/8c5c86a3a4b92e4d0586d7a344d0e41f0c175659/TourDashboard.json")
];
}
use JibayMcs\FilamentTour\Tour\Tour;
use Illuminate\Support\Facades\Storage;
public function tours(): array {
return [
Tour::make(json: Storage::disk('local')->get("TourDashboard.json"))
];
}
use JibayMcs\FilamentTour\Tour\Tour;
// Instanciate a tour, and provide an id, to trigger it later
Tour::make(string $id)
// Since 3.1.0.1, JSON Support update
Tour::make(... $params)
// Define a custom url to trigger your tour
->route(string $route)
//Register the steps of your tour
->steps(Step ...$steps)
// Define a color of your highlight overlay for the dark and light theme of your filament panel
->colors(string $light, string $dark)
//Set the tour as always visible, even is already viewed by the user.
->alwaysShow(bool|Closure $alwaysShow = true)
// Set the tour visible or not
->visible(bool|Closure $visible = true)
// Set the 'Next' button label
->nextButtonLabel(string $label)
// Set the 'Previous' button label
->previousButtonLabel(string $label)
// Set the 'Done' button label
->doneButtonLabel(string $label)
// Set the whole steps of the tour as uncloseable
->uncloseable(bool|Closure $uncloseable = true)
// Disable all tour steps events
->disableEvents(bool|Closure $disableEvents = true)
// Bypass route check to show the tour on all pages
// Maybe useless, but who knows ?
->ignoreRoutes(bool|Closure $ignoreRoutes = true)
use JibayMcs\FilamentTour\Tour\Step;
// If no element provided, the step act like a modal
Step::make(string $element = null)
// Define the title of your step
// Mandatory
->title(string|Closure $title)
// Define the description of your step
// Also accept HTML
// Mandatory
->description(string|Closure|HtmlString|View $description)
// Define an icon next to your step title
->icon(string $icon)
// Define the color of the title icon
->iconColor(string $color)
// Step your step closeable or not
// Default: true
->uncloseable(bool|Closure $uncloseable = true)
//Simulate a click on a CSS selected element when you press the next button
->clickOnNext(string|Closure $selector)
// Send a notification when you press the next button
->notifyOnNext(Notification $notification)
//Redirect you to a custom url or a route() when you press the next button
->redirectOnNext(string $url, bool $newTab = false)
// Dispatch an event like `$dispatch()` when you press the next button
->dispatchOnNext(string $name, ...$args)
namespace App\Filament\Pages;
use JibayMcs\FilamentTour\Highlight\HasHighlight;
class Dashboard extends FilamentDashboard {
use HasHighlight;
// ...
public function highlights(): array {
return [];
}
}
use JibayMcs\FilamentTour\Highlight\Highlight;
public function highlights(): array {
return [
Highlight::make('.fi-header-heading')
->element('.fi-header-heading')
->title('Whoaw ! You highlighted the title of the page !')
->description('"Dashboard"'),
Highlight::make('.fi-avatar')
->element('.fi-avatar')
->title("Pssst ! That's your avatar")
->icon('heroicon-o-user-circle')
->iconColor('primary'),
];
}
use JibayMcs\FilamentTour\Highlight\Highlight;
// Instantiate a highlight with a CSS select of the element where the icon button is next to
Highlight::make(string $parent)
// Define the element to be highlighted
->element(string $element)
// Set the title of your highlight
->title(string|Closure $title)
// Set the description of your highlight
->description(string|Closure|HtmlString|View $description)
// Define a custom icon for your highlight button
// Default: heroicon-m-question-mark-circle
->icon(string $icon)
// Define the color of the highlight icon button
// Default: gray
->iconColor(string $color)
// Define a color of your highlight overlay for the dark and light theme of your filament panel
->colors(string $light, string $dark)
// Set the position of your icon button around the parent
// Default: top-left
// Available: top-left, top-right, bottom-left, bottom-right
->position(string $position)