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


Published on • min read
Tags:

More Articles