laravel tabler bootstrap4

Laravel Tabler Bootstrap4

Package Laravel 5.8 et 6.0 pour l'intégration du modèle Tabler et ce package est compatible avec Laravel Mix. Actuellement, ce package ne peut être intégré facilement que sur une nouvelle installation. Pour laravel >= 7.0, vous pouvez utiliser la branche de développement.

Pré-installation

Avant l'installation, vous devez créer manuellement l'échafaudage d'authentification

• pour Laravel 5.8

php artisan make:auth

• pour Laravel >= 6.0
  1. Installez d'abord le package laravel/ui à partir du compositeur

     composer require laravel/ui

  2. Et puis, exécutez le code ci-dessous

     php artisan ui vue --auth

Installation

composer require guszandy/laravel-tabler-bootstrap4

Pour Laravel >= 7.0, utilisez ceci :

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

Exécutez ce code ci-dessous pour implémenter le modèle,

php artisan make:tabler

Voyons ce que nous avons installé. Tout d’abord, assurez-vous que vous avez déjà exécuté la commande php artisan migrate , puis faites

php artisan serve

Alto! un site Laravel utilisant Tabler est actuellement en cours d'exécution.

Personnalisation de la configuration et des vues

Configuration

Pour publier cette configuration de package dans la configuration de votre application, exécutez ce code ci-dessous

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

Vues

Pour publier les vues de ce package afin que vous puissiez les personnaliser vous-même, exécutez ce code ci-dessous

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

Étape suivante

Tout d'abord, vous devez comprendre comment utiliser Laravel Mix et installer le dernier laravel-mix.

Tabler a besoin d'un package sur npm. Vous devez d'abord courir

npm install

Installer le package nécessaire à Tabler à partir de 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

Exécuter la commande Laravel Mix

npm run development

ou utiliser production pour minimiser la production

npm run production

Alors regardez bien ces fichiers

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

Bonne expérimentation !

Comment utiliser les composants de ce package

1. Panneau

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

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

3. Bouton

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

4. Onglets

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