laravel tabler bootstrap4

Laravel Tabler Bootstrap 4

Laravel 5.8 und 6.0 Paket zur Integration der Tabler-Vorlage und dieses Paket ist Laravel Mix-freundlich. Derzeit kann dieses Paket nur bei einer Neuinstallation problemlos integriert werden. Für Laravel >= 7.0 können Sie Develop Branch verwenden.

Vorinstallation

Vor der Installation müssen Sie das Authentifizierungsgerüst manuell erstellen

• für Laravel 5.8

php artisan make:auth

• für Laravel >= 6,0
  1. Installieren Sie zuerst das Laravel/UI-Paket von Composer

     composer require laravel/ui

  2. Führen Sie dann den folgenden Code aus

     php artisan ui vue --auth

Installation

composer require guszandy/laravel-tabler-bootstrap4

Für Laravel >= 7.0 verwenden Sie Folgendes:

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

Führen Sie den folgenden Code aus, um die Vorlage zu implementieren.

php artisan make:tabler

Mal sehen, was wir installiert haben. Stellen Sie zunächst sicher, dass Sie den Befehl php artisan migrate bereits ausgeführt haben, und führen Sie ihn dann aus

php artisan serve

Viola! Eine Laravel-Site, die Tabler verwendet, läuft gerade.

Konfiguration und Anpassung der Ansichten

Konfig

Um diese Paketkonfiguration in Ihrer App-Konfiguration zu veröffentlichen, führen Sie den folgenden Code aus

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

Ansichten

Um diese Paketansichten zu veröffentlichen, damit Sie sie selbst anpassen können, führen Sie den folgenden Code aus

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

Nächster Schritt

Zunächst sollten Sie verstehen, wie Sie Laravel Mix verwenden und den neuesten Laravel-Mix installieren.

Tabler benötigt ein Paket auf npm. Zuerst müssen Sie laufen

npm install

Installieren Sie das benötigte Tabler-Paket von 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

Führen Sie den Laravel Mix-Befehl aus

npm run development

Oder nutzen Sie production um die Produktion zu minimieren

npm run production

Dann schauen Sie sich diese Dateien genau an

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

Viel Spaß beim Experimentieren!

So verwenden Sie Komponenten in diesem Paket

1. Panel

@ 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. Alarm

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

3. Knopf

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

4. Registerkarten

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