laravel tabler bootstrap4

Laravel Tabler บูทสแตรป 4

แพ็คเกจ Laravel 5.8 และ 6.0 สำหรับการรวมเทมเพลต Tabler และแพ็คเกจนี้เป็นมิตรกับ Laravel Mix ปัจจุบันแพ็คเกจนี้สามารถรวมเข้ากับการติดตั้งใหม่ได้อย่างง่ายดายเท่านั้น สำหรับ laravel >= 7.0 คุณสามารถใช้ Develop Branch ได้

ก่อนการติดตั้ง

ก่อนการติดตั้ง คุณต้องสร้างโครงการรับรองความถูกต้องด้วยตนเอง

• สำหรับลาร์ราเวล 5.8

php artisan make:auth

• สำหรับ Laravel >= 6.0
  1. ขั้นแรกให้ติดตั้งแพ็คเกจ 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

วิโอลา! ไซต์ Laravel ที่ใช้ Tabler กำลังทำงานอยู่ในขณะนี้

การกำหนดค่าและการปรับแต่งมุมมอง

การกำหนดค่า

หากต้องการเผยแพร่การกำหนดค่าแพ็คเกจนี้ไปยังการกำหนดค่าแอปของคุณ ให้เรียกใช้โค้ดนี้ด้านล่าง

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