diff --git a/docs/pagination/available-methods.md b/docs/pagination/available-methods.md index eae078132..b57b846c2 100644 --- a/docs/pagination/available-methods.md +++ b/docs/pagination/available-methods.md @@ -229,40 +229,6 @@ public function configure(): void } ``` -## setPerPageFieldAttributes -Allows for customisation of the appearance of the "Per Page" dropdown - -Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods. - -### default-colors -Setting to false will disable the default colors for the Per Page dropdown, the default colors are: -Bootstrap: -None - -Tailwind: -border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 - -### default-styling -Setting to false will disable the default styling for the Per Page dropdown, the default styling is: -Bootstrap 4: -form-control - -Bootstrap 5: -form-select - -Tailwind: -block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50 - -```php -public function configure(): void -{ - $this->setPerPageFieldAttributes([ - 'class' => 'border-red-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-red-700 dark:text-white dark:border-red-600', // Add these classes to the dropdown - 'default-colors' => false, // Do not output the default colors - 'default-styles' => true, // Output the default styling - ]); -} -``` ## setShouldRetrieveTotalItemCountStatus @@ -296,14 +262,3 @@ public function configure(): void $this->setShouldRetrieveTotalItemCountDisabled(); } ``` - -## setPaginationWrapperAttributes - -Used to set attributes for the "div" that wraps the pagination section - -```php -public function configure(): void -{ - $this->setPaginationWrapperAttributes(['class' => 'text-lg']); -} -``` diff --git a/docs/pagination/styling.md b/docs/pagination/styling.md new file mode 100644 index 000000000..8d047263a --- /dev/null +++ b/docs/pagination/styling.md @@ -0,0 +1,65 @@ +--- +title: Styling +weight: 2 +--- + + +## setPaginationWrapperAttributes + +Used to set attributes for the "div" that wraps the pagination section (typically in the footer) + +```php +public function configure(): void +{ + $this->setPaginationWrapperAttributes(['class' => 'text-lg']); +} +``` + +## setPerPageFieldAttributes +Allows for customisation of the appearance of the "Per Page" dropdown + +Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods. + +### default-colors +Setting to false will disable the default colors for the Per Page dropdown, the default colors are: +Bootstrap: +None + +Tailwind: +border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 + +### default-styling +Setting to false will disable the default styling for the Per Page dropdown, the default styling is: +Bootstrap 4: +form-control + +Bootstrap 5: +form-select + +Tailwind: +block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50 + +```php +public function configure(): void +{ + $this->setPerPageFieldAttributes([ + 'class' => 'border-red-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-red-700 dark:text-white dark:border-red-600', // Add these classes to the dropdown + 'default-colors' => false, // Do not output the default colors + 'default-styles' => true, // Output the default styling + ]); +} +``` + +## setPerPageWrapperAttributes +Allows for customisation of the appearance of the wrapper for the "Per Page" dropdown + +```php +public function configure(): void +{ + $this->setPerPageWrapperAttributes([ + 'class' => 'bg-blue-500 text-black dark:bg-red-700 dark:text-white ', + 'default-colors' => false, // Do not output the default colors + 'default-styles' => true, // Output the default styling + ]); +} +``` diff --git a/resources/views/components/pagination.blade.php b/resources/views/components/pagination.blade.php index 836609b67..2dc417992 100644 --- a/resources/views/components/pagination.blade.php +++ b/resources/views/components/pagination.blade.php @@ -7,49 +7,63 @@ ) @if ($this->isTailwind) -
- @if($this->showPaginationDetails()) - @lang('livewire-tables::Showing') - {{ $this->getRows->firstItem() }} - @lang('livewire-tables::to') - {{ $this->getRows->lastItem() }} - @lang('livewire-tables::of') - - @lang('livewire-tables::results') - @endif -
- @elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('simple')) -- @if($this->showPaginationDetails()) - @lang('livewire-tables::Showing') - {{ $this->getRows->firstItem() }} - @lang('livewire-tables::to') - {{ $this->getRows->lastItem() }} - @endif -
- @elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('cursor')) - @else -- @lang('livewire-tables::Showing') - {{ $this->getRows->count() }} - @lang('livewire-tables::results') -
- @endif -+ @if($this->showPaginationDetails()) + @lang('livewire-tables::Showing') + {{ $this->getRows->firstItem() }} + @lang('livewire-tables::to') + {{ $this->getRows->lastItem() }} + @lang('livewire-tables::of') + + @lang('livewire-tables::results') + @endif +
+ @elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('simple')) ++ @if($this->showPaginationDetails()) + @lang('livewire-tables::Showing') + {{ $this->getRows->firstItem() }} + @lang('livewire-tables::to') + {{ $this->getRows->lastItem() }} + @endif +
+ @elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('cursor')) + @else ++ @lang('livewire-tables::Showing') + {{ $this->getRows->count() }} + @lang('livewire-tables::results') +
@endif +