laravel tabler bootstrap4

Laravel Tabler Bootstrap 4

Laravel 5.8 和 6.0 用于集成 Tabler 模板的包，该包对 Laravel Mix 友好。目前，该软件包只能在全新安装时轻松集成。对于 laravel >= 7.0，您可以使用开发分支。

预安装

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

• 对于 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