Skip to content

Commit aa3429e

Browse files
committed
add more details about components
1 parent 3564ac5 commit aa3429e

File tree

1 file changed

+50
-3
lines changed

1 file changed

+50
-3
lines changed

README.md

Lines changed: 50 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
Kirby Blade use Laravel `illuminate/view` 11.x package and compatible with Kirby 4.
1111

12-
This package enables [Laravel Blade](https://laravel.com/docs/9.x/blade) for your own Kirby applications.
12+
This package enables [Laravel Blade](https://laravel.com/docs/11.x/blade) for your own Kirby applications.
1313

1414
## Installation
1515

@@ -31,9 +31,9 @@ According to Laravel Blade documentation is:
3131
3232
## Usage
3333

34-
You can use the power of Blade like [Layouts](https://laravel.com/docs/9.x/blade#building-layouts), [Forms](https://laravel.com/docs/9.x/blade#forms), [Sub-Views](https://laravel.com/docs/9.x/blade#including-subviews), [Components](https://laravel.com/docs/9.x/blade#components), [Directives](https://laravel.com/docs/9.x/blade#blade-directives) and your custom if statements.
34+
You can use the power of Blade like [Layouts](https://laravel.com/docs/11.x/blade#building-layouts), [Forms](https://laravel.com/docs/11.x/blade#forms), [Sub-Views](https://laravel.com/docs/11.x/blade#including-subviews), [Components](https://laravel.com/docs/11.x/blade#components), [Directives](https://laravel.com/docs/11.x/blade#blade-directives) and your custom if statements.
3535

36-
All the documentation about Laravel Blade is in the [official documentation](https://laravel.com/docs/9.x/blade).
36+
All the documentation about Laravel Blade is in the [official documentation](https://laravel.com/docs/11.x/blade).
3737

3838
## Options
3939

@@ -144,6 +144,53 @@ After declaration, you can use it like:
144144
@endlogged
145145
```
146146

147+
### Anonymous components
148+
149+
To define an anonymous component, you only need to place a Blade template within your `site/templates/components` directory. To render an alert component you have to define `site/templates/components/alert.blade.php` and the component can be rendered like:
150+
151+
```html
152+
<x-alert />
153+
```
154+
155+
More about anonymous components in the [official Laravel Blade documentation](https://laravel.com/docs/11.x/blade#anonymous-components).
156+
157+
### Class based components
158+
159+
For class based components, the app namespace must be added to your project `composer.json`.
160+
161+
```json
162+
{
163+
"autoload": {
164+
"psr-4": {
165+
"App\\": "app/"
166+
}
167+
}
168+
}
169+
```
170+
171+
The class must be placed in the `site/components` directory and will be autoloaded by the package.
172+
173+
A button class could look like:
174+
175+
```php
176+
<?php
177+
178+
namespace App\View\Components;
179+
180+
use Illuminate\Support\Facades\View;
181+
use Illuminate\View\Component;
182+
183+
class Button extends Component
184+
{
185+
public function render()
186+
{
187+
return View::make('components.button');
188+
}
189+
}
190+
```
191+
192+
The blade file of the button class should be placed in the `site/templates/components/button.blade.php` directory.
193+
147194
### Hook
148195

149196
For use cases such as HTML minification, there's a custom hook for manipulating rendered HTML output:

0 commit comments

Comments
 (0)