Example of how to write a good docs about components:
The components are splitted in two parts:
1) the "component controller" is in laravel\Modules\Theme\View\Components\
2) the "component view" is in laravel\Modules\Theme\Resources\views\components\
Let's take an example:
- Open the folder laravel\Modules\Theme\View\Components\Swiper
- We have two files: Container.php and Item.php
- Create a new article on this link: http://geekpiu.com/admin/blog/en/articles > Nuovo
- Open Container.php
- We have a constructor with three parameters:
public function __construct( ?string $containerClass = '', ?string $wrapperClass = '', ?string $wrapperStyle = '' ) { $this->attrs['container_class'] = $containerClass; $this->attrs['wrapper_class'] = $wrapperClass; $this->attrs['wrapper_style'] = $wrapperStyle; }
The three parameters, in this case, are optional (because of the initial question mark). The default value in this case is always 0.
- Then open the view container.blade.php
We have the some variables:
<div class="swiper-container {{ $attrs['container_class'] }}"> <div class="swiper-wrapper {{ $attrs['wrapper_class'] }}" style="{{ $attrs['wrapper_style'] }}"> {{ $slot }} div>div>
but we have a $slot variable more.
The $slot variable is used to insert an item inside this component. The item can be a simple text, but can be also another sub-comoponent.
Then let's see.
- Open Item.php
This is the item who go inside the $slot variable of the previous container.
We can see another constructor in this file (all components have one)
public function __construct(?string $class = ' h-auto px-2', ?string $style = null) { $this->attrs['slide_class'] = $class; $this->attrs['slide_style'] = $style; }
In this case, there are two optionals parameters. The default value of $class is ' h-auto px-2', and the default of $style is null.
- Open item.blade.php
<div class="swiper-slide {{ $attrs['slide_class'] }}" style="{{ $attrs['slide_style'] }}"> {{ $slot }}div>
There are the same two vars, and another $slot.
In this $slot we could also insert a sub-item, but the best choice in this case is to write an html code, following this example.
laravel/Themes/DirectoryBs5/Main_files/html/docs/components-directory.html#swiper
Then the components will be included in some view following this syntax:
Code inside Slot
or
Code inside Slot
the names are in laravel\Modules\Theme\View\Components\_components.json (this file is renewd every time once deleted).
- Then the documentation pages will be like these:
Components > Swiper > Container
Folder Paths:
laravel\Modules\Theme\View\Components\Swiper
laravel\Modules\Theme\Resources\views\components\swiper
Component Name:
Variables:
Name Type Default
containerClass optional ''
wrapperClass optional ''
wrapperStyle optional ''
Has Slot? Yes
Is Tested? Yes
Components > Swiper > Item
Folder Paths:
laravel\Modules\Theme\View\Components\Swiper
laravel\Modules\Theme\Resources\views\components\swiper
Component Name:
Variables:
Name Type Default
class optional ' h-auto px-2'
style optional null
Has Slot? Yes
Is Tested? Yes