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