@@ -42,7 +42,7 @@ A real-time product search component might look like this::
42
42
}
43
43
}
44
44
45
- .. code-block :: html+ twig
45
+ .. code-block :: twig
46
46
47
47
{# templates/components/ProductSearch.html.twig #}
48
48
{# for the Live Component to work, there must be a single root element
@@ -2236,7 +2236,7 @@ Defer Rendering
2236
2236
If a component is heavy to render, you can defer rendering it until after
2237
2237
the page has loaded. To do this, add the ``defer `` option:
2238
2238
2239
- .. code-block :: html+ twig
2239
+ .. code-block :: twig
2240
2240
2241
2241
{{ component('SomeHeavyComponent', { defer: true }) }}
2242
2242
@@ -2252,21 +2252,21 @@ real component once the page has loaded.
2252
2252
To add some loading text before the real component is loaded, use the
2253
2253
``loading-template `` option to point to a template:
2254
2254
2255
- .. code-block :: html+ twig
2255
+ .. code-block :: twig
2256
2256
2257
2257
{{ component('SomeHeavyComponent', { defer: true, loading-template: 'spinning-wheel.html.twig' }) }}
2258
2258
2259
2259
Or override the ``loadingContent `` block:
2260
2260
2261
- .. code-block :: html+ twig
2261
+ .. code-block :: twig
2262
2262
2263
2263
{% component SomeHeavyComponent with { defer: true }) }}
2264
2264
{% block loadingContent %}Loading...{% endblock %}
2265
2265
{{ end_component() }}
2266
2266
2267
2267
To change the initial tag from a ``div `` to something else, use the ``loading-tag `` option:
2268
2268
2269
- .. code-block :: html+ twig
2269
+ .. code-block :: twig
2270
2270
2271
2271
{{ component('SomeHeavyComponent', { defer: true, loading-tag: 'span' }) }}
2272
2272
@@ -2282,11 +2282,11 @@ This is useful for components that are far down the page and are not needed unti
2282
2282
2283
2283
To use this, add the ``lazy `` attribute to your component:
2284
2284
2285
- .. code-block :: html+ twig
2285
+ .. code-block :: twig
2286
2286
2287
2287
{{ component('SomeHeavyComponent', { lazy: true }) }}
2288
2288
2289
- .. code-block :: html+ twig
2289
+ .. code-block :: twig
2290
2290
2291
2291
<twig:Acme foo="bar" lazy />
2292
2292
0 commit comments