F
Filament•3w ago
KingStalker

How to customize getTabs() layout for mobile view?

Hey! I'm using Filament with getTabs() in my Livewire component. On mobile, the tabs scroll horizontally, but I’d prefer a layout that’s more like a vertical stack or tag-style — just something easier to tap through on smaller screens. I’m not the best when it comes to CSS or custom styling is there a simple way to tweak the layout for mobile? Any tips or direction would be awesome! 
public function getDefaultActiveTab(): string|int|null
{
    return 'all';
}

public function getTabs(): array
{
    $user = Auth::user();

    $badgeCounts = $user->isAdmin()
        ? Wash::selectRaw('status, COUNT(*) as count')
            ->groupBy('status')
            ->pluck('count', 'status')
        : Wash::where('user_id', Auth::id())
            ->selectRaw('status, COUNT(*) as count')
            ->groupBy('status')
            ->pluck('count', 'status');

    return [
        'all' => Tab::make()
            ->label('All')
            ->icon('fas-list')
            ->badge($badgeCounts->sum())
            ->badgeColor('success')
            ->modifyQueryUsing(fn (Builder $query) => $query),

        ...collect(WashStatus::cases())->mapWithKeys(fn ($status) => [
            strtolower($status->value) => Tab::make()
                ->label($status->getLabel())
                ->icon($status->getIcon())
                ->badge($badgeCounts[$status->value] ?? 0)
                ->badgeColor($status->getSummaryColor())
                ->modifyQueryUsing(fn (Builder $query) => $query->where('status', $status->value)),
        ])->toArray(),
    ];
}
public function getDefaultActiveTab(): string|int|null
{
    return 'all';
}

public function getTabs(): array
{
    $user = Auth::user();

    $badgeCounts = $user->isAdmin()
        ? Wash::selectRaw('status, COUNT(*) as count')
            ->groupBy('status')
            ->pluck('count', 'status')
        : Wash::where('user_id', Auth::id())
            ->selectRaw('status, COUNT(*) as count')
            ->groupBy('status')
            ->pluck('count', 'status');

    return [
        'all' => Tab::make()
            ->label('All')
            ->icon('fas-list')
            ->badge($badgeCounts->sum())
            ->badgeColor('success')
            ->modifyQueryUsing(fn (Builder $query) => $query),

        ...collect(WashStatus::cases())->mapWithKeys(fn ($status) => [
            strtolower($status->value) => Tab::make()
                ->label($status->getLabel())
                ->icon($status->getIcon())
                ->badge($badgeCounts[$status->value] ?? 0)
                ->badgeColor($status->getSummaryColor())
                ->modifyQueryUsing(fn (Builder $query) => $query->where('status', $status->value)),
        ])->toArray(),
    ];
}
No description
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?