laravel tabler bootstrap4

Laravel Tabler Bootstrap 4

Pacote Laravel 5.8 e 6.0 para integração do modelo Tabler e este pacote é compatível com Laravel Mix. Atualmente este pacote pode ser integrado facilmente apenas em uma nova instalação. Para laravel >= 7.0, você pode usar o branch de desenvolvimento.

Pré-instalação

Antes da instalação, você deve criar o andaime de autenticação manualmente

• para Laravel 5.8

php artisan make:auth

• para Laravel >= 6,0
  1. Primeiro instale o pacote laravel/ui do compositor

     composer require laravel/ui

  2. E então, execute o código abaixo

     php artisan ui vue --auth

Instalação

composer require guszandy/laravel-tabler-bootstrap4

Para laravel >= 7.0, use isto:

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

Execute este código abaixo para implementar o modelo,

php artisan make:tabler

Vamos ver o que instalamos. Primeiro, certifique-se de que você já executou o comando php artisan migrate , então faça

php artisan serve

Viola! um site Laravel usando Tabler está sendo executado agora.

Personalização de configuração e visualizações

Configuração

Para publicar esta configuração do pacote na configuração do seu aplicativo, execute este código abaixo

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

Visualizações

Para publicar as visualizações deste pacote para que você possa personalizar por conta própria, execute este código abaixo

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

Próxima etapa

Primeiro de tudo, você deve entender como usar o Laravel Mix e instalar o laravel-mix mais recente.

Tabler precisa de algum pacote no npm. Primeiro você precisa correr

npm install

Instale o pacote necessário do Tabler do 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

Execute o comando Laravel Mix

npm run development

ou usar production minimizar a produção

npm run production

Então dê uma boa olhada nesses arquivos

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

Boas experiências!

Como usar componentes neste pacote

1. Painel

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

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

3. Botão

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

4. Guias

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