laravel tabler bootstrap4

Bootstrap Laravel Tabler 4

Paket Laravel 5.8 dan 6.0 untuk mengintegrasikan template Tabler dan paket ini ramah Laravel Mix. Saat ini paket ini dapat diintegrasikan dengan mudah hanya pada instalasi baru. Untuk laravel >= 7.0, Anda dapat menggunakan cabang pengembangan.

Pra-Instalasi

Sebelum menginstal, Anda harus membuat perancah otentikasi secara manual

• untuk Laravel 5.8

php artisan make:auth

• untuk Laravel >= 6.0
  1. Pertama instal paket laravel/ui dari composer

     composer require laravel/ui

  2. Dan kemudian, jalankan kode di bawah ini

     php artisan ui vue --auth

Instalasi

composer require guszandy/laravel-tabler-bootstrap4

Untuk laravel >= 7.0, gunakan ini:

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

Jalankan kode di bawah ini untuk mengimplementasikan template,

php artisan make:tabler

Mari kita lihat apa yang telah kita instal. Pertama pastikan Anda sudah menjalankan perintah php artisan migrate , lalu lakukan

php artisan serve

Biola! situs Laravel menggunakan Tabler sedang berjalan sekarang.

Konfigurasi dan Kustomisasi Tampilan

Konfigurasi

Untuk memublikasikan konfigurasi paket ini ke konfigurasi aplikasi Anda, jalankan kode di bawah ini

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

Tampilan

Untuk mempublikasikan tampilan paket ini sehingga Anda dapat menyesuaikannya sendiri, jalankan kode di bawah ini

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

Langkah Selanjutnya

Pertama-tama, Anda harus memahami cara menggunakan Laravel Mix dan menginstal laravel-mix terbaru.

Tabler memerlukan beberapa paket di npm. Pertama, Anda perlu lari

npm install

Instal paket yang dibutuhkan Tabler dari 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

Jalankan perintah Laravel Mix

npm run development

atau menggunakan production meminimalkan output

npm run production

Kemudian perhatikan baik-baik file-file ini

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

Selamat bereksperimen!

Cara menggunakan komponen dalam paket ini

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. Waspada

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

3. Tombol

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

4. Tab

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