Skip to content

Commit b5d9f86

Browse files
thewebartisan7thewebartisan7
committed
More readme
1 parent 9b853e6 commit b5d9f86

File tree

1 file changed

+178
-1
lines changed

1 file changed

+178
-1
lines changed

‎readme.md

+178-1
Original file line numberDiff line numberDiff line change
@@ -555,9 +555,186 @@ Result:
555555

556556
You can add custom rules how attributes are parsed, as behind the scene it's used [posthtml-attrs-parser](https://github.com/posthtml/posthtml-attrs-parser) plugin.
557557

558+
## Tips and tricks
559+
560+
You can work with `<slot>` and `<fill>` or you can create component for each "block" of your component, and you can also support both of them.
561+
You can find an example of this inside `examples/components/modal`. Below is a short explanation about the both approach.
562+
563+
### Using slots
564+
565+
Let's suppose we want to create a component for [bootstrap modal](https://getbootstrap.com/docs/5.2/components/modal/). The code required is:
566+
567+
```html
568+
<!-- Modal HTML -->
569+
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
570+
<div class="modal-dialog">
571+
<div class="modal-content">
572+
<div class="modal-header">
573+
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
574+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
575+
</div>
576+
<div class="modal-body">
577+
...
578+
</div>
579+
<div class="modal-footer">
580+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
581+
<button type="button" class="btn btn-primary">Save changes</button>
582+
</div>
583+
</div>
584+
</div>
585+
</div>
586+
```
587+
588+
There is almost three block of code: the header, the body and the footer.
589+
So we could create our component with three slot like below:
590+
591+
```html
592+
<!-- Modal component -->
593+
<div class="modal fade" tabindex="-1" aria-hidden="true">
594+
<div class="modal-dialog">
595+
<div class="modal-content">
596+
<div class="modal-header">
597+
<slot:header></slot:header>
598+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
599+
</div>
600+
<div class="modal-body">
601+
<slot:body></slot:body>
602+
</div>
603+
<div class="modal-footer">
604+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
605+
<slot:footer></slot:footer>
606+
</div>
607+
</div>
608+
</div>
609+
</div>
610+
```
611+
612+
In this case we can use it like:
613+
614+
```html
615+
<x-modal
616+
id="exampleModal"
617+
aria-labelledby="exampleModalLabel"
618+
>
619+
<slot:header>
620+
<h5 class="modal-title" id="exampleModalLabel">My modal</h5>
621+
</slot:header>
622+
623+
<slot:body>
624+
Modal body content goes here...
625+
</slot:body>
626+
627+
<slot:footer close="false">
628+
<button type="button" class="btn btn-primary">Confirm</button>
629+
</slot:footer>
630+
</x-modal>
631+
```
632+
633+
### Splitting component in small component
634+
635+
Another way is to split the component in small component, my preferred way, because you can pass attributes to each of them.
636+
So we create the component with a main component and then three different small component:
637+
638+
```html
639+
<!-- Main modal component -->
640+
<div class="modal fade" tabindex="-1" aria-hidden="true">
641+
<div class="modal-dialog">
642+
<div class="modal-content">
643+
<yield></yield>
644+
</div>
645+
</div>
646+
</div>
647+
```
648+
649+
```html
650+
<!-- Header modal component -->
651+
<div class="modal-header">
652+
<yield></yield>
653+
</div>
654+
```
655+
656+
```html
657+
<!-- Body modal component -->
658+
<div class="modal-body">
659+
<yield></yield>
660+
</div>
661+
```
662+
663+
```html
664+
<!-- Footer modal component -->
665+
<div class="modal-footer">
666+
<yield></yield>
667+
</div>
668+
```
669+
670+
And then you can use it like below example:
671+
672+
```html
673+
<x-modal
674+
id="exampleModal"
675+
aria-labelledby="exampleModalLabel"
676+
>
677+
<x-modal.header>
678+
<h5 class="modal-title" id="exampleModalLabel">My modal</h5>
679+
</x-modal.header>
680+
681+
<x-modal.body>
682+
Modal body content goes here...
683+
</x-modal.body>
684+
685+
<x-modal.footer>
686+
<button type="button" class="btn btn-primary">Confirm</button>
687+
</x-modal.footer>
688+
</x-modal>
689+
```
690+
691+
As said in this way you can pass attributes to each of them, without defining props.
692+
693+
### Combine slots and small component
694+
695+
You can also combine both way, and then use them with slots or with small component:
696+
697+
```html
698+
699+
<!-- Modal -->
700+
<div
701+
class="modal fade"
702+
tabindex="-1"
703+
aria-hidden="true"
704+
aria-modal="true"
705+
role="dialog"
706+
>
707+
<div class="modal-dialog">
708+
<div class="modal-content">
709+
<if condition="$slots.header?.filled">
710+
<x-modal.header>
711+
<slot:header></slot:header>
712+
</x-modal.header>
713+
</if>
714+
<if condition="$slots.body?.filled">
715+
<x-modal.body>
716+
<slot:body></slot:body>
717+
</x-modal.body>
718+
</if>
719+
<if condition="$slots.footer?.filled">
720+
<x-modal.footer close="{{ $slots.footer?.locals.close }}">
721+
<slot:footer></slot:footer>
722+
</x-modal.footer>
723+
</if>
724+
<yield></yield>
725+
</div>
726+
</div><!-- /.modal-dialog -->
727+
</div><!-- /.modal -->
728+
```
729+
730+
Now you can use your component with slots or with small components.
731+
As you may notice, by using slots, you already can use also your small components, and so you can also pass props
732+
via `$slots` which has all the `props` passed via slot, and as well check if slot is filled.
733+
558734
## Migration
559735

560-
TODO...
736+
If you are migrating from `posthtml-extend` and/or `posthtml-modules` then you can continue to keep them until you migrate all of your components.
737+
For continue to use current code without changing it, at the moment it's not yet fully supported, but it maybe come in near future.
561738

562739
## Contributing
563740

0 commit comments

Comments
 (0)