laravel tabler bootstrap4

لارافيل تابلر Bootstrap 4

حزمة Laravel 5.8 و6.0 لدمج قالب Tabler وهذه الحزمة متوافقة مع Laravel Mix. حاليًا، يمكن دمج هذه الحزمة بسهولة فقط عند التثبيت الجديد. بالنسبة إلى Laravel >= 7.0، يمكنك استخدام فرع التطوير.

التثبيت المسبق

قبل التثبيت، يجب عليك إنشاء سقالات المصادقة يدويًا

• لارافيل 5.8

php artisan make:auth

• لارافيل >= 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