guszandy / laravel-tabler-bootstrap4
Laravel Package for integrating Tabler template and this package is Laravel Mix friendly.
Installs: 814
Dependents: 0
Suggesters: 0
Security: 0
Stars: 32
Watchers: 3
Forks: 6
Open Issues: 2
Language:CSS
Type:package
Requires
- php: ^7.1.3
- laravel/framework: ^5.5||^6.0
This package is auto-updated.
Last update: 2024-10-11 00:50:00 UTC
README
Laravel 5.8 and 6.0 Package for integrating Tabler template and this package is Laravel Mix friendly. Currently this package can be integrated easily only on fresh installation. For laravel >= 7.0, you can use develop branch.
Pre-Installation
Before install, you must create the authentication scaffolding manually
- for Laravel 5.8
php artisan make:auth
- for Laravel >= 6.0
- First install laravel/ui package from composer
composer require laravel/ui
- And then, run code below
php artisan ui vue --auth
- First install laravel/ui package from composer
Installation
composer require guszandy/laravel-tabler-bootstrap4
For laravel >= 7.0, use this:
composer require guszandy/laravel-tabler-bootstrap4:dev-develop
Run this code below to implement the template,
php artisan make:tabler
Let's see what we've installed. First, make sure that you've already ran php artisan migrate
command, then do
php artisan serve
Viola! a Laravel site using Tabler is running right now.
Configuration and Views Customization
Config
To publish this package config to your app config, run this code below
php artisan vendor:publish --provider="GusZandy\Tabler\Providers\AppServiceProvider" --tag="config"
Views
To publish this package views so you can customize on your own, run this code below
php artisan vendor:publish --provider="GusZandy\Tabler\Providers\AppServiceProvider" --tag="views"
Next Step
First of all, you should understand how to use Laravel Mix and install latest laravel-mix.
Tabler need some package on npm. First you need to run
npm install
Install Tabler needed package from 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
Run Laravel Mix command
npm run development
or use production
minimize output
npm run production
Then have a good look on these files
webpack.mix.js
resources/assets/js/tabler.js
resources/assets/sass/tabler.scss
Happy experimenting!
How to use components in this package
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. Alert
@component('tabler::components.alert', [ 'type' => 'info' ]) @slot('text') This is an alert component. @endslot @endcomponent
3. Button
@component('tabler::components.button', [ 'type' => 'info', 'url' => 'www.google.com' ]) @slot('text') This is a button component. @endslot @endcomponent
4. Tabs
@component('tabler::components.tabs', [ 'nav_tabs' => 'info' ]) @slot('tab_panes') This is a tab component. @endslot @endcomponent