README

Laravel 5.8 和 6.0 包用于集成 Tabler 模板，并且此包与 Laravel Mix 兼容。目前此包只能在全新安装时轻松集成。对于 Laravel >= 7.0，您可以使用 develop 分支。

安装前

在安装之前，您必须手动创建身份验证脚手架

• 对于 Laravel 5.8

php artisan make:auth

• 对于 Laravel >= 6.0
  1. 首先使用 composer 安装 laravel/ui 包

     composer require laravel/ui

  2. 然后，运行以下代码

     php artisan ui vue --auth

安装

composer require guszandy/laravel-tabler-bootstrap4

对于 Laravel >= 7.0，使用以下方法

composer require guszandy/laravel-tabler-bootstrap4:dev-develop

运行以下代码以实现模板

php artisan make:tabler

让我们看看我们安装了什么。首先，请确保您已经运行了 php artisan migrate 命令，然后进行以下操作

php artisan serve

哇！一个使用 Tabler 的 Laravel 网站现在正在运行。

配置和视图自定义

配置

要发布此包的配置到您的应用配置，运行以下代码

php artisan vendor:publish --provider="GusZandy\Tabler\Providers\AppServiceProvider" --tag="config"

视图

要发布此包的视图以便您自行自定义，运行以下代码

php artisan vendor:publish --provider="GusZandy\Tabler\Providers\AppServiceProvider" --tag="views"

下一步

首先，您应该了解如何使用 Laravel Mix 并安装最新的 laravel-mix。

Tabler 需要 npm 上的某些包。首先，您需要运行

npm install

从 npm 安装 Tabler 需要的包

npm install --save-dev bootstrap bootstrap-sass popper.js chart.js d3 font-awesome jquery-circle-progress jvectormap moment requirejs select2 select2-bootstrap-theme selectize sparkline tabler-ui tablesorter bootstrap-datepicker eonasdan-bootstrap-datetimepicker @ttskch/select2-bootstrap4-theme

运行 Laravel Mix 命令

npm run development

或使用 production 最小化输出

npm run production

然后仔细查看这些文件

• webpack.mix.js
• resources/assets/js/tabler.js
• resources/assets/sass/tabler.scss

祝您实验愉快！

如何使用此包中的组件

1. 面板

@component('tabler::components.panel', [ 'title' => 'Welcome' ])
  @slot('tools')
      <a href="#" class="card-options-collapse" data-toggle="card-collapse"><i
              class="fe fe-chevron-up"></i></a>
      <a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
  @endslot
  You are logged in!
@endcomponent

2. 警报

@component('tabler::components.alert', [ 'type' => 'info' ])
  @slot('text')
     This is an alert component.
  @endslot
@endcomponent

3. 按钮

@component('tabler::components.button', [ 'type' => 'info', 'url' => 'www.google.com' ])
  @slot('text')
     This is a button component.
  @endslot
@endcomponent

4. 标签页

@component('tabler::components.tabs', [ 'nav_tabs' => 'info' ])
  @slot('tab_panes')
     This is a tab component.
  @endslot
@endcomponent