Cambiar el estilo css del paginador de Laravel



Si se trabaja con laravel muchos de los módulos que están creados están casados con bootstrap, este es el caso de proveedor de paginacion de laravel el cual utiliza el estilo de boostrap para que se vea bien los links de las paginas, en este caso se requiere trabajar con SEMANCTIC UI un bonito framework de front-end.

Y para modificar, customizar dicho estilo de paginacion se ejecuta el comando

php artisan vendor:publish --tag=laravel-pagination

Esto creara la carpeta vendor dentro de la carpetas de las vistas y al momento de ejecutar el comando se visualiza lo siguiente en la terminal

Copied Directory [/vendor/laravel/framework/src/Illuminate/Pagination/resources/views] To [/resources/views/vendor/pagination]
Publishing complete


Ahora ya en el editor, yo edite el por default y acomode el codigo del la siguiente manera:

@if ($paginator->hasPages())
    <div class="ui right floated pagination menu">
        {{-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
        <a class="icon item disabled">
          <i class="left chevron icon"></i>
        </a>
        @else
        <a href="{{ $paginator->previousPageUrl() }}" class="icon item">
          <i class="left chevron icon"></i>
        </a>
        @endif

        {{-- Pagination Elements --}}
        @foreach ($elements as $element)
            {{-- "Three Dots" Separator --}}
            @if (is_string($element))
                <a class="item disabled"><span>{{ $element }}</span></a>
            @endif

            {{-- Array Of Links --}}
            @if (is_array($element))
                @foreach ($element as $page => $url)
                    @if ($page == $paginator->currentPage())
                        <a class="item active"><span>{{ $page }}</span></a>
                    @else
                        <a class="item" href="{{ $url }}">{{ $page }}</a>
                    @endif
                @endforeach
            @endif
        @endforeach

        {{-- Next Page Link --}}
        @if ($paginator->hasMorePages())
        <a href="{{ $paginator->nextPageUrl() }}"  class="icon item">
          <i class="right chevron icon"></i>
        </a>
        @else
        <a class="icon item disabled">
          <i class="right chevron icon"></i>
        </a>

        @endif
    </div>
@endif

De esa forma ya tiene el estilo de semactic y se ve de la siguiente manera.

paginacion semactic ui laravel

0 Comentarios