使用MaterialiseCSS进行分页

Question

是否有人使用Materialisecss作为他的laravel项目？ 我想设置分页，但它在视图上看起来不太好。 我怎么能把它搞砸了？

这是代码

控制器

  public function index()
{

    $services=Service::where('flag',1)->paginate(1);
    $categories=Category::all();
    return view('home',compact('services','categories'));
}

刀片

        <div class="row center-align">
        {{$services->links()}}
          </div>

Answer 1

您可以自定义分页视图。默认情况下，它使用Boostrap。查看Docs。

运行php artisan vendor:publish --tag=laravel-pagination将允许您访问可在resources/views/vendor/pagination目录中自定义的视图。

Answer 2

此答案基于Laravel 7和Materialise Css 1.0。假设您的链接是$ cases

<ul class="pagination">
    {{-- Previous Page Link --}}
    @if ($cases->onFirstPage()) 
    <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
    @else
    <li class="waves-effect"><a href="{{ $cases->previousPageUrl() }}"><i class="material-icons">chevron_left</i></a></li>
    @endif

    {{-- Page Number Links --}}
    @for($i=1; $i<=$cases->lastPage(); $i++)
        @if($i==$cases->currentPage())
            <li class="active"><a href="?page={{$i}}">{{$i}}</a></li>
        @else
            <li class="waves-effect"><a href="?page={{$i}}">{{$i}}</a></li>
        @endif
    @endfor

    {{-- Next Page Link --}}
    @if ($cases->hasMorePages())
    <li class="waves-effect"><a href="{{ $cases->nextPageUrl() }}"><i class="material-icons">chevron_right</i></a></li>
    @else
    <li class="disabled"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
    @endif
</ul>