diff --git a/readme.md b/readme.md index 005848b..4016268 100644 --- a/readme.md +++ b/readme.md @@ -241,12 +241,270 @@ With namespaces you can define a top level root path to your components like sho ### Slots +Your components can inject code in specific slots you define, and then you can fill this content when you use the component. +Find below a simple example. + +Create the component: + +```html + +
+
+ +
+
+ +
+
+ +
+
+``` + +Use the component: + +```html + + + Header content + Body content + Footer content + +``` + +Result: + +```html + +
+
+ Header content +
+
+ Body content +
+
+ Footer content +
+
+``` + +By default the content is replaced, but you can also prepend or append the content, or keep the default content by not filling the slot. + +Add some default content in the component: + +```html + +
+
+ Default header +
+
+ content +
+
+ Footer +
+
+``` + +```html + + + Prepend body + content + +``` + +Result: + +```html + +
+
+ Default header +
+
+ Prepend body content +
+
+ Footer content +
+
+``` + ### Stacks +You can push content to named stacks which can be rendered somewhere else in another place. This can be particularly useful for specifying any JavaScript or CSS required by your components. + +First of all define a `` anywhere in your code, for example: + +```html + + + + + + + + + Header content + Body content + Footer content + + + + + +``` + +Then in modal components, or any other child components, you can push content to this stack. + +```html + +
+
+ +
+
+ +
+
+ +
+
+ + + + + + + + +``` + +The output will be: + +```html + + + + + + +
+
+ Header content +
+
+ Body content +
+
+ Footer content +
+
+ + + +``` + +The `once` attribute allows you to push content only once per rendering cycle. For example, if you are rendering a given component within a loop, you may wish to only push the JavaScript and CSS the first time the component is rendered. + +Example. + +```html + +
+ +
+ + + + + + + + + + +``` + +By default the content is pushed in the stack in the given order. +If you would like to prepend content onto the beginning of a stack, you should use the `prepend` attribute: + +```html + + + + + + + + + + + +``` + ### Props +TODO... + ### Attributes +Your can pass any attributes to your components and this will be added to the first element of your component. +By default `class` and `style` are merged with existing `class` and `style` attribute of the first element of your component. +All others attributes are override by default. +Only attribute not defined as `props` will be processed. + +As already seen in basic example: + +``` html + + + +``` + +Use the component: + +``` html + + +``` + +Result: + +``` html + + +``` + +As you may notice the `label` attribute is not added as attribute, since it's defined as a `props`. + +If you are familiar with Laravel Blade, this is also how Blade handle this. + +As said early, class and style are merged by default, if you want to override them, just prepend `override:` to the attributes: + +``` html + + +``` + +Result: + +``` html + + +``` + +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. + ## Migration ## Contributing