laravel tabler bootstrap4

라라벨 테이블러 부트스트랩 4

Tabler 템플릿을 통합하기 위한 Laravel 5.8 및 6.0 패키지와 이 패키지는 Laravel Mix에 친화적입니다. 현재 이 패키지는 새로 설치할 때만 쉽게 통합할 수 있습니다. laravel >= 7.0의 경우 개발 분기를 사용할 수 있습니다.

사전 설치

설치하기 전에 인증 스캐폴딩을 수동으로 생성해야 합니다.

• 라라벨 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

비올라! Tabler를 사용하는 Laravel 사이트가 현재 실행 중입니다.

구성 및 보기 사용자 정의

구성

이 패키지 구성을 앱 구성에 게시하려면 아래 코드를 실행하세요.

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

npm에서 Tabler에 필요한 패키지를 설치합니다.

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