laravel tabler bootstrap4

Laravel Tabler ブートストラップ 4

Tabler テンプレートを統合するための Laravel 5.8 および 6.0 パッケージ。このパッケージは 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

Tabler に必要なパッケージを npm からインストールする

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