Přizpůsobení

CSS třídy

Veškeré stylování používá CSS třídy, které můžete přepsat ve svém stylesheetu.

Řazení řádků

Řazení sloupců

Výchozí styly

Balíček obsahuje tyto výchozí styly:

/* Row ghost */
.wire-sortable-ghost {
    opacity: 0.4;
    background-color: rgb(59 130 246 / 0.1);
}
 
/* Row chosen */
.wire-sortable-chosen {
    background-color: rgb(59 130 246 / 0.05);
}
 
/* Row drag clone */
.wire-sortable-drag {
    background-color: white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    border-radius: 0.5rem;
}
 
/* Column ghost */
.wire-sortable-column-ghost {
    opacity: 0.4;
    background-color: rgb(59 130 246 / 0.1);
}
 
/* Column drag clone */
.wire-sortable-column-drag {
    background-color: rgb(249 250 251);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    border-radius: 0.375rem;
}

Dark mode

Dark mode varianty jsou zahrnuty automaticky:

.dark .wire-sortable-drag {
    background-color: rgb(31 41 55);
}
 
.dark .wire-sortable-column-drag {
    background-color: rgb(31 41 55);
}

Ikona drag handle používá text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 pro správný kontrast v obou motivech.

Toggle tlačítko používá podmíněné Tailwind třídy:

• Aktivní (reordering): bg-primary-100 text-primary-600 (světlý) / bg-primary-900/30 text-primary-400 (tmavý)
• Neaktivní: text-gray-400 hover:text-gray-600 hover:bg-gray-100 (světlý) / text-gray-500 hover:text-gray-300 hover:bg-gray-700 (tmavý)

Přepis stylů

Přidejte vlastní pravidla za styly balíčku pro přepsání výchozích:

.wire-sortable-ghost {
    opacity: 0.6;
    background-color: rgb(16 185 129 / 0.1); /* zelená místo modré */
}
 
.wire-sortable-drag {
    border: 2px solid rgb(16 185 129);
}

Animace

Upravte rychlost drag animace v config/wire-sortable.php:

'animation' => 300, // pomalejší, plynulejší

Nastavte na 0 pro vypnutí animace.

Toggle tlačítko

Toggle tlačítko se vykreslí automaticky v toolbaru tabulky. Ukazuje:

• „Reorder" (s grip ikonou), když není v reorder režimu
• „Done reordering" (s check ikonou), když je v reorder režimu

Tlačítko je skryté, když tabulka používá alwaysReorderable() nebo když je řazení řádků vypnuté.

Překlady

Labely tlačítka jsou přeložitelné. Publikujte překlady:

php artisan vendor:publish --tag=wire-sortable::translations

Upravte lang/vendor/wire-sortable/{locale}/messages.php:

return [
    'reorder' => 'Reorder',
    'done_reordering' => 'Done reordering',
];

Zahrnuté locale: en, cs.

Publikování pohledů

Pro plné přizpůsobení HTML a JavaScriptu:

php artisan vendor:publish --tag=wire-sortable::views

Publikované soubory:

Po publikování upravte soubory v resources/views/vendor/wire-sortable/.

Vlastní model uživatele

Pokud vaše aplikace používá vlastní model uživatele, aktualizujte config/wire-sortable.php:

'user_model' => 'App\\Models\\Admin',

Toto používá model ReorderableColumnOrder pro relaci user().