1. Lời nói đầu

Hiện nay, một dự án mã nguồn mở khá hấp dẫn mang tên là Blade UI Kit đã được ra mắt. Blade UI Kit là một tập hợp các Component mà bạn có thể sử dụng trong Laravel Blade của mình. Nó được tạo ra dành cho Blade - đây là công cụ không còn quá xa lạ với những tín đồ Laravel, nó giúp chúng ta tạo ra những template của Laravel một cách hết sức đơn giản. Về bản chất, đó là một tập hợp các công nghệ được gọi là TALL stack bao gồm Tailwind, Alpine.js, Laravel và Livewire. Đây là một giải pháp phát triển full-stack, được xây dựng bởi các thành viên cộng đồng Laravel.

Mỗi Blade UI Kit component có thể được mở rộng, sửa đổi hoặc ghi đè tùy theo ý muốn để phù hợp với dự án của bạn. Và theo mặc định, Blade UI Kit bao gồm các components như :

• A countdown timer
• Markdown and rich text editors
• An avatar generator
• Form inputs
• Markdown to HTML converter
• Date & Color pickers
• Có thể xem thêm tại Blade UI Kit Documentation

Giờ thì hãy cùng mình tìm hiểu nhé

2. Cài đặt

Lưu ý là requirements của Blade UI Kit cần PHP 7.3 trở lên và Laravel 7.0 trở lên. Trước khi cài đặt một package mới thì nên xóa bộ nhớ cache cấu hình của project:

php artisan config:clear

Sau đó cài đặt package blade-ui-kit bằng cách chạy:

composer require blade-ui-kit/blade-ui-kit

Nếu bạn muốn điều chỉnh bất kỳ điều gì đối với tệp cấu hình blade-ui-kit.php, có thể publish bằng câu lệnh sau:

php artisan vendor:publish --tag=blade-ui-kit-config

Sau khi đã publish thành công, bạn có thể truy cập vào tệp blade-ui-kit.php để custom 1 vài thứ theo ý muốn của bạn, cụ thể như:

• Có thể xoá bỏ hoặc thay đổi lại tên của các component tại option components. Ví dụ mình đổi tên component easy-mde thành editor-markdown như sau:

  <?php return [ 'components' => [ ... 'editor-markdown' => Components\Editors\EasyMDE::class, ... ],
  ];
  

  Giờ thì có thể sử dụng nó trong Blade View của bạn với tên component mới:
  <x-editor-markdown name="about" />

• Đôi khi có thể xảy ra conflict giữa các component của Blade UI Kit với các component của thư viện khác nhau trong project. Để giải quyết vấn đề này, Blade UI Kit đã cho phép thêm prefix vào tên của các Blade UI Kit component. Bạn có thể thực hiện việc này bằng cách thêm option prefix trong tệp cấu hình như sau:

  <?php return [ ... 'prefix' => 'demo', ...
  ];
  

  Giờ thì có thể sử dụng nó trong Blade View của bạn với tên component đó kết hợp với tiền tố là demo:
  <x-demo-input name="search" />
<x-alert class="text-green-100" />

  Blade UI Kit sử dụng CDN từ bất kỳ thư viện bên thứ 3 nào mà một component có thể cần. Để đảm bảo các CDN này được included trong HTML thì bạn có thể sử dụng @bukStyles và @bukScripts directives. Đặt lệnh @bukStyles ngay trước thẻ đóng </head> và sau styles từ các thư viện như Livewire. Đặt lệnh @bukScripts ngay trước thẻ đóng </body> và sau scripts từ các thư viện như Livewire.

  3. Components

  Alert

  Thông thường, mỗi khi chúng ta muốn hiển thị 1 alert được gửi lên từ phía backend với Laravel's session flashing:

  session()->flash('success', 'Settings saved successfully.');
  session()->flash('warning', 'Please confirm your email address.');
  session()->flash('danger', 'Passwords do not match.');
  

  Chúng ta vẫn thường dùng cách như sau:

  ...
  @if (session('alert')) <div role="alert" class="bg-green-700 text-green-100 p-4"> {{ session('alert') }} </div>
  @endif
  ...
  

  Giờ đây với Blade UI Kit thì ta có thể hiển thị alert đó 1 cách đơn giản hơn như sau:

  <x-alert type="success" class="bg-green-700 text-green-100 p-4" />
  <x-alert type="warning" class="bg-yellow-700 text-yellow-100 p-4" />
  <x-alert type="danger" class="bg-red-700 text-red-100 p-4" />
  

  Các bạn có thể xem thêm tại đây.

  Form

  Component này hỗ trợ chúng ta trong việc thiết lập các biểu mẫu đã quá quen thuộc trong Laravel. Theo mặc định, nó đặt phương thức HTTP, CSRF directives và cho phép cú pháp dễ sử dụng hơn thẻ <form> mặc định của HTML. Có thể sử dụng component này như sau:

  <x-form action="http://example.com"> Form fields...
  </x-form>
  

  Component sẽ xuất ra một đoạn HTML tương ứng:

  <form method="POST" action="http://example.com"> <input type="hidden" name="_token" value="..."> <input type="hidden" name="_method" value="POST"> Form fields...
  </form>
  

  Mặc định sẽ đặt method là POST, nếu muốn dùng phương thức khác thì bạn chỉ cần thay đổi thuộc tính method trong thẻ <x-form>.

  Trong trường hợp bạn cần tạo form upload file, bạn chỉ cần thêm thuộc tính has-file vào trong thẻ <x-form> như sau:

  <x-form action="http://example.com" has-files> Form fields...
  </x-form>
  

  Đoạn HTML tương ứng được tạo ra là:

  <form method="POST" action="http://example.com" enctype="multipart/form-data"> <input type="hidden" name="_token" value="..."> <input type="hidden" name="_method" value="POST"> Form fields...
  </form>
  

  Label

  Component này được sử dụng thường xuyên mỗi khi tạo Form. Thông thường chúng ta sẽ dùng đoạn HTML như sau thôi:

  <label for="full_name"> Full name
  </label>
  

  Với Blade UI Kit thì sẽ đơn giản hơn:

  <x-label for="full_name" />
  

  Input

  Nếu bạn muốn tạo ô checkbox, hãy làm như sau:
  <x-checkbox name="remember_me"/>

  Nếu bạn muốn tạo trường nhập email, hãy sử dụng component <x-email />

  Tương tự, sẽ có các component như <x-password />, <x-textarea>,...

  Ngoài ra còn những component khác như:

  • <x-color-picker />: component này được dùng để tích hợp bộ chọn màu vào biểu mẫu của bạn.
  • <x-pikaday />: component này được dùng để tích hợp bộ chọn ngày vào biểu mẫu của bạn. Bằng cách tận dụng Moment.js, bạn có thể chỉ định các định dạng ngày giờ khác nhau.

Editors

Blade UI Kit đã tích hợp sẵn 2 editor là Easy MDE và Trix. Trong đó:

• Easy MDE: component easy-mde cho phép bạn dễ dàng include Markdown editor trong biểu mẫu của mình bằng việc sử dụng thư viện Easy MDE. Đơn giản bạn chỉ cần thêm dòng sau:
  <x-easy-mde name="about"/>

  Bạn cũng có thể tuỳ chỉnh lại editor bằng cách thêm một mảng vào thuộc tính options, ví dụ như:

  <x-easy-mde name="about" :options="['minHeight' => '500px', 'autosave' => 'enabled']" />
  

  Ví dụ trên thực hiện việc tuỳ chỉnh lại độ cao tối thiểu và bật tính năng autosave của editor. Bạn có thể xem thêm nhiều option khác tại đây.

• Trix: component trix cho phép bạn dễ dàng include một text editor đa dạng trong biểu mẫu của mình bằng việc sử dụng thư viện Trix từ Basecamp. Cũng như các component khác, hãy dùng nó như một component tự đóng và truyền name cho nó:
  <x-trix name="about" /> Đoạn HTML được render ra sẽ như sau:

  <div> <input name="about" id="about" value="" type="hidden"> <trix-editor input="about" class="trix-content"></trix-editor>
  </div>
  

  Bạn có thể xem thêm các tuỳ chỉnh khác tại đây.

4. Kết luận

Vậy là chúng ta đã cùng tìm hiểu sơ qua về package Blade UI Kit, ở đây mình mới chỉ liệt kê một số component cơ bản và được sử dụng thường xuyên. Ngoài ra, package này vẫn còn rất nhiều component thú vị và còn cho phép chúng ta tự tạo cho mình những component riêng biệt khác nữa. Họ vẫn tiếp tục phát triển thêm để đem lại những component đa dạng và hữu ích hơn cho chúng ta.

Với package này thì mình hy vọng mọi người có thể xem xét đưa vào sử dụng trong project để có thể rút ngắn được thời gian hoàn thiện HTML cũng như hiệu năng cho phần View Blade của mình.

Cảm ơn mọi người đã dành thời gian theo dõi bài viết này, hãy để lại 1 upvote và follow để theo dõi các bài viết sắp tới của mình nha

Tài liệu tham khảo

https://blade-ui-kit.com/docs/0.x/introduction