You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[](https://packagist.org/packages/performing/twig-components)
->setTemplatesPath('/relative/directory/to/components') // default is 'components'
25
+
->setTemplatesExtension('twig') // default is 'twig'
30
26
->setup();
31
27
```
32
28
33
29
To enable the package just pass your Twig environment object to the function and specify your components folder relative to your Twig templates folder.
34
30
35
-
### Craft CMS
31
+
### Configuration for Craft CMS
36
32
37
-
In Craft CMS you should do something like this.
33
+
In Craft CMS you should do something like this:
38
34
39
35
```php
40
36
// Module.php
@@ -44,33 +40,28 @@ if (Craft::$app->request->getIsSiteRequest()) {
->useGlobalContext() // use this to keep Twig context from CMS
107
+
->setup();
108
+
});
109
+
}
135
110
```
136
111
137
-
Alle features like subfolders are supported, like ```<x-forms.input></x-forms.input>``` will refer to ```plugins/namespace/pluginname/views/forms/input.htm```
112
+
> All features, like subfolders are supported. For example `<x-forms.input></x-forms.input>` will refer to `plugins/namespace/pluginname/views/forms/input.twig`.
138
113
114
+
## Usage
139
115
140
-
The components are just Twig templates in a folder of your choice (e.g. `components`) and can be used anywhere in your Twig templates. The slot variable is any content you will add between the opening and the close tag.
116
+
Components are just Twig templates in a folder of your choice (e.g. `/components`) and can be used anywhere in your Twig templates:
141
117
142
118
```twig
143
119
{# /components/button.twig #}
@@ -146,9 +122,9 @@ The components are just Twig templates in a folder of your choice (e.g. `compone
146
122
</button>
147
123
```
148
124
149
-
### Custom syntax
125
+
> The slot variable is any content you will add between the opening and the close tag.
150
126
151
-
To reach a component you need to use custom tag `x` followed by a `:` and the filename of your component.
127
+
To reach a component you need to use the dedicated tag `x` followed by `:` and the filename of your component without extension:
152
128
153
129
```twig
154
130
{# /index.twig #}
@@ -157,26 +133,69 @@ To reach a component you need to use custom tag `x` followed by a `:` and the fi
157
133
{% endx %}
158
134
```
159
135
136
+
It will render:
137
+
138
+
```twig
139
+
<button>
140
+
<strong>Click me</strong>
141
+
</button>
142
+
```
143
+
144
+
### Custom tags
145
+
146
+
The same behaviour can be obtained with a **special HTML syntax**.
You can also pass any params like you would using an `include`. The benefit is that you will have the powerful `attributes` variable to merge attributes or to change your component behaviour.
To reach components that are in **sub-folders** you can use _dot-notation_ syntax.
183
+
With **custom tags** you can pass any attribute to the component in different ways. To interprate the content as Twig you need to prepend the attribute name with a `:`, but it works also in other ways.
184
+
185
+
```twig
186
+
<x-button
187
+
:any="'evaluate' ~ 'twig'"
188
+
other="{{'this' ~ 'works' ~ 'too'}}"
189
+
another="or this"
190
+
this="{{'this' ~ 'does'}}{{'not work'}}"
191
+
>
192
+
Submit
193
+
</x-button>
194
+
```
195
+
196
+
### Subfolders
197
+
198
+
To reach components in subfolders you can use _dot-notation_ syntax.
180
199
181
200
```twig
182
201
{# /components/button/primary.twig #}
@@ -190,19 +209,10 @@ To reach components that are in **sub-folders** you can use _dot-notation_ synta
190
209
{% endx %}
191
210
```
192
211
193
-
### HTML syntax
194
-
195
-
The same behaviour can be obtained with a special HTML syntax. The previus component example can alse be used in this way.
196
-
197
-
```twig
198
-
{# /index.twig #}
199
-
<x-button class='bg-blue-600'>
200
-
<span class="text-lg">Click here!</span>
201
-
</x-button>
202
-
```
203
-
204
212
### Named slots
205
213
214
+
In case of use of multiple slots you can name them.
{% slot:title with {class: 'text-2xl'} %}Title{% endslot %}
234
+
{% slot:body %}Body{% endslot %}
235
235
{% endx %}
236
236
```
237
237
238
-
### Attributes
239
-
240
-
You can pass any attribute to the component in different ways. To interprate the content as Twig you need to prepend the attribute name with a `:` but it works also in other ways.
In addition to the specified directory, you can also reference components from a Twig namespace by prepending the namespace and a `:` to the component name. With a namespace defined like so:
250
+
In addition to the specified directory, you can also reference components from a Twig namespace by prepending the component name with `<namespace>:`.
Sometimes you may need to render a component but not know which component should be rendered until runtime. In this situation, you may use the built-in dynamic-component component to render the component based on a runtime value or variable:
273
+
### Dynamic components
274
+
275
+
Sometimes you may need to render a component but not know which component should be rendered until runtime.
276
+
In this situation, you may use the built-in `dynamic-component` to render the component based on a runtime value or variable:
0 commit comments