laravel tabler bootstrap4

Laravel Tabler 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