rblade 0.3.0 → 0.5.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +15 -0
- data/LICENSE.md +24 -0
- data/README.md +311 -864
- data/TODO.md +2 -0
- data/lib/rblade/compiler/compiles_components.rb +29 -11
- data/lib/rblade/compiler/compiles_echos.rb +4 -4
- data/lib/rblade/compiler/compiles_ruby.rb +1 -1
- data/lib/rblade/compiler/compiles_statements.rb +15 -1
- data/lib/rblade/compiler/compiles_verbatim.rb +29 -0
- data/lib/rblade/compiler/statements/compiles_conditionals.rb +26 -0
- data/lib/rblade/compiler/statements/compiles_html_attributes.rb +21 -0
- data/lib/rblade/compiler/statements/compiles_loops.rb +6 -22
- data/lib/rblade/compiler/statements/compiles_once.rb +57 -0
- data/lib/rblade/compiler/statements/compiles_props.rb +23 -4
- data/lib/rblade/compiler/statements/compiles_stacks.rb +4 -4
- data/lib/rblade/compiler/tokenizes_statements.rb +17 -11
- data/lib/rblade/compiler.rb +12 -1
- data/lib/rblade/helpers/attributes_manager.rb +7 -1
- data/lib/rblade/helpers/class_manager.rb +4 -0
- data/lib/rblade/helpers/html_string.rb +4 -0
- data/lib/rblade/helpers/slot_manager.rb +23 -0
- data/lib/rblade/helpers/stack_manager.rb +4 -0
- data/lib/rblade/helpers/style_manager.rb +4 -0
- data/lib/rblade/rails_template.rb +9 -5
- data/rblade.gemspec +3 -3
- metadata +12 -4
data/README.md
CHANGED
@@ -5,45 +5,8 @@
|
|
5
5
|
- [Displaying Data](#displaying-data)
|
6
6
|
- [HTML Entity Encoding](#html-entity-encoding)
|
7
7
|
- [Blade and JavaScript Frameworks](#blade-and-javascript-frameworks)
|
8
|
-
|
9
|
-
|
10
|
-
- [Switch Statements](#switch-statements)
|
11
|
-
- [Loops](#loops)
|
12
|
-
- [The Loop Variable](#the-loop-variable)
|
13
|
-
- [Conditional Classes](#conditional-classes)
|
14
|
-
- [Additional Attributes](#additional-attributes)
|
15
|
-
- [Including Subviews](#including-subviews)
|
16
|
-
- [The `@once` Directive](#the-once-directive)
|
17
|
-
- [Raw PHP](#raw-php)
|
18
|
-
- [Comments](#comments)
|
19
|
-
- [Components](#components)
|
20
|
-
- [Rendering Components](#rendering-components)
|
21
|
-
- [Passing Data to Components](#passing-data-to-components)
|
22
|
-
- [Component Attributes](#component-attributes)
|
23
|
-
- [Reserved Keywords](#reserved-keywords)
|
24
|
-
- [Slots](#slots)
|
25
|
-
- [Inline Component Views](#inline-component-views)
|
26
|
-
- [Dynamic Components](#dynamic-components)
|
27
|
-
- [Manually Registering Components](#manually-registering-components)
|
28
|
-
- [Anonymous Components](#anonymous-components)
|
29
|
-
- [Anonymous Index Components](#anonymous-index-components)
|
30
|
-
- [Data Properties / Attributes](#data-properties-attributes)
|
31
|
-
- [Accessing Parent Data](#accessing-parent-data)
|
32
|
-
- [Anonymous Components Paths](#anonymous-component-paths)
|
33
|
-
- [Building Layouts](#building-layouts)
|
34
|
-
- [Layouts Using Components](#layouts-using-components)
|
35
|
-
- [Layouts Using Template Inheritance](#layouts-using-template-inheritance)
|
36
|
-
- [Forms](#forms)
|
37
|
-
- [CSRF Field](#csrf-field)
|
38
|
-
- [Method Field](#method-field)
|
39
|
-
- [Validation Errors](#validation-errors)
|
40
|
-
- [Stacks](#stacks)
|
41
|
-
- [Service Injection](#service-injection)
|
42
|
-
- [Rendering Inline Blade Templates](#rendering-inline-blade-templates)
|
43
|
-
- [Rendering Blade Fragments](#rendering-blade-fragments)
|
44
|
-
- [Extending Blade](#extending-blade)
|
45
|
-
- [Custom Echo Handlers](#custom-echo-handlers)
|
46
|
-
- [Custom If Statements](#custom-if-statements)
|
8
|
+
|
9
|
+
**TODO redo TOC**
|
47
10
|
|
48
11
|
<a name="introduction"></a>
|
49
12
|
## Introduction
|
@@ -68,9 +31,9 @@ Hello, {{ name }}.
|
|
68
31
|
```
|
69
32
|
|
70
33
|
> [!NOTE]
|
71
|
-
> RBlade's `{{ }}`
|
34
|
+
> RBlade's `{{ }}` print statements are automatically sent through Rails' `h` function to prevent XSS attacks.
|
72
35
|
|
73
|
-
You are not limited to displaying the contents of the variables passed to the view. You may also print the results of any Ruby function. In fact, you can put any Ruby code you wish inside of a
|
36
|
+
You are not limited to displaying the contents of the variables passed to the view. You may also print the results of any Ruby function. In fact, you can put any Ruby code you wish inside of a RBlade print directive:
|
74
37
|
|
75
38
|
```rblade
|
76
39
|
The current UNIX timestamp is {{ Time.now.to_i }}.
|
@@ -114,9 +77,7 @@ The `@` symbol may also be used to escape RBlade directives:
|
|
114
77
|
<a name="the-at-verbatim-directive"></a>
|
115
78
|
#### The `@verbatim` Directive
|
116
79
|
|
117
|
-
|
118
|
-
|
119
|
-
If you are displaying JavaScript variables in a large portion of your template, you may wrap the HTML in the `@verbatim` directive so that you do not have to prefix each Blade echo statement with an `@` symbol:
|
80
|
+
If you are displaying JavaScript variables in a large portion of your template, you may wrap the HTML in the `@verbatim` directive so that you do not have to prefix each Blade print directive with an `@` symbol:
|
120
81
|
|
121
82
|
```rblade
|
122
83
|
@verbatim
|
@@ -127,16 +88,19 @@ If you are displaying JavaScript variables in a large portion of your template,
|
|
127
88
|
```
|
128
89
|
|
129
90
|
<a name="blade-directives"></a>
|
130
|
-
##
|
91
|
+
## RBlade Directives
|
92
|
+
|
93
|
+
In addition to template inheritance and displaying data, RBlade also provides convenient shortcuts for common Ruby control structures, such as conditional statements and loops. These shortcuts provide a very clean, terse way of working with Ruby control structures while also remaining familiar to their ruby counterparts.
|
131
94
|
|
132
|
-
|
95
|
+
> [!NOTE]
|
96
|
+
> RBlade directives are case insensitive and ignore underscores, so depending on your preference, all of `@endif`, `@endIf` and `@end_if` are identical.
|
133
97
|
|
134
98
|
<a name="if-statements"></a>
|
135
99
|
### If Statements
|
136
100
|
|
137
101
|
You may construct `if` statements using the `@if`, `@elseif`, `@else`, `@endif`, `@unless`, and `@endunless` directives. These directives function identically to their Ruby counterparts:
|
138
102
|
|
139
|
-
```
|
103
|
+
```rblade
|
140
104
|
@unless(records.nil?)
|
141
105
|
@if (records.count === 1)
|
142
106
|
I have one record!
|
@@ -150,7 +114,7 @@ You may construct `if` statements using the `@if`, `@elseif`, `@else`, `@endif`,
|
|
150
114
|
|
151
115
|
In addition to the conditional directives already discussed, the `@isset` and `@empty` directives may be used as convenient shortcuts for their respective PHP functions:
|
152
116
|
**TODO add nil? directive?**
|
153
|
-
```
|
117
|
+
```rblade
|
154
118
|
@isset($records)
|
155
119
|
// $records is defined and is not null...
|
156
120
|
@endisset
|
@@ -165,7 +129,7 @@ In addition to the conditional directives already discussed, the `@isset` and `@
|
|
165
129
|
**TODO add authentication directives?**
|
166
130
|
The `@auth` and `@guest` directives may be used to quickly determine if the current user is [authenticated](/docs/{{version}}/authentication) or is a guest:
|
167
131
|
|
168
|
-
```
|
132
|
+
```rblade
|
169
133
|
@auth
|
170
134
|
// The user is authenticated...
|
171
135
|
@endauth
|
@@ -177,7 +141,7 @@ The `@auth` and `@guest` directives may be used to quickly determine if the curr
|
|
177
141
|
|
178
142
|
If needed, you may specify the authentication guard that should be checked when using the `@auth` and `@guest` directives:
|
179
143
|
|
180
|
-
```
|
144
|
+
```rblade
|
181
145
|
@auth('admin')
|
182
146
|
// The user is authenticated...
|
183
147
|
@endauth
|
@@ -189,10 +153,10 @@ If needed, you may specify the authentication guard that should be checked when
|
|
189
153
|
|
190
154
|
<a name="environment-directives"></a>
|
191
155
|
#### Environment Directives
|
192
|
-
|
156
|
+
|
193
157
|
You may check if the application is running in the production environment using the `@production` directive:
|
194
158
|
|
195
|
-
```
|
159
|
+
```rblade
|
196
160
|
@production
|
197
161
|
// Production specific content...
|
198
162
|
@endproduction
|
@@ -200,7 +164,7 @@ You may check if the application is running in the production environment using
|
|
200
164
|
|
201
165
|
Or, you may determine if the application is running in a specific environment using the `@env` directive:
|
202
166
|
|
203
|
-
```
|
167
|
+
```rblade
|
204
168
|
@env('staging')
|
205
169
|
// The application is running in "staging"...
|
206
170
|
@endenv
|
@@ -215,7 +179,7 @@ Or, you may determine if the application is running in a specific environment us
|
|
215
179
|
**TODO add sessuib directives**
|
216
180
|
The `@session` directive may be used to determine if a [session](/docs/{{version}}/session) value exists. If the session value exists, the template contents within the `@session` and `@endsession` directives will be evaluated. Within the `@session` directive's contents, you may echo the `$value` variable to display the session value:
|
217
181
|
|
218
|
-
```
|
182
|
+
```rblade
|
219
183
|
@session('status')
|
220
184
|
<div class="p-4 bg-green-100">
|
221
185
|
{{ $value }}
|
@@ -228,7 +192,7 @@ The `@session` directive may be used to determine if a [session](/docs/{{version
|
|
228
192
|
|
229
193
|
Case statements can be constructed using the `@case`, `@when`, `@else` and `@endcase` directives:
|
230
194
|
|
231
|
-
```
|
195
|
+
```rblade
|
232
196
|
@case(i)
|
233
197
|
@when(1)
|
234
198
|
First case...
|
@@ -242,13 +206,14 @@ Case statements can be constructed using the `@case`, `@when`, `@else` and `@end
|
|
242
206
|
<a name="loops"></a>
|
243
207
|
### Loops
|
244
208
|
|
245
|
-
In addition to conditional statements, RBlade provides simple directives for working with Ruby's loop structures
|
209
|
+
In addition to conditional statements, RBlade provides simple directives for working with Ruby's loop structures:
|
246
210
|
|
247
|
-
```
|
211
|
+
```rblade
|
248
212
|
@for (i in 0...10)
|
249
213
|
The current value is {{ i }}
|
250
214
|
@endfor
|
251
215
|
|
216
|
+
{{-- Compiles to users.each do |user| ... --}}
|
252
217
|
@each (user in users)
|
253
218
|
<p>This is user {{ user.id }}</p>
|
254
219
|
@endeach
|
@@ -270,15 +235,12 @@ In addition to conditional statements, RBlade provides simple directives for wor
|
|
270
235
|
@endwhile
|
271
236
|
```
|
272
237
|
|
273
|
-
|
274
|
-
> While iterating through a `foreach` loop, you may use the [loop variable](#the-loop-variable) to gain valuable information about the loop, such as whether you are in the first or last iteration through the loop.
|
275
|
-
|
276
|
-
When using loops you may also skip the current iteration or end the loop using the `@next` and `@break` directives:
|
238
|
+
When using loops you can also skip the current iteration or end the loop using the `@next` and `@break` directives:
|
277
239
|
|
278
|
-
```
|
240
|
+
```rblade
|
279
241
|
for (user in users)
|
280
242
|
@if (user.type == 1)
|
281
|
-
@
|
243
|
+
@next
|
282
244
|
@endif
|
283
245
|
|
284
246
|
<li>{{ user.name }}</li>
|
@@ -291,14 +253,13 @@ for (user in users)
|
|
291
253
|
|
292
254
|
You may also include the continuation or break condition within the directive declaration:
|
293
255
|
|
294
|
-
|
295
|
-
|
296
|
-
@
|
297
|
-
@continue($user->type == 1)
|
256
|
+
```rblade
|
257
|
+
@foreach (user in users)
|
258
|
+
@next(user.type == 1)
|
298
259
|
|
299
260
|
<li>{{ $user->name }}</li>
|
300
261
|
|
301
|
-
@break(
|
262
|
+
@break(user.number == 5)
|
302
263
|
@endforeach
|
303
264
|
```
|
304
265
|
|
@@ -307,7 +268,7 @@ You may also include the continuation or break condition within the directive de
|
|
307
268
|
**TODO can/should we add this?**
|
308
269
|
While iterating through a `foreach` loop, a `$loop` variable will be available inside of your loop. This variable provides access to some useful bits of information such as the current loop index and whether this is the first or last iteration through the loop:
|
309
270
|
|
310
|
-
```
|
271
|
+
```rblade
|
311
272
|
@foreach ($users as $user)
|
312
273
|
@if ($loop->first)
|
313
274
|
This is the first iteration.
|
@@ -323,7 +284,7 @@ While iterating through a `foreach` loop, a `$loop` variable will be available i
|
|
323
284
|
|
324
285
|
If you are in a nested loop, you may access the parent loop's `$loop` variable via the `parent` property:
|
325
286
|
|
326
|
-
```
|
287
|
+
```rblade
|
327
288
|
@foreach ($users as $user)
|
328
289
|
@foreach ($user->posts as $post)
|
329
290
|
@if ($loop->parent->first)
|
@@ -352,40 +313,38 @@ The `$loop` variable also contains a variety of other useful properties:
|
|
352
313
|
|
353
314
|
</div>
|
354
315
|
|
355
|
-
** TODO from here **
|
356
|
-
|
357
316
|
<a name="conditional-classes"></a>
|
358
317
|
### Conditional Classes & Styles
|
359
318
|
|
360
|
-
The `@class` directive conditionally
|
319
|
+
The `@class` directive conditionally adds CSS classes. The directive accepts a `Hash` of classes where the key contains the class or classes you wish to add, and the value is a boolean expression:
|
361
320
|
|
362
|
-
```
|
363
|
-
@
|
364
|
-
|
365
|
-
|
366
|
-
@
|
367
|
-
|
368
|
-
<span @class(
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
|
321
|
+
```rblade
|
322
|
+
@ruby
|
323
|
+
isActive = false;
|
324
|
+
hasError = true;
|
325
|
+
@endruby
|
326
|
+
|
327
|
+
<span @class({
|
328
|
+
"p-4": true,
|
329
|
+
"font-bold": isActive,
|
330
|
+
"text-gray-500": !isActive,
|
331
|
+
"bg-red": hasError,
|
332
|
+
})></span>
|
374
333
|
|
375
334
|
<span class="p-4 text-gray-500 bg-red"></span>
|
376
335
|
```
|
377
336
|
|
378
337
|
Likewise, the `@style` directive may be used to conditionally add inline CSS styles to an HTML element:
|
379
338
|
|
380
|
-
```
|
381
|
-
@
|
382
|
-
|
383
|
-
@
|
339
|
+
```rblade
|
340
|
+
@ruby
|
341
|
+
isActive = true;
|
342
|
+
@endruby
|
384
343
|
|
385
|
-
<span @style(
|
386
|
-
|
387
|
-
|
388
|
-
|
344
|
+
<span @style({
|
345
|
+
"background-color: red": true,
|
346
|
+
"font-weight: bold" => isActive,
|
347
|
+
})></span>
|
389
348
|
|
390
349
|
<span style="background-color: red; font-weight: bold;"></span>
|
391
350
|
```
|
@@ -393,157 +352,107 @@ Likewise, the `@style` directive may be used to conditionally add inline CSS sty
|
|
393
352
|
<a name="additional-attributes"></a>
|
394
353
|
### Additional Attributes
|
395
354
|
|
396
|
-
For convenience, you may use the `@checked` directive to easily indicate if a given HTML checkbox input is "checked". This directive will
|
355
|
+
For convenience, you may use the `@checked` directive to easily indicate if a given HTML checkbox input is "checked". This directive will print `checked` if the provided condition evaluates to `true`:
|
397
356
|
|
398
|
-
```
|
357
|
+
```rblade
|
399
358
|
<input type="checkbox"
|
400
|
-
|
401
|
-
|
402
|
-
|
359
|
+
name="active"
|
360
|
+
value="active"
|
361
|
+
@checked(user.active)) />
|
403
362
|
```
|
404
363
|
|
405
364
|
Likewise, the `@selected` directive may be used to indicate if a given select option should be "selected":
|
406
365
|
|
407
|
-
```
|
366
|
+
```rblade
|
408
367
|
<select name="version">
|
409
|
-
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
368
|
+
@each (version in product.versions)
|
369
|
+
<option value="{{ version }}" @selected(version == selectedVersion)>
|
370
|
+
{{ version }}
|
371
|
+
</option>
|
372
|
+
@endeach
|
414
373
|
</select>
|
415
374
|
```
|
416
375
|
|
417
376
|
Additionally, the `@disabled` directive may be used to indicate if a given element should be "disabled":
|
418
377
|
|
419
|
-
```
|
420
|
-
<button type="submit" @disabled(
|
378
|
+
```rblade
|
379
|
+
<button type="submit" @disabled(isDisabled)>Submit</button>
|
421
380
|
```
|
422
381
|
|
423
382
|
Moreover, the `@readonly` directive may be used to indicate if a given element should be "readonly":
|
424
383
|
|
425
|
-
```
|
384
|
+
```rblade
|
426
385
|
<input type="email"
|
427
|
-
|
428
|
-
|
429
|
-
|
386
|
+
name="email"
|
387
|
+
value="email@laravel.com"
|
388
|
+
@readonly(!user.isAdmin) />
|
430
389
|
```
|
431
390
|
|
432
391
|
In addition, the `@required` directive may be used to indicate if a given element should be "required":
|
433
392
|
|
434
|
-
```
|
393
|
+
```rblade
|
435
394
|
<input type="text"
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
```
|
440
|
-
|
441
|
-
<a name="including-subviews"></a>
|
442
|
-
### Including Subviews
|
443
|
-
|
444
|
-
> [!NOTE]
|
445
|
-
> While you're free to use the `@include` directive, Blade [components](#components) provide similar functionality and offer several benefits over the `@include` directive such as data and attribute binding.
|
446
|
-
|
447
|
-
Blade's `@include` directive allows you to include a Blade view from within another view. All variables that are available to the parent view will be made available to the included view:
|
448
|
-
|
449
|
-
```blade
|
450
|
-
<div>
|
451
|
-
@include('shared.errors')
|
452
|
-
|
453
|
-
<form>
|
454
|
-
<!-- Form Contents -->
|
455
|
-
</form>
|
456
|
-
</div>
|
457
|
-
```
|
458
|
-
|
459
|
-
Even though the included view will inherit all data available in the parent view, you may also pass an array of additional data that should be made available to the included view:
|
460
|
-
|
461
|
-
```blade
|
462
|
-
@include('view.name', ['status' => 'complete'])
|
463
|
-
```
|
464
|
-
|
465
|
-
If you attempt to `@include` a view which does not exist, Laravel will throw an error. If you would like to include a view that may or may not be present, you should use the `@includeIf` directive:
|
466
|
-
|
467
|
-
```blade
|
468
|
-
@includeIf('view.name', ['status' => 'complete'])
|
469
|
-
```
|
470
|
-
|
471
|
-
If you would like to `@include` a view if a given boolean expression evaluates to `true` or `false`, you may use the `@includeWhen` and `@includeUnless` directives:
|
472
|
-
|
473
|
-
```blade
|
474
|
-
@includeWhen($boolean, 'view.name', ['status' => 'complete'])
|
475
|
-
|
476
|
-
@includeUnless($boolean, 'view.name', ['status' => 'complete'])
|
477
|
-
```
|
478
|
-
|
479
|
-
To include the first view that exists from a given array of views, you may use the `includeFirst` directive:
|
480
|
-
|
481
|
-
```blade
|
482
|
-
@includeFirst(['custom.admin', 'admin'], ['status' => 'complete'])
|
483
|
-
```
|
484
|
-
|
485
|
-
> [!WARNING]
|
486
|
-
> You should avoid using the `__DIR__` and `__FILE__` constants in your Blade views, since they will refer to the location of the cached, compiled view.
|
487
|
-
|
488
|
-
<a name="rendering-views-for-collections"></a>
|
489
|
-
#### Rendering Views for Collections
|
490
|
-
|
491
|
-
You may combine loops and includes into one line with Blade's `@each` directive:
|
492
|
-
|
493
|
-
```blade
|
494
|
-
@each('view.name', $jobs, 'job')
|
395
|
+
name="title"
|
396
|
+
value="title"
|
397
|
+
@required(user.isAdmin) />
|
495
398
|
```
|
496
399
|
|
497
|
-
The `@each` directive's first argument is the view to render for each element in the array or collection. The second argument is the array or collection you wish to iterate over, while the third argument is the variable name that will be assigned to the current iteration within the view. So, for example, if you are iterating over an array of `jobs`, typically you will want to access each job as a `job` variable within the view. The array key for the current iteration will be available as the `key` variable within the view.
|
498
|
-
|
499
|
-
You may also pass a fourth argument to the `@each` directive. This argument determines the view that will be rendered if the given array is empty.
|
500
|
-
|
501
|
-
```blade
|
502
|
-
@each('view.name', $jobs, 'job', 'view.empty')
|
503
|
-
```
|
504
|
-
|
505
|
-
> [!WARNING]
|
506
|
-
> Views rendered via `@each` do not inherit the variables from the parent view. If the child view requires these variables, you should use the `@foreach` and `@include` directives instead.
|
507
|
-
|
508
400
|
<a name="the-once-directive"></a>
|
509
401
|
### The `@once` Directive
|
510
402
|
|
511
403
|
The `@once` directive allows you to define a portion of the template that will only be evaluated once per rendering cycle. This may be useful for pushing a given piece of JavaScript into the page's header using [stacks](#stacks). For example, if you are rendering a given [component](#components) within a loop, you may wish to only push the JavaScript to the header the first time the component is rendered:
|
512
404
|
|
513
|
-
```
|
405
|
+
```rblade
|
514
406
|
@once
|
515
407
|
@push('scripts')
|
516
408
|
<script>
|
517
409
|
// Your custom JavaScript...
|
518
410
|
</script>
|
519
|
-
@
|
520
|
-
@
|
411
|
+
@endPush
|
412
|
+
@endOnce
|
521
413
|
```
|
522
414
|
|
523
415
|
Since the `@once` directive is often used in conjunction with the `@push` or `@prepend` directives, the `@pushOnce` and `@prependOnce` directives are available for your convenience:
|
524
416
|
|
525
|
-
```
|
417
|
+
```rblade
|
526
418
|
@pushOnce('scripts')
|
527
419
|
<script>
|
528
|
-
|
420
|
+
{{-- Your javascript --}}
|
529
421
|
</script>
|
530
422
|
@endPushOnce
|
531
423
|
```
|
532
424
|
|
533
|
-
|
534
|
-
|
425
|
+
Additionally, you can pass an argument to the `@once` directive, or a second argument to the `@pushonce` and `@prependonce` directives to set the key that is used to determine if that block has already been output:
|
426
|
+
|
427
|
+
```rblade
|
428
|
+
@once(:heading)
|
429
|
+
<h1>Home page</h1>
|
430
|
+
@endOnce
|
431
|
+
|
432
|
+
{{-- This block will not be output --}}
|
433
|
+
@once(:heading)
|
434
|
+
<h1>Some other title</h1>
|
435
|
+
@endOnce
|
436
|
+
```
|
437
|
+
|
438
|
+
> [!NOTE]
|
439
|
+
> The keys you use for `@once`, `@pushOnce` and `@prependOnce` are shared.
|
440
|
+
|
441
|
+
<a name="raw-ruby"></a>
|
442
|
+
### Raw Ruby
|
535
443
|
|
536
|
-
In some situations, it's useful to embed
|
444
|
+
In some situations, it's useful to embed Ruby code into your views. You can use the RBlade `@ruby` directive to execute a block of plain Ruby within your template:
|
537
445
|
|
538
|
-
```
|
539
|
-
@
|
540
|
-
|
541
|
-
@
|
446
|
+
```rblade
|
447
|
+
@ruby
|
448
|
+
counter = 1;
|
449
|
+
@endruby
|
542
450
|
```
|
543
451
|
|
452
|
+
**TODO add require?**
|
544
453
|
Or, if you only need to use PHP to import a class, you may use the `@use` directive:
|
545
454
|
|
546
|
-
```
|
455
|
+
```rblade
|
547
456
|
@use('App\Models\Flight')
|
548
457
|
```
|
549
458
|
|
@@ -556,175 +465,91 @@ A second argument may be provided to the `@use` directive to alias the imported
|
|
556
465
|
<a name="comments"></a>
|
557
466
|
### Comments
|
558
467
|
|
559
|
-
|
468
|
+
RBlade also allows you to define comments in your views. However, unlike HTML comments, RBlade comments are not included in the HTML returned by your application. These comments are removed from the cached views so they have no performance downsides.
|
560
469
|
|
561
|
-
```
|
470
|
+
```rblade
|
562
471
|
{{-- This comment will not be present in the rendered HTML --}}
|
563
472
|
```
|
564
473
|
|
565
474
|
<a name="components"></a>
|
566
475
|
## Components
|
567
476
|
|
568
|
-
Components
|
569
|
-
|
570
|
-
To create a class based component, you may use the `make:component` Artisan command. To illustrate how to use components, we will create a simple `Alert` component. The `make:component` command will place the component in the `app/View/Components` directory:
|
571
|
-
|
572
|
-
```shell
|
573
|
-
php artisan make:component Alert
|
574
|
-
```
|
575
|
-
|
576
|
-
The `make:component` command will also create a view template for the component. The view will be placed in the `resources/views/components` directory. When writing components for your own application, components are automatically discovered within the `app/View/Components` directory and `resources/views/components` directory, so no further component registration is typically required.
|
577
|
-
|
578
|
-
You may also create components within subdirectories:
|
579
|
-
|
580
|
-
```shell
|
581
|
-
php artisan make:component Forms/Input
|
582
|
-
```
|
583
|
-
|
584
|
-
The command above will create an `Input` component in the `app/View/Components/Forms` directory and the view will be placed in the `resources/views/components/forms` directory.
|
585
|
-
|
586
|
-
If you would like to create an anonymous component (a component with only a Blade template and no class), you may use the `--view` flag when invoking the `make:component` command:
|
477
|
+
Components are a way of including sub-views into your templates. To illustrate how to use them, we will create a simple `alert` component.
|
587
478
|
|
588
|
-
|
589
|
-
php artisan make:component forms.input --view
|
590
|
-
```
|
591
|
-
|
592
|
-
The command above will create a Blade file at `resources/views/components/forms/input.blade.php` which can be rendered as a component via `<x-forms.input />`.
|
593
|
-
|
594
|
-
<a name="manually-registering-package-components"></a>
|
595
|
-
#### Manually Registering Package Components
|
596
|
-
|
597
|
-
When writing components for your own application, components are automatically discovered within the `app/View/Components` directory and `resources/views/components` directory.
|
598
|
-
|
599
|
-
However, if you are building a package that utilizes Blade components, you will need to manually register your component class and its HTML tag alias. You should typically register your components in the `boot` method of your package's service provider:
|
600
|
-
|
601
|
-
use Illuminate\Support\Facades\Blade;
|
602
|
-
|
603
|
-
/**
|
604
|
-
* Bootstrap your package's services.
|
605
|
-
*/
|
606
|
-
public function boot(): void
|
607
|
-
{
|
608
|
-
Blade::component('package-alert', Alert::class);
|
609
|
-
}
|
610
|
-
|
611
|
-
Once your component has been registered, it may be rendered using its tag alias:
|
612
|
-
|
613
|
-
```blade
|
614
|
-
<x-package-alert/>
|
615
|
-
```
|
616
|
-
|
617
|
-
Alternatively, you may use the `componentNamespace` method to autoload component classes by convention. For example, a `Nightshade` package might have `Calendar` and `ColorPicker` components that reside within the `Package\Views\Components` namespace:
|
479
|
+
First, we will create a new `alert.rblade` file in the `app/views/components/forms` directory. Templates in the `app/views/components` directory and its subdirectories are are automatically discovered as components, so no further registration is required. Both `.rblade` and `.html.rblade` are valid extensions for RBlade components.
|
618
480
|
|
619
|
-
|
481
|
+
Once your component has been created, it may be rendered using its tag alias:
|
620
482
|
|
621
|
-
|
622
|
-
|
623
|
-
*/
|
624
|
-
public function boot(): void
|
625
|
-
{
|
626
|
-
Blade::componentNamespace('Nightshade\\Views\\Components', 'nightshade');
|
627
|
-
}
|
628
|
-
|
629
|
-
This will allow the usage of package components by their vendor namespace using the `package-name::` syntax:
|
630
|
-
|
631
|
-
```blade
|
632
|
-
<x-nightshade::calendar />
|
633
|
-
<x-nightshade::color-picker />
|
483
|
+
```rblade
|
484
|
+
<x-forms.alert/>
|
634
485
|
```
|
635
486
|
|
636
|
-
Blade will automatically detect the class that's linked to this component by pascal-casing the component name. Subdirectories are also supported using "dot" notation.
|
637
|
-
|
638
487
|
<a name="rendering-components"></a>
|
639
488
|
### Rendering Components
|
640
489
|
|
641
490
|
To display a component, you may use a Blade component tag within one of your Blade templates. Blade component tags start with the string `x-` followed by the kebab case name of the component class:
|
642
491
|
|
643
|
-
```
|
492
|
+
```rblade
|
493
|
+
{{-- Render the `alert` component in app/views/components/ --}}
|
644
494
|
<x-alert/>
|
645
495
|
|
496
|
+
{{-- Render the `user-profile` component in app/views/components/ --}}
|
646
497
|
<x-user-profile/>
|
647
498
|
```
|
648
499
|
|
649
|
-
If the component class is
|
500
|
+
If the component class is in a subdirectory of `app/views/components`, you can use the `.` character to indicate directory nesting. For example, for the component `app/views/components/form/inputs/text.rblade`, we render it like so:
|
650
501
|
|
651
|
-
```
|
652
|
-
|
502
|
+
```rblade
|
503
|
+
{{-- Render the `text` component in app/views/components/form/inputs/ --}}
|
504
|
+
<x-form.inputs.text/>
|
653
505
|
```
|
654
506
|
|
655
|
-
|
656
|
-
|
657
|
-
use Illuminate\Support\Str;
|
507
|
+
<a name="namespaces"></a>
|
508
|
+
#### Namespaces
|
658
509
|
|
659
|
-
|
660
|
-
* Whether the component should be rendered
|
661
|
-
*/
|
662
|
-
public function shouldRender(): bool
|
663
|
-
{
|
664
|
-
return Str::length($this->message) > 0;
|
665
|
-
}
|
510
|
+
When writing components for your own application, components are automatically discovered within the `app/views/components` directory. Additionally, layouts in the `app/views/layouts` directory are automatically discovered with the `layout` namespace, and all views in the `app/views` directory are discovered with the `view` namespace.
|
666
511
|
|
667
|
-
|
668
|
-
### Passing Data to Components
|
512
|
+
Namespaced components can be rendered using the namespace as a prefix to the name separated by "::":
|
669
513
|
|
670
|
-
|
514
|
+
```rblade
|
515
|
+
{{-- Render the `app` component in app/views/layouts/ --}}
|
516
|
+
<x-layout::app/>
|
671
517
|
|
672
|
-
|
673
|
-
<x-
|
518
|
+
{{-- Render the `home` component in app/views/ --}}
|
519
|
+
<x-view::home/>
|
674
520
|
```
|
675
521
|
|
676
|
-
|
677
|
-
|
678
|
-
<?php
|
679
|
-
|
680
|
-
namespace App\View\Components;
|
522
|
+
<a name="passing-data-to-components"></a>
|
523
|
+
### Passing Data to Components
|
681
524
|
|
682
|
-
|
683
|
-
use Illuminate\View\View;
|
525
|
+
You can pass data to RBlade components using HTML attributes. Hard-coded strings can be passed to the component using simple HTML attribute strings. Ruby expressions and variables should be passed to the component via attributes that use the `:` character as a prefix:
|
684
526
|
|
685
|
-
|
686
|
-
|
687
|
-
|
688
|
-
* Create the component instance.
|
689
|
-
*/
|
690
|
-
public function __construct(
|
691
|
-
public string $type,
|
692
|
-
public string $message,
|
693
|
-
) {}
|
527
|
+
```rblade
|
528
|
+
<x-alert type="error" :message="message"/>
|
529
|
+
```
|
694
530
|
|
695
|
-
|
696
|
-
* Get the view / contents that represent the component.
|
697
|
-
*/
|
698
|
-
public function render(): View
|
699
|
-
{
|
700
|
-
return view('components.alert');
|
701
|
-
}
|
702
|
-
}
|
531
|
+
#### Component Properties
|
703
532
|
|
704
|
-
|
533
|
+
You can define a component's data properties using a `@props` directive at the top of the component. You can then reference these properties using local variables within the template:
|
705
534
|
|
706
|
-
```
|
707
|
-
|
708
|
-
|
709
|
-
</div>
|
535
|
+
```rblade
|
536
|
+
{{-- alert.rblade --}}
|
537
|
+
@props({type: "warning", message: _required})
|
538
|
+
<div class="{{ type }}">{{ message }}</div>
|
710
539
|
```
|
711
540
|
|
712
|
-
|
713
|
-
#### Casing
|
541
|
+
The `@props` directive accepts a `Hash` where the key is the name of the attribute, and the value is the default value for the property. You can use the special `_required` value to represent a property with no default that must always be defined:
|
714
542
|
|
715
|
-
|
716
|
-
|
717
|
-
|
718
|
-
|
719
|
-
*/
|
720
|
-
public function __construct(
|
721
|
-
public string $alertType,
|
722
|
-
) {}
|
543
|
+
```rblade
|
544
|
+
{{-- This will give an error because the alert component requires a message propery --}}
|
545
|
+
<x-alert/>
|
546
|
+
```
|
723
547
|
|
724
|
-
|
548
|
+
All properties in the `@props` directive are automatically removed from `attributes`. Properties with names that aren't valid Ruby variable names or are Ruby reserved keywords are not created as local variables. However, you can reference them via the `attributes` local variable:
|
725
549
|
|
726
|
-
```
|
727
|
-
|
550
|
+
```rblade
|
551
|
+
@props({"for": _required, "data-value": nil})
|
552
|
+
<div>{{ attributes[:for] }} {{ attributes[:'data-value'] }}</div>
|
728
553
|
```
|
729
554
|
|
730
555
|
<a name="short-attribute-syntax"></a>
|
@@ -732,206 +557,93 @@ The `$alertType` argument may be provided to the component like so:
|
|
732
557
|
|
733
558
|
When passing attributes to components, you may also use a "short attribute" syntax. This is often convenient since attribute names frequently match the variable names they correspond to:
|
734
559
|
|
735
|
-
```
|
560
|
+
```rblade
|
736
561
|
{{-- Short attribute syntax... --}}
|
737
|
-
<x-profile
|
562
|
+
<x-profile :user_id :name />
|
738
563
|
|
739
564
|
{{-- Is equivalent to... --}}
|
740
|
-
<x-profile :user-id="
|
565
|
+
<x-profile :user-id="user_id" :name="name" />
|
741
566
|
```
|
742
567
|
|
743
568
|
<a name="escaping-attribute-rendering"></a>
|
744
569
|
#### Escaping Attribute Rendering
|
745
570
|
|
746
|
-
Since some JavaScript frameworks such as Alpine.js also use colon-prefixed attributes, you may use a double colon (`::`) prefix to inform
|
571
|
+
Since some JavaScript frameworks such as Alpine.js also use colon-prefixed attributes, you may use a double colon (`::`) prefix to inform RBlade that the attribute is not a PHP expression. For example, given the following component:
|
747
572
|
|
748
|
-
```
|
573
|
+
```rblade
|
749
574
|
<x-button ::class="{ danger: isDeleting }">
|
750
575
|
Submit
|
751
576
|
</x-button>
|
752
577
|
```
|
753
578
|
|
754
|
-
The following HTML will be rendered by
|
579
|
+
The following HTML will be rendered by RBlade:
|
755
580
|
|
756
|
-
```
|
581
|
+
```rblade
|
757
582
|
<button :class="{ danger: isDeleting }">
|
758
583
|
Submit
|
759
584
|
</button>
|
760
585
|
```
|
761
586
|
|
762
|
-
<a name="component-methods"></a>
|
763
|
-
#### Component Methods
|
764
|
-
|
765
|
-
In addition to public variables being available to your component template, any public methods on the component may be invoked. For example, imagine a component that has an `isSelected` method:
|
766
|
-
|
767
|
-
/**
|
768
|
-
* Determine if the given option is the currently selected option.
|
769
|
-
*/
|
770
|
-
public function isSelected(string $option): bool
|
771
|
-
{
|
772
|
-
return $option === $this->selected;
|
773
|
-
}
|
774
|
-
|
775
|
-
You may execute this method from your component template by invoking the variable matching the name of the method:
|
776
|
-
|
777
|
-
```blade
|
778
|
-
<option {{ $isSelected($value) ? 'selected' : '' }} value="{{ $value }}">
|
779
|
-
{{ $label }}
|
780
|
-
</option>
|
781
|
-
```
|
782
|
-
|
783
|
-
<a name="using-attributes-slots-within-component-class"></a>
|
784
|
-
#### Accessing Attributes and Slots Within Component Classes
|
785
|
-
|
786
|
-
Blade components also allow you to access the component name, attributes, and slot inside the class's render method. However, in order to access this data, you should return a closure from your component's `render` method. The closure will receive a `$data` array as its only argument. This array will contain several elements that provide information about the component:
|
787
|
-
|
788
|
-
use Closure;
|
789
|
-
|
790
|
-
/**
|
791
|
-
* Get the view / contents that represent the component.
|
792
|
-
*/
|
793
|
-
public function render(): Closure
|
794
|
-
{
|
795
|
-
return function (array $data) {
|
796
|
-
// $data['componentName'];
|
797
|
-
// $data['attributes'];
|
798
|
-
// $data['slot'];
|
799
|
-
|
800
|
-
return '<div>Components content</div>';
|
801
|
-
};
|
802
|
-
}
|
803
|
-
|
804
|
-
The `componentName` is equal to the name used in the HTML tag after the `x-` prefix. So `<x-alert />`'s `componentName` will be `alert`. The `attributes` element will contain all of the attributes that were present on the HTML tag. The `slot` element is an `Illuminate\Support\HtmlString` instance with the contents of the component's slot.
|
805
|
-
|
806
|
-
The closure should return a string. If the returned string corresponds to an existing view, that view will be rendered; otherwise, the returned string will be evaluated as an inline Blade view.
|
807
|
-
|
808
|
-
<a name="additional-dependencies"></a>
|
809
|
-
#### Additional Dependencies
|
810
|
-
|
811
|
-
If your component requires dependencies from Laravel's [service container](/docs/{{version}}/container), you may list them before any of the component's data attributes and they will automatically be injected by the container:
|
812
|
-
|
813
|
-
```php
|
814
|
-
use App\Services\AlertCreator;
|
815
|
-
|
816
|
-
/**
|
817
|
-
* Create the component instance.
|
818
|
-
*/
|
819
|
-
public function __construct(
|
820
|
-
public AlertCreator $creator,
|
821
|
-
public string $type,
|
822
|
-
public string $message,
|
823
|
-
) {}
|
824
|
-
```
|
825
|
-
|
826
|
-
<a name="hiding-attributes-and-methods"></a>
|
827
|
-
#### Hiding Attributes / Methods
|
828
|
-
|
829
|
-
If you would like to prevent some public methods or properties from being exposed as variables to your component template, you may add them to an `$except` array property on your component:
|
830
|
-
|
831
|
-
<?php
|
832
|
-
|
833
|
-
namespace App\View\Components;
|
834
|
-
|
835
|
-
use Illuminate\View\Component;
|
836
|
-
|
837
|
-
class Alert extends Component
|
838
|
-
{
|
839
|
-
/**
|
840
|
-
* The properties / methods that should not be exposed to the component template.
|
841
|
-
*
|
842
|
-
* @var array
|
843
|
-
*/
|
844
|
-
protected $except = ['type'];
|
845
|
-
|
846
|
-
/**
|
847
|
-
* Create the component instance.
|
848
|
-
*/
|
849
|
-
public function __construct(
|
850
|
-
public string $type,
|
851
|
-
) {}
|
852
|
-
}
|
853
|
-
|
854
587
|
<a name="component-attributes"></a>
|
855
588
|
### Component Attributes
|
856
589
|
|
857
590
|
We've already examined how to pass data attributes to a component; however, sometimes you may need to specify additional HTML attributes, such as `class`, that are not part of the data required for a component to function. Typically, you want to pass these additional attributes down to the root element of the component template. For example, imagine we want to render an `alert` component like so:
|
858
591
|
|
859
|
-
```
|
860
|
-
<x-alert type="error" :message
|
592
|
+
```rblade
|
593
|
+
<x-alert type="error" :message class="mt-4"/>
|
861
594
|
```
|
862
595
|
|
863
|
-
|
596
|
+
**TODO remove from attributes bag using @props? Rename to attributes bag?**
|
864
597
|
|
865
|
-
|
866
|
-
|
598
|
+
All of the attributes that are not part of the component's constructor will automatically be added to the component's "attribute manager". This attribute manager is automatically made available to the component via the `attributes` variable. All of the attributes may be rendered within the component by printing this variable:
|
599
|
+
|
600
|
+
```rblade
|
601
|
+
<div {{ attributes }}>
|
867
602
|
<!-- Component content -->
|
868
603
|
</div>
|
869
604
|
```
|
870
605
|
|
871
|
-
> [!WARNING]
|
872
|
-
> Using directives such as `@env` within component tags is not supported at this time. For example, `<x-alert :live="@env('production')"/>` will not be compiled.
|
873
|
-
|
874
606
|
<a name="default-merged-attributes"></a>
|
875
607
|
#### Default / Merged Attributes
|
876
608
|
|
877
|
-
Sometimes you may need to specify default values for attributes or merge additional values into some of the component's attributes. To accomplish this, you may use the attribute
|
609
|
+
Sometimes you may need to specify default values for attributes or merge additional values into some of the component's attributes. To accomplish this, you may use the attribute manager's `merge` method. This method is particularly useful for defining a set of default CSS classes that should always be applied to a component:
|
878
610
|
|
879
|
-
```
|
880
|
-
<div {{
|
881
|
-
{{
|
611
|
+
```rblade
|
612
|
+
<div {{ attributes.merge({"class": "alert alert-#{type}"}) }}>
|
613
|
+
{{ message }}
|
882
614
|
</div>
|
883
615
|
```
|
884
616
|
|
885
617
|
If we assume this component is utilized like so:
|
886
618
|
|
887
|
-
```
|
888
|
-
<x-alert type="error" :message
|
619
|
+
```rblade
|
620
|
+
<x-alert type="error" :message class="mb-4"/>
|
889
621
|
```
|
890
622
|
|
891
623
|
The final, rendered HTML of the component will appear like the following:
|
892
624
|
|
893
|
-
```
|
625
|
+
```rblade
|
894
626
|
<div class="alert alert-error mb-4">
|
895
|
-
<!-- Contents of the
|
627
|
+
<!-- Contents of the message variable -->
|
896
628
|
</div>
|
897
629
|
```
|
898
630
|
|
899
|
-
|
900
|
-
#### Conditionally Merge Classes
|
901
|
-
|
902
|
-
Sometimes you may wish to merge classes if a given condition is `true`. You can accomplish this via the `class` method, which accepts an array of classes where the array key contains the class or classes you wish to add, while the value is a boolean expression. If the array element has a numeric key, it will always be included in the rendered class list:
|
903
|
-
|
904
|
-
```blade
|
905
|
-
<div {{ $attributes->class(['p-4', 'bg-red' => $hasError]) }}>
|
906
|
-
{{ $message }}
|
907
|
-
</div>
|
908
|
-
```
|
909
|
-
|
910
|
-
If you need to merge other attributes onto your component, you can chain the `merge` method onto the `class` method:
|
911
|
-
|
912
|
-
```blade
|
913
|
-
<button {{ $attributes->class(['p-4'])->merge(['type' => 'button']) }}>
|
914
|
-
{{ $slot }}
|
915
|
-
</button>
|
916
|
-
```
|
917
|
-
|
918
|
-
> [!NOTE]
|
919
|
-
> If you need to conditionally compile classes on other HTML elements that shouldn't receive merged attributes, you can use the [`@class` directive](#conditional-classes).
|
631
|
+
Both the `class` and `style` attributes are combined this way when using the `attributes.merge` method.
|
920
632
|
|
921
633
|
<a name="non-class-attribute-merging"></a>
|
922
634
|
#### Non-Class Attribute Merging
|
923
635
|
|
924
|
-
When merging attributes that are not `class`
|
636
|
+
When merging attributes that are not `class` or `style`, the values provided to the `merge` method will be considered the "default" values of the attribute. However, unlike the `class` and `style` attributes, these defaults will be overwritten if the attribute is defined in the component tag. For example:
|
925
637
|
|
926
|
-
```
|
927
|
-
<button {{
|
928
|
-
{{
|
638
|
+
```rblade
|
639
|
+
<button {{ attributes.merge({type: "button"}) }}>
|
640
|
+
{{ slot }}
|
929
641
|
</button>
|
930
642
|
```
|
931
643
|
|
932
|
-
To render the button component with a custom `type`, it
|
644
|
+
To render the button component with a custom `type`, it can be specified when consuming the component. If no type is specified, the `button` type will be used:
|
933
645
|
|
934
|
-
```
|
646
|
+
```rblade
|
935
647
|
<x-button type="submit">
|
936
648
|
Submit
|
937
649
|
</x-button>
|
@@ -939,50 +651,75 @@ To render the button component with a custom `type`, it may be specified when co
|
|
939
651
|
|
940
652
|
The rendered HTML of the `button` component in this example would be:
|
941
653
|
|
942
|
-
```
|
654
|
+
```rblade
|
943
655
|
<button type="submit">
|
944
656
|
Submit
|
945
657
|
</button>
|
946
658
|
```
|
947
659
|
|
948
|
-
|
660
|
+
**Todo add prepends**
|
661
|
+
If you would like an attribute other than `class` or `style` to have its default value and injected values joined together, you can use the `prepends` method. In this example, the `data-controller` attribute will always begin with `profile-controller` and any additional injected `data-controller` values will be placed after this default value:
|
949
662
|
|
950
|
-
```
|
951
|
-
<div {{
|
952
|
-
{{
|
663
|
+
```rblade
|
664
|
+
<div {{ attributes.merge({"data-controller": attributes.prepends("profile-controller")}) }}>
|
665
|
+
{{ slot }}
|
666
|
+
</div>
|
667
|
+
```
|
668
|
+
|
669
|
+
<a name="conditionally-merge-classes"></a>
|
670
|
+
#### Conditionally Merge Classes
|
671
|
+
**TODO this**
|
672
|
+
Sometimes you may wish to merge classes if a given condition is `true`. You can accomplish this via the `class` method, which accepts an array of classes where the array key contains the class or classes you wish to add, while the value is a boolean expression. If the array element has a numeric key, it will always be included in the rendered class list:
|
673
|
+
|
674
|
+
```rblade
|
675
|
+
<div {{ $attributes->class(['p-4', 'bg-red' => $hasError]) }}>
|
676
|
+
{{ $message }}
|
953
677
|
</div>
|
954
678
|
```
|
955
679
|
|
680
|
+
If you need to merge other attributes onto your component, you can chain the `merge` method onto the `class` method:
|
681
|
+
|
682
|
+
```rblade
|
683
|
+
<button {{ $attributes->class(['p-4'])->merge(['type' => 'button']) }}>
|
684
|
+
{{ $slot }}
|
685
|
+
</button>
|
686
|
+
```
|
687
|
+
|
688
|
+
> [!NOTE]
|
689
|
+
> If you need to conditionally compile classes on other HTML elements that shouldn't receive merged attributes, you can use the [`@class` directive](#conditional-classes).
|
690
|
+
|
956
691
|
<a name="filtering-attributes"></a>
|
957
692
|
#### Retrieving and Filtering Attributes
|
958
693
|
|
694
|
+
**Todo this**
|
695
|
+
|
959
696
|
You may filter attributes using the `filter` method. This method accepts a closure which should return `true` if you wish to retain the attribute in the attribute bag:
|
960
697
|
|
961
|
-
```
|
698
|
+
```rblade
|
962
699
|
{{ $attributes->filter(fn (string $value, string $key) => $key == 'foo') }}
|
963
700
|
```
|
964
701
|
|
965
702
|
For convenience, you may use the `whereStartsWith` method to retrieve all attributes whose keys begin with a given string:
|
966
703
|
|
967
|
-
```
|
704
|
+
```rblade
|
968
705
|
{{ $attributes->whereStartsWith('wire:model') }}
|
969
706
|
```
|
970
707
|
|
971
708
|
Conversely, the `whereDoesntStartWith` method may be used to exclude all attributes whose keys begin with a given string:
|
972
709
|
|
973
|
-
```
|
710
|
+
```rblade
|
974
711
|
{{ $attributes->whereDoesntStartWith('wire:model') }}
|
975
712
|
```
|
976
713
|
|
977
714
|
Using the `first` method, you may render the first attribute in a given attribute bag:
|
978
715
|
|
979
|
-
```
|
716
|
+
```rblade
|
980
717
|
{{ $attributes->whereStartsWith('wire:model')->first() }}
|
981
718
|
```
|
982
719
|
|
983
720
|
If you would like to check if an attribute is present on the component, you may use the `has` method. This method accepts the attribute name as its only argument and returns a boolean indicating whether or not the attribute is present:
|
984
721
|
|
985
|
-
```
|
722
|
+
```rblade
|
986
723
|
@if ($attributes->has('class'))
|
987
724
|
<div>Class attribute is present</div>
|
988
725
|
@endif
|
@@ -990,7 +727,7 @@ If you would like to check if an attribute is present on the component, you may
|
|
990
727
|
|
991
728
|
If an array is passed to the `has` method, the method will determine if all of the given attributes are present on the component:
|
992
729
|
|
993
|
-
```
|
730
|
+
```rblade
|
994
731
|
@if ($attributes->has(['name', 'class']))
|
995
732
|
<div>All of the attributes are present</div>
|
996
733
|
@endif
|
@@ -998,7 +735,7 @@ If an array is passed to the `has` method, the method will determine if all of t
|
|
998
735
|
|
999
736
|
The `hasAny` method may be used to determine if any of the given attributes are present on the component:
|
1000
737
|
|
1001
|
-
```
|
738
|
+
```rblade
|
1002
739
|
@if ($attributes->hasAny(['href', ':href', 'v-bind:href']))
|
1003
740
|
<div>One of the attributes is present</div>
|
1004
741
|
@endif
|
@@ -1006,43 +743,25 @@ The `hasAny` method may be used to determine if any of the given attributes are
|
|
1006
743
|
|
1007
744
|
You may retrieve a specific attribute's value using the `get` method:
|
1008
745
|
|
1009
|
-
```
|
746
|
+
```rblade
|
1010
747
|
{{ $attributes->get('class') }}
|
1011
748
|
```
|
1012
749
|
|
1013
|
-
<a name="reserved-keywords"></a>
|
1014
|
-
### Reserved Keywords
|
1015
|
-
|
1016
|
-
By default, some keywords are reserved for Blade's internal use in order to render components. The following keywords cannot be defined as public properties or method names within your components:
|
1017
|
-
|
1018
|
-
<div class="content-list" markdown="1">
|
1019
|
-
|
1020
|
-
- `data`
|
1021
|
-
- `render`
|
1022
|
-
- `resolveView`
|
1023
|
-
- `shouldRender`
|
1024
|
-
- `view`
|
1025
|
-
- `withAttributes`
|
1026
|
-
- `withName`
|
1027
|
-
|
1028
|
-
</div>
|
1029
|
-
|
1030
750
|
<a name="slots"></a>
|
1031
751
|
### Slots
|
1032
752
|
|
1033
|
-
You will often need to pass additional content to your component via "slots".
|
1034
|
-
|
1035
|
-
```blade
|
1036
|
-
<!-- /resources/views/components/alert.blade.php -->
|
753
|
+
You will often need to pass additional content to your component via "slots". The default component slot is rendered by printing the `slot` variable. To explore this concept, let's imagine that an `alert` component has the following markup:
|
1037
754
|
|
755
|
+
```rblade
|
756
|
+
{{-- /app/views/components/alert.rblade --}}
|
1038
757
|
<div class="alert alert-danger">
|
1039
|
-
{{
|
758
|
+
{{ slot }}
|
1040
759
|
</div>
|
1041
760
|
```
|
1042
761
|
|
1043
762
|
We may pass content to the `slot` by injecting content into the component:
|
1044
763
|
|
1045
|
-
```
|
764
|
+
```rblade
|
1046
765
|
<x-alert>
|
1047
766
|
<strong>Whoops!</strong> Something went wrong!
|
1048
767
|
</x-alert>
|
@@ -1050,17 +769,16 @@ We may pass content to the `slot` by injecting content into the component:
|
|
1050
769
|
|
1051
770
|
Sometimes a component may need to render multiple different slots in different locations within the component. Let's modify our alert component to allow for the injection of a "title" slot:
|
1052
771
|
|
1053
|
-
```
|
1054
|
-
|
1055
|
-
|
1056
|
-
<span class="alert-title">{{
|
1057
|
-
|
772
|
+
```rblade
|
773
|
+
{{-- /app/views/components/alert.rblade --}}
|
774
|
+
@props({title: _required})
|
775
|
+
<span class="alert-title">{{ title }}</span>
|
1058
776
|
<div class="alert alert-danger">
|
1059
|
-
{{
|
777
|
+
{{ slot }}
|
1060
778
|
</div>
|
1061
779
|
```
|
1062
780
|
|
1063
|
-
You may define the content of the named slot using the `x-slot` tag. Any content not within an explicit `x-slot` tag will be passed to the component in the
|
781
|
+
You may define the content of the named slot using the `x-slot` tag. Any content not within an explicit `x-slot` tag will be passed to the component in the `slot` variable:
|
1064
782
|
|
1065
783
|
```xml
|
1066
784
|
<x-alert>
|
@@ -1071,35 +789,35 @@ You may define the content of the named slot using the `x-slot` tag. Any content
|
|
1071
789
|
<strong>Whoops!</strong> Something went wrong!
|
1072
790
|
</x-alert>
|
1073
791
|
```
|
1074
|
-
|
792
|
+
**TODO this**
|
1075
793
|
You may invoke a slot's `isEmpty` method to determine if the slot contains content:
|
1076
794
|
|
1077
|
-
```
|
1078
|
-
<span class="alert-title">{{
|
795
|
+
```rblade
|
796
|
+
<span class="alert-title">{{ title }}</span>
|
1079
797
|
|
1080
798
|
<div class="alert alert-danger">
|
1081
|
-
@if (
|
799
|
+
@if (slot.isEmpty)
|
1082
800
|
This is default content if the slot is empty.
|
1083
801
|
@else
|
1084
|
-
{{
|
802
|
+
{{ slot }}
|
1085
803
|
@endif
|
1086
804
|
</div>
|
1087
805
|
```
|
1088
806
|
|
1089
807
|
Additionally, the `hasActualContent` method may be used to determine if the slot contains any "actual" content that is not an HTML comment:
|
1090
808
|
|
1091
|
-
```
|
1092
|
-
@if (
|
809
|
+
```rblade
|
810
|
+
@if (slot.hasActualContent)
|
1093
811
|
The scope has non-comment content.
|
1094
812
|
@endif
|
1095
813
|
```
|
1096
814
|
|
1097
815
|
<a name="scoped-slots"></a>
|
1098
816
|
#### Scoped Slots
|
1099
|
-
|
817
|
+
**TODO can we do this easily?**
|
1100
818
|
If you have used a JavaScript framework such as Vue, you may be familiar with "scoped slots", which allow you to access data or methods from the component within your slot. You may achieve similar behavior in Laravel by defining public methods or properties on your component and accessing the component within your slot via the `$component` variable. In this example, we will assume that the `x-alert` component has a public `formatAlert` method defined on its component class:
|
1101
819
|
|
1102
|
-
```
|
820
|
+
```rblade
|
1103
821
|
<x-alert>
|
1104
822
|
<x-slot:title>
|
1105
823
|
{{ $component->formatAlert('Server Error') }}
|
@@ -1112,7 +830,7 @@ If you have used a JavaScript framework such as Vue, you may be familiar with "s
|
|
1112
830
|
<a name="slot-attributes"></a>
|
1113
831
|
#### Slot Attributes
|
1114
832
|
|
1115
|
-
Like
|
833
|
+
Like RBlade components, you may assign additional [attributes](#component-attributes) to slots such as CSS class names:
|
1116
834
|
|
1117
835
|
```xml
|
1118
836
|
<x-card class="shadow-sm">
|
@@ -1130,65 +848,56 @@ Like Blade components, you may assign additional [attributes](#component-attribu
|
|
1130
848
|
|
1131
849
|
To interact with slot attributes, you may access the `attributes` property of the slot's variable. For more information on how to interact with attributes, please consult the documentation on [component attributes](#component-attributes):
|
1132
850
|
|
1133
|
-
|
1134
|
-
|
1135
|
-
|
1136
|
-
|
1137
|
-
|
1138
|
-
|
1139
|
-
|
1140
|
-
|
1141
|
-
|
851
|
+
**TODO allow class to contain a string**
|
852
|
+
```rblade
|
853
|
+
@props({
|
854
|
+
"heading": _required,
|
855
|
+
"footer": _required,
|
856
|
+
})
|
857
|
+
|
858
|
+
<div {{ attributes.class(['border']) }}>
|
859
|
+
<h1 {{ heading.attributes->class('text-lg': true) }}>
|
860
|
+
{{ heading }}
|
1142
861
|
</h1>
|
1143
862
|
|
1144
|
-
{{
|
863
|
+
{{ slot }}
|
1145
864
|
|
1146
|
-
<footer {{
|
1147
|
-
{{
|
865
|
+
<footer {{ footer.attributes.class('text-gray-700']) }}>
|
866
|
+
{{ footer }}
|
1148
867
|
</footer>
|
1149
868
|
</div>
|
1150
869
|
```
|
1151
870
|
|
1152
|
-
<a name="
|
1153
|
-
###
|
1154
|
-
|
1155
|
-
|
1156
|
-
|
1157
|
-
/**
|
1158
|
-
* Get the view / contents that represent the component.
|
1159
|
-
*/
|
1160
|
-
public function render(): string
|
1161
|
-
{
|
1162
|
-
return <<<'blade'
|
1163
|
-
<div class="alert alert-danger">
|
1164
|
-
{{ $slot }}
|
1165
|
-
</div>
|
1166
|
-
blade;
|
1167
|
-
}
|
1168
|
-
|
1169
|
-
<a name="generating-inline-view-components"></a>
|
1170
|
-
#### Generating Inline View Components
|
1171
|
-
|
1172
|
-
To create a component that renders an inline view, you may use the `inline` option when executing the `make:component` command:
|
871
|
+
<a name="dynamic-components"></a>
|
872
|
+
### Dynamic Components
|
873
|
+
**TODO add this**
|
874
|
+
Sometimes you may need to render a component without knowing which component should be rendered until runtime. In this situation, you may use RBlade's built-in `dynamic-component` component to render the component based on a runtime value or variable:
|
1173
875
|
|
1174
|
-
```
|
1175
|
-
|
876
|
+
```rblade
|
877
|
+
@ruby(componentName = "secondary-button")
|
878
|
+
<x-dynamic-component :component="componentName" class="mt-4" />
|
1176
879
|
```
|
1177
880
|
|
1178
|
-
<a name="
|
1179
|
-
###
|
881
|
+
<a name="registering-additional-component-directories"></a>
|
882
|
+
### Registering Additional Component Directories
|
883
|
+
|
884
|
+
If you are building a package that utilizes RBlade components, or want to store your components elsewhere, you will need to manually register your component directory using the `RBlade::ComponentStore.add_path` method:
|
1180
885
|
|
1181
|
-
|
886
|
+
```ruby
|
887
|
+
require "rblade/component_store"
|
1182
888
|
|
1183
|
-
|
1184
|
-
|
889
|
+
# Auto-discover components in the app/components directory
|
890
|
+
RBlade::ComponentStore.add_path(Rails.root.join("app", "components"))
|
1185
891
|
|
1186
|
-
|
892
|
+
# Auto-discover components in the app/views/partials directory with the namespace "partial"
|
893
|
+
RBlade::ComponentStore.add_path(Rails.root.join("app", "views", "partials"), "partial")
|
1187
894
|
```
|
1188
895
|
|
896
|
+
If multiple directories are registered with the same namespace, RBlade will search for components in all the directories in the order they were registered.
|
897
|
+
|
1189
898
|
<a name="manually-registering-components"></a>
|
1190
899
|
### Manually Registering Components
|
1191
|
-
|
900
|
+
**TODO would this be useful? It'd be useful for testing...**
|
1192
901
|
> [!WARNING]
|
1193
902
|
> The following documentation on manually registering components is primarily applicable to those who are writing Laravel packages that include view components. If you are not writing a package, this portion of the component documentation may not be relevant to you.
|
1194
903
|
|
@@ -1209,61 +918,16 @@ However, if you are building a package that utilizes Blade components or placing
|
|
1209
918
|
|
1210
919
|
Once your component has been registered, it may be rendered using its tag alias:
|
1211
920
|
|
1212
|
-
```
|
921
|
+
```rblade
|
1213
922
|
<x-package-alert/>
|
1214
923
|
```
|
1215
924
|
|
1216
|
-
#### Autoloading Package Components
|
1217
|
-
|
1218
|
-
Alternatively, you may use the `componentNamespace` method to autoload component classes by convention. For example, a `Nightshade` package might have `Calendar` and `ColorPicker` components that reside within the `Package\Views\Components` namespace:
|
1219
|
-
|
1220
|
-
use Illuminate\Support\Facades\Blade;
|
1221
|
-
|
1222
|
-
/**
|
1223
|
-
* Bootstrap your package's services.
|
1224
|
-
*/
|
1225
|
-
public function boot(): void
|
1226
|
-
{
|
1227
|
-
Blade::componentNamespace('Nightshade\\Views\\Components', 'nightshade');
|
1228
|
-
}
|
1229
|
-
|
1230
|
-
This will allow the usage of package components by their vendor namespace using the `package-name::` syntax:
|
1231
|
-
|
1232
|
-
```blade
|
1233
|
-
<x-nightshade::calendar />
|
1234
|
-
<x-nightshade::color-picker />
|
1235
|
-
```
|
1236
|
-
|
1237
|
-
Blade will automatically detect the class that's linked to this component by pascal-casing the component name. Subdirectories are also supported using "dot" notation.
|
1238
|
-
|
1239
|
-
<a name="anonymous-components"></a>
|
1240
|
-
## Anonymous Components
|
1241
|
-
|
1242
|
-
Similar to inline components, anonymous components provide a mechanism for managing a component via a single file. However, anonymous components utilize a single view file and have no associated class. To define an anonymous component, you only need to place a Blade template within your `resources/views/components` directory. For example, assuming you have defined a component at `resources/views/components/alert.blade.php`, you may simply render it like so:
|
1243
|
-
|
1244
|
-
```blade
|
1245
|
-
<x-alert/>
|
1246
|
-
```
|
1247
|
-
|
1248
|
-
You may use the `.` character to indicate if a component is nested deeper inside the `components` directory. For example, assuming the component is defined at `resources/views/components/inputs/button.blade.php`, you may render it like so:
|
1249
|
-
|
1250
|
-
```blade
|
1251
|
-
<x-inputs.button/>
|
1252
|
-
```
|
1253
|
-
|
1254
925
|
<a name="anonymous-index-components"></a>
|
1255
|
-
###
|
1256
|
-
|
1257
|
-
Sometimes, when a component is made up of many Blade templates, you may wish to group the given component's templates within a single directory. For example, imagine an "accordion" component with the following directory structure:
|
926
|
+
### Index Components
|
1258
927
|
|
1259
|
-
|
1260
|
-
/resources/views/components/accordion.blade.php
|
1261
|
-
/resources/views/components/accordion/item.blade.php
|
1262
|
-
```
|
928
|
+
Sometimes, when a component is made up of many RBlade templates, you may wish to group the given component's templates within a single directory. For example, imagine an "accordion" component:
|
1263
929
|
|
1264
|
-
|
1265
|
-
|
1266
|
-
```blade
|
930
|
+
```rblade
|
1267
931
|
<x-accordion>
|
1268
932
|
<x-accordion.item>
|
1269
933
|
...
|
@@ -1271,44 +935,26 @@ This directory structure allows you to render the accordion component and its it
|
|
1271
935
|
</x-accordion>
|
1272
936
|
```
|
1273
937
|
|
1274
|
-
|
1275
|
-
|
1276
|
-
Thankfully, Blade allows you to place an `index.blade.php` file within a component's template directory. When an `index.blade.php` template exists for the component, it will be rendered as the "root" node of the component. So, we can continue to use the same Blade syntax given in the example above; however, we will adjust our directory structure like so:
|
938
|
+
You could make these components with files in separate directories:
|
1277
939
|
|
1278
940
|
```none
|
1279
|
-
/
|
1280
|
-
/
|
941
|
+
/app/views/components/accordion.rblade
|
942
|
+
/app/views/components/accordion/item.rblade
|
1281
943
|
```
|
1282
944
|
|
1283
|
-
|
1284
|
-
### Data Properties / Attributes
|
945
|
+
However, when an `index.rblade` template exists in a directory, it will be rendered when referring to that directory. So instead of having to have the "index" component in a separate `app/views/components/accordion.rblade`, we can group the components together:
|
1285
946
|
|
1286
|
-
|
1287
|
-
|
1288
|
-
|
1289
|
-
|
1290
|
-
```blade
|
1291
|
-
<!-- /resources/views/components/alert.blade.php -->
|
1292
|
-
|
1293
|
-
@props(['type' => 'info', 'message'])
|
1294
|
-
|
1295
|
-
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
|
1296
|
-
{{ $message }}
|
1297
|
-
</div>
|
1298
|
-
```
|
1299
|
-
|
1300
|
-
Given the component definition above, we may render the component like so:
|
1301
|
-
|
1302
|
-
```blade
|
1303
|
-
<x-alert type="error" :message="$message" class="mb-4"/>
|
947
|
+
```none
|
948
|
+
/app/views/components/accordion/index.rblade
|
949
|
+
/app/views/components/accordion/item.rblade
|
1304
950
|
```
|
1305
951
|
|
1306
952
|
<a name="accessing-parent-data"></a>
|
1307
953
|
### Accessing Parent Data
|
1308
|
-
|
954
|
+
**TODO this? It might be complicated**
|
1309
955
|
Sometimes you may want to access data from a parent component inside a child component. In these cases, you may use the `@aware` directive. For example, imagine we are building a complex menu component consisting of a parent `<x-menu>` and child `<x-menu.item>`:
|
1310
956
|
|
1311
|
-
```
|
957
|
+
```rblade
|
1312
958
|
<x-menu color="purple">
|
1313
959
|
<x-menu.item>...</x-menu.item>
|
1314
960
|
<x-menu.item>...</x-menu.item>
|
@@ -1317,8 +963,8 @@ Sometimes you may want to access data from a parent component inside a child com
|
|
1317
963
|
|
1318
964
|
The `<x-menu>` component may have an implementation like the following:
|
1319
965
|
|
1320
|
-
```
|
1321
|
-
<!-- /resources/views/components/menu/index.
|
966
|
+
```rblade
|
967
|
+
<!-- /resources/views/components/menu/index.rblade -->
|
1322
968
|
|
1323
969
|
@props(['color' => 'gray'])
|
1324
970
|
|
@@ -1329,8 +975,8 @@ The `<x-menu>` component may have an implementation like the following:
|
|
1329
975
|
|
1330
976
|
Because the `color` prop was only passed into the parent (`<x-menu>`), it won't be available inside `<x-menu.item>`. However, if we use the `@aware` directive, we can make it available inside `<x-menu.item>` as well:
|
1331
977
|
|
1332
|
-
```
|
1333
|
-
<!-- /resources/views/components/menu/item.
|
978
|
+
```rblade
|
979
|
+
<!-- /resources/views/components/menu/item.rblade -->
|
1334
980
|
|
1335
981
|
@aware(['color' => 'gray'])
|
1336
982
|
|
@@ -1342,180 +988,15 @@ Because the `color` prop was only passed into the parent (`<x-menu>`), it won't
|
|
1342
988
|
> [!WARNING]
|
1343
989
|
> The `@aware` directive can not access parent data that is not explicitly passed to the parent component via HTML attributes. Default `@props` values that are not explicitly passed to the parent component can not be accessed by the `@aware` directive.
|
1344
990
|
|
1345
|
-
<a name="anonymous-component-paths"></a>
|
1346
|
-
### Anonymous Component Paths
|
1347
|
-
|
1348
|
-
As previously discussed, anonymous components are typically defined by placing a Blade template within your `resources/views/components` directory. However, you may occasionally want to register other anonymous component paths with Laravel in addition to the default path.
|
1349
|
-
|
1350
|
-
The `anonymousComponentPath` method accepts the "path" to the anonymous component location as its first argument and an optional "namespace" that components should be placed under as its second argument. Typically, this method should be called from the `boot` method of one of your application's [service providers](/docs/{{version}}/providers):
|
1351
|
-
|
1352
|
-
/**
|
1353
|
-
* Bootstrap any application services.
|
1354
|
-
*/
|
1355
|
-
public function boot(): void
|
1356
|
-
{
|
1357
|
-
Blade::anonymousComponentPath(__DIR__.'/../components');
|
1358
|
-
}
|
1359
|
-
|
1360
|
-
When component paths are registered without a specified prefix as in the example above, they may be rendered in your Blade components without a corresponding prefix as well. For example, if a `panel.blade.php` component exists in the path registered above, it may be rendered like so:
|
1361
|
-
|
1362
|
-
```blade
|
1363
|
-
<x-panel />
|
1364
|
-
```
|
1365
|
-
|
1366
|
-
Prefix "namespaces" may be provided as the second argument to the `anonymousComponentPath` method:
|
1367
|
-
|
1368
|
-
Blade::anonymousComponentPath(__DIR__.'/../components', 'dashboard');
|
1369
|
-
|
1370
|
-
When a prefix is provided, components within that "namespace" may be rendered by prefixing to the component's namespace to the component name when the component is rendered:
|
1371
|
-
|
1372
|
-
```blade
|
1373
|
-
<x-dashboard::panel />
|
1374
|
-
```
|
1375
|
-
|
1376
|
-
<a name="building-layouts"></a>
|
1377
|
-
## Building Layouts
|
1378
|
-
|
1379
|
-
<a name="layouts-using-components"></a>
|
1380
|
-
### Layouts Using Components
|
1381
|
-
|
1382
|
-
Most web applications maintain the same general layout across various pages. It would be incredibly cumbersome and hard to maintain our application if we had to repeat the entire layout HTML in every view we create. Thankfully, it's convenient to define this layout as a single [Blade component](#components) and then use it throughout our application.
|
1383
|
-
|
1384
|
-
<a name="defining-the-layout-component"></a>
|
1385
|
-
#### Defining the Layout Component
|
1386
|
-
|
1387
|
-
For example, imagine we are building a "todo" list application. We might define a `layout` component that looks like the following:
|
1388
|
-
|
1389
|
-
```blade
|
1390
|
-
<!-- resources/views/components/layout.blade.php -->
|
1391
|
-
|
1392
|
-
<html>
|
1393
|
-
<head>
|
1394
|
-
<title>{{ $title ?? 'Todo Manager' }}</title>
|
1395
|
-
</head>
|
1396
|
-
<body>
|
1397
|
-
<h1>Todos</h1>
|
1398
|
-
<hr/>
|
1399
|
-
{{ $slot }}
|
1400
|
-
</body>
|
1401
|
-
</html>
|
1402
|
-
```
|
1403
|
-
|
1404
|
-
<a name="applying-the-layout-component"></a>
|
1405
|
-
#### Applying the Layout Component
|
1406
|
-
|
1407
|
-
Once the `layout` component has been defined, we may create a Blade view that utilizes the component. In this example, we will define a simple view that displays our task list:
|
1408
|
-
|
1409
|
-
```blade
|
1410
|
-
<!-- resources/views/tasks.blade.php -->
|
1411
|
-
|
1412
|
-
<x-layout>
|
1413
|
-
@foreach ($tasks as $task)
|
1414
|
-
{{ $task }}
|
1415
|
-
@endforeach
|
1416
|
-
</x-layout>
|
1417
|
-
```
|
1418
|
-
|
1419
|
-
Remember, content that is injected into a component will be supplied to the default `$slot` variable within our `layout` component. As you may have noticed, our `layout` also respects a `$title` slot if one is provided; otherwise, a default title is shown. We may inject a custom title from our task list view using the standard slot syntax discussed in the [component documentation](#components):
|
1420
|
-
|
1421
|
-
```blade
|
1422
|
-
<!-- resources/views/tasks.blade.php -->
|
1423
|
-
|
1424
|
-
<x-layout>
|
1425
|
-
<x-slot:title>
|
1426
|
-
Custom Title
|
1427
|
-
</x-slot>
|
1428
|
-
|
1429
|
-
@foreach ($tasks as $task)
|
1430
|
-
{{ $task }}
|
1431
|
-
@endforeach
|
1432
|
-
</x-layout>
|
1433
|
-
```
|
1434
|
-
|
1435
|
-
Now that we have defined our layout and task list views, we just need to return the `task` view from a route:
|
1436
|
-
|
1437
|
-
use App\Models\Task;
|
1438
|
-
|
1439
|
-
Route::get('/tasks', function () {
|
1440
|
-
return view('tasks', ['tasks' => Task::all()]);
|
1441
|
-
});
|
1442
|
-
|
1443
|
-
<a name="layouts-using-template-inheritance"></a>
|
1444
|
-
### Layouts Using Template Inheritance
|
1445
|
-
|
1446
|
-
<a name="defining-a-layout"></a>
|
1447
|
-
#### Defining a Layout
|
1448
|
-
|
1449
|
-
Layouts may also be created via "template inheritance". This was the primary way of building applications prior to the introduction of [components](#components).
|
1450
|
-
|
1451
|
-
To get started, let's take a look at a simple example. First, we will examine a page layout. Since most web applications maintain the same general layout across various pages, it's convenient to define this layout as a single Blade view:
|
1452
|
-
|
1453
|
-
```blade
|
1454
|
-
<!-- resources/views/layouts/app.blade.php -->
|
1455
|
-
|
1456
|
-
<html>
|
1457
|
-
<head>
|
1458
|
-
<title>App Name - @yield('title')</title>
|
1459
|
-
</head>
|
1460
|
-
<body>
|
1461
|
-
@section('sidebar')
|
1462
|
-
This is the master sidebar.
|
1463
|
-
@show
|
1464
|
-
|
1465
|
-
<div class="container">
|
1466
|
-
@yield('content')
|
1467
|
-
</div>
|
1468
|
-
</body>
|
1469
|
-
</html>
|
1470
|
-
```
|
1471
|
-
|
1472
|
-
As you can see, this file contains typical HTML mark-up. However, take note of the `@section` and `@yield` directives. The `@section` directive, as the name implies, defines a section of content, while the `@yield` directive is used to display the contents of a given section.
|
1473
|
-
|
1474
|
-
Now that we have defined a layout for our application, let's define a child page that inherits the layout.
|
1475
|
-
|
1476
|
-
<a name="extending-a-layout"></a>
|
1477
|
-
#### Extending a Layout
|
1478
|
-
|
1479
|
-
When defining a child view, use the `@extends` Blade directive to specify which layout the child view should "inherit". Views which extend a Blade layout may inject content into the layout's sections using `@section` directives. Remember, as seen in the example above, the contents of these sections will be displayed in the layout using `@yield`:
|
1480
|
-
|
1481
|
-
```blade
|
1482
|
-
<!-- resources/views/child.blade.php -->
|
1483
|
-
|
1484
|
-
@extends('layouts.app')
|
1485
|
-
|
1486
|
-
@section('title', 'Page Title')
|
1487
|
-
|
1488
|
-
@section('sidebar')
|
1489
|
-
@@parent
|
1490
|
-
|
1491
|
-
<p>This is appended to the master sidebar.</p>
|
1492
|
-
@endsection
|
1493
|
-
|
1494
|
-
@section('content')
|
1495
|
-
<p>This is my body content.</p>
|
1496
|
-
@endsection
|
1497
|
-
```
|
1498
|
-
|
1499
|
-
In this example, the `sidebar` section is utilizing the `@@parent` directive to append (rather than overwriting) content to the layout's sidebar. The `@@parent` directive will be replaced by the content of the layout when the view is rendered.
|
1500
|
-
|
1501
|
-
> [!NOTE]
|
1502
|
-
> Contrary to the previous example, this `sidebar` section ends with `@endsection` instead of `@show`. The `@endsection` directive will only define a section while `@show` will define and **immediately yield** the section.
|
1503
|
-
|
1504
|
-
The `@yield` directive also accepts a default value as its second parameter. This value will be rendered if the section being yielded is undefined:
|
1505
|
-
|
1506
|
-
```blade
|
1507
|
-
@yield('content', 'Default content')
|
1508
|
-
```
|
1509
|
-
|
1510
991
|
<a name="forms"></a>
|
1511
992
|
## Forms
|
1512
993
|
|
1513
994
|
<a name="csrf-field"></a>
|
1514
995
|
### CSRF Field
|
1515
|
-
|
996
|
+
**TODO I don't think we need this?**
|
1516
997
|
Anytime you define an HTML form in your application, you should include a hidden CSRF token field in the form so that [the CSRF protection](/docs/{{version}}/csrf) middleware can validate the request. You may use the `@csrf` Blade directive to generate the token field:
|
1517
998
|
|
1518
|
-
```
|
999
|
+
```rblade
|
1519
1000
|
<form method="POST" action="/profile">
|
1520
1001
|
@csrf
|
1521
1002
|
|
@@ -1525,10 +1006,10 @@ Anytime you define an HTML form in your application, you should include a hidden
|
|
1525
1006
|
|
1526
1007
|
<a name="method-field"></a>
|
1527
1008
|
### Method Field
|
1009
|
+
**TODO add this**
|
1010
|
+
Since HTML forms can't make `PUT`, `PATCH`, or `DELETE` requests, you will need to add a hidden `_method` field to spoof these HTTP verbs. The `@method` RBlade directive can create this field for you:
|
1528
1011
|
|
1529
|
-
|
1530
|
-
|
1531
|
-
```blade
|
1012
|
+
```rblade
|
1532
1013
|
<form action="/foo/bar" method="POST">
|
1533
1014
|
@method('PUT')
|
1534
1015
|
|
@@ -1538,11 +1019,11 @@ Since HTML forms can't make `PUT`, `PATCH`, or `DELETE` requests, you will need
|
|
1538
1019
|
|
1539
1020
|
<a name="validation-errors"></a>
|
1540
1021
|
### Validation Errors
|
1541
|
-
|
1022
|
+
**TODO this**
|
1542
1023
|
The `@error` directive may be used to quickly check if [validation error messages](/docs/{{version}}/validation#quick-displaying-the-validation-errors) exist for a given attribute. Within an `@error` directive, you may echo the `$message` variable to display the error message:
|
1543
1024
|
|
1544
|
-
```
|
1545
|
-
<!-- /resources/views/post/create.
|
1025
|
+
```rblade
|
1026
|
+
<!-- /resources/views/post/create.rblade -->
|
1546
1027
|
|
1547
1028
|
<label for="title">Post Title</label>
|
1548
1029
|
|
@@ -1557,8 +1038,8 @@ The `@error` directive may be used to quickly check if [validation error message
|
|
1557
1038
|
|
1558
1039
|
Since the `@error` directive compiles to an "if" statement, you may use the `@else` directive to render content when there is not an error for an attribute:
|
1559
1040
|
|
1560
|
-
```
|
1561
|
-
<!-- /resources/views/auth.
|
1041
|
+
```rblade
|
1042
|
+
<!-- /resources/views/auth.rblade -->
|
1562
1043
|
|
1563
1044
|
<label for="email">Email address</label>
|
1564
1045
|
|
@@ -1569,8 +1050,8 @@ Since the `@error` directive compiles to an "if" statement, you may use the `@el
|
|
1569
1050
|
|
1570
1051
|
You may pass [the name of a specific error bag](/docs/{{version}}/validation#named-error-bags) as the second parameter to the `@error` directive to retrieve validation error messages on pages containing multiple forms:
|
1571
1052
|
|
1572
|
-
```
|
1573
|
-
<!-- /resources/views/auth.
|
1053
|
+
```rblade
|
1054
|
+
<!-- /resources/views/auth.rblade -->
|
1574
1055
|
|
1575
1056
|
<label for="email">Email address</label>
|
1576
1057
|
|
@@ -1586,25 +1067,25 @@ You may pass [the name of a specific error bag](/docs/{{version}}/validation#nam
|
|
1586
1067
|
<a name="stacks"></a>
|
1587
1068
|
## Stacks
|
1588
1069
|
|
1589
|
-
|
1070
|
+
RBlade allows you to push to named stacks which can be rendered elsewhere in another component. This can be particularly useful for specifying any JavaScript libraries required by your child views:
|
1590
1071
|
|
1591
|
-
```
|
1072
|
+
```rblade
|
1592
1073
|
@push('scripts')
|
1593
1074
|
<script src="/example.js"></script>
|
1594
1075
|
@endpush
|
1595
1076
|
```
|
1596
1077
|
|
1597
1078
|
If you would like to `@push` content if a given boolean expression evaluates to `true`, you may use the `@pushIf` directive:
|
1598
|
-
|
1599
|
-
```
|
1600
|
-
@pushIf(
|
1079
|
+
**TODO add this**
|
1080
|
+
```rblade
|
1081
|
+
@pushIf(shouldPush, 'scripts')
|
1601
1082
|
<script src="/example.js"></script>
|
1602
1083
|
@endPushIf
|
1603
1084
|
```
|
1604
1085
|
|
1605
1086
|
You may push to a stack as many times as needed. To render the complete stack contents, pass the name of the stack to the `@stack` directive:
|
1606
1087
|
|
1607
|
-
```
|
1088
|
+
```rblade
|
1608
1089
|
<head>
|
1609
1090
|
<!-- Head Contents -->
|
1610
1091
|
|
@@ -1614,7 +1095,7 @@ You may push to a stack as many times as needed. To render the complete stack co
|
|
1614
1095
|
|
1615
1096
|
If you would like to prepend content onto the beginning of a stack, you should use the `@prepend` directive:
|
1616
1097
|
|
1617
|
-
```
|
1098
|
+
```rblade
|
1618
1099
|
@push('scripts')
|
1619
1100
|
This will be second...
|
1620
1101
|
@endpush
|
@@ -1626,46 +1107,12 @@ If you would like to prepend content onto the beginning of a stack, you should u
|
|
1626
1107
|
@endprepend
|
1627
1108
|
```
|
1628
1109
|
|
1629
|
-
<a name="service-injection"></a>
|
1630
|
-
## Service Injection
|
1631
|
-
|
1632
|
-
The `@inject` directive may be used to retrieve a service from the Laravel [service container](/docs/{{version}}/container). The first argument passed to `@inject` is the name of the variable the service will be placed into, while the second argument is the class or interface name of the service you wish to resolve:
|
1633
|
-
|
1634
|
-
```blade
|
1635
|
-
@inject('metrics', 'App\Services\MetricsService')
|
1636
|
-
|
1637
|
-
<div>
|
1638
|
-
Monthly Revenue: {{ $metrics->monthlyRevenue() }}.
|
1639
|
-
</div>
|
1640
|
-
```
|
1641
|
-
|
1642
|
-
<a name="rendering-inline-blade-templates"></a>
|
1643
|
-
## Rendering Inline Blade Templates
|
1644
|
-
|
1645
|
-
Sometimes you may need to transform a raw Blade template string into valid HTML. You may accomplish this using the `render` method provided by the `Blade` facade. The `render` method accepts the Blade template string and an optional array of data to provide to the template:
|
1646
|
-
|
1647
|
-
```php
|
1648
|
-
use Illuminate\Support\Facades\Blade;
|
1649
|
-
|
1650
|
-
return Blade::render('Hello, {{ $name }}', ['name' => 'Julian Bashir']);
|
1651
|
-
```
|
1652
|
-
|
1653
|
-
Laravel renders inline Blade templates by writing them to the `storage/framework/views` directory. If you would like Laravel to remove these temporary files after rendering the Blade template, you may provide the `deleteCachedView` argument to the method:
|
1654
|
-
|
1655
|
-
```php
|
1656
|
-
return Blade::render(
|
1657
|
-
'Hello, {{ $name }}',
|
1658
|
-
['name' => 'Julian Bashir'],
|
1659
|
-
deleteCachedView: true
|
1660
|
-
);
|
1661
|
-
```
|
1662
|
-
|
1663
1110
|
<a name="rendering-blade-fragments"></a>
|
1664
1111
|
## Rendering Blade Fragments
|
1665
|
-
|
1112
|
+
**TODO this?**
|
1666
1113
|
When using frontend frameworks such as [Turbo](https://turbo.hotwired.dev/) and [htmx](https://htmx.org/), you may occasionally need to only return a portion of a Blade template within your HTTP response. Blade "fragments" allow you to do just that. To get started, place a portion of your Blade template within `@fragment` and `@endfragment` directives:
|
1667
1114
|
|
1668
|
-
```
|
1115
|
+
```rblade
|
1669
1116
|
@fragment('user-list')
|
1670
1117
|
<ul>
|
1671
1118
|
@foreach ($users as $user)
|
@@ -1703,7 +1150,7 @@ view('dashboard', ['users' => $users])
|
|
1703
1150
|
|
1704
1151
|
<a name="extending-blade"></a>
|
1705
1152
|
## Extending Blade
|
1706
|
-
|
1153
|
+
**TODO this?**
|
1707
1154
|
Blade allows you to define your own custom directives using the `directive` method. When the Blade compiler encounters the custom directive, it will call the provided callback with the expression that the directive contains.
|
1708
1155
|
|
1709
1156
|
The following example creates a `@datetime($var)` directive which formats a given `$var`, which should be an instance of `DateTime`:
|
@@ -1745,7 +1192,7 @@ As you can see, we will chain the `format` method onto whatever expression is pa
|
|
1745
1192
|
|
1746
1193
|
<a name="custom-echo-handlers"></a>
|
1747
1194
|
### Custom Echo Handlers
|
1748
|
-
|
1195
|
+
**TODO this? Need to do something similar for attribute manager anyway**
|
1749
1196
|
If you attempt to "echo" an object using Blade, the object's `__toString` method will be invoked. The [`__toString`](https://www.php.net/manual/en/language.oop5.magic.php#object.tostring) method is one of PHP's built-in "magic methods". However, sometimes you may not have control over the `__toString` method of a given class, such as when the class that you are interacting with belongs to a third-party library.
|
1750
1197
|
|
1751
1198
|
In these cases, Blade allows you to register a custom echo handler for that particular type of object. To accomplish this, you should invoke Blade's `stringable` method. The `stringable` method accepts a closure. This closure should type-hint the type of object that it is responsible for rendering. Typically, the `stringable` method should be invoked within the `boot` method of your application's `AppServiceProvider` class:
|
@@ -1765,13 +1212,13 @@ In these cases, Blade allows you to register a custom echo handler for that part
|
|
1765
1212
|
|
1766
1213
|
Once your custom echo handler has been defined, you may simply echo the object in your Blade template:
|
1767
1214
|
|
1768
|
-
```
|
1215
|
+
```rblade
|
1769
1216
|
Cost: {{ $money }}
|
1770
1217
|
```
|
1771
1218
|
|
1772
1219
|
<a name="custom-if-statements"></a>
|
1773
1220
|
### Custom If Statements
|
1774
|
-
|
1221
|
+
**TODO this**
|
1775
1222
|
Programming a custom directive is sometimes more complex than necessary when defining simple, custom conditional statements. For that reason, Blade provides a `Blade::if` method which allows you to quickly define custom conditional directives using closures. For example, let's define a custom conditional that checks the configured default "disk" for the application. We may do this in the `boot` method of our `AppServiceProvider`:
|
1776
1223
|
|
1777
1224
|
use Illuminate\Support\Facades\Blade;
|
@@ -1788,7 +1235,7 @@ Programming a custom directive is sometimes more complex than necessary when def
|
|
1788
1235
|
|
1789
1236
|
Once the custom conditional has been defined, you can use it within your templates:
|
1790
1237
|
|
1791
|
-
```
|
1238
|
+
```rblade
|
1792
1239
|
@disk('local')
|
1793
1240
|
<!-- The application is using the local disk... -->
|
1794
1241
|
@elsedisk('s3')
|