5
5
6
6
The ``html_cva `` function was added in Twig 3.12.
7
7
8
-
9
8
`CVA (Class Variant Authority) `_ is a concept from the JavaScript world and used
10
9
by the well-known `shadcn/ui `_ library.
11
10
The CVA concept is used to render multiple variations of components, applying
@@ -45,13 +44,13 @@ Then use the ``color`` and ``size`` variants to select the needed classes:
45
44
46
45
{# index.html.twig #}
47
46
{{ include('alert.html.twig', {'color': 'blue', 'size': 'md'}) }}
48
- // class="alert bg-blue text-md"
47
+ {# class="alert bg-blue text-md" #}
49
48
50
49
{{ include('alert.html.twig', {'color': 'green', 'size': 'sm'}) }}
51
- // class="alert bg-green text-sm"
50
+ {# class="alert bg-green text-sm" #}
52
51
53
52
{{ include('alert.html.twig', {'color': 'red', 'class': 'flex items-center justify-center'}) }}
54
- // class="alert bg-red flex items-center justify-center"
53
+ {# class="alert bg-red flex items-center justify-center" #}
55
54
56
55
CVA and Tailwind CSS
57
56
--------------------
@@ -68,11 +67,11 @@ with the ``html_cva()`` function:
68
67
.. code-block :: html+twig
69
68
70
69
{% set alert = html_cva(
71
- // ...
70
+ ...
72
71
) %}
73
72
74
73
<div class="{{ alert.apply({color, size}, class)|tailwind_merge }}">
75
- ...
74
+ ...
76
75
</div>
77
76
78
77
Compound Variants
@@ -98,27 +97,27 @@ when multiple other variant conditions are met:
98
97
}
99
98
},
100
99
compound_variants: [{
101
- // if color = red AND size = (md or lg), add the `font-bold ` class
100
+ # if color = red AND size = (md or lg), add the `font-bold ` class
102
101
color: ['red'],
103
102
size: ['md', 'lg'],
104
- class: 'font-bold'
103
+ class: 'font-bold',
105
104
}]
106
105
) %}
107
106
108
107
<div class="{{ alert.apply({color, size}) }}">
109
- ...
108
+ ...
110
109
</div>
111
110
112
111
{# index.html.twig #}
113
112
114
113
{{ include('alert.html.twig', {color: 'red', size: 'lg'}) }}
115
- // class="alert bg-red text-lg font-bold"
114
+ {# class="alert bg-red text-lg font-bold" #}
116
115
117
116
{{ include('alert.html.twig', {color: 'green', size: 'sm'}) }}
118
- // class="alert bg-green text-sm"
117
+ {# class="alert bg-green text-sm" #}
119
118
120
119
{{ include('alert.html.twig', {color: 'red', size: 'md'}) }}
121
- // class="alert bg-green text-md font-bold"
120
+ {# class="alert bg-green text-md font-bold" #}
122
121
123
122
Default Variants
124
123
----------------
@@ -146,7 +145,7 @@ If no variants match, you can define a default set of classes to apply:
146
145
lg: 'rounded-lg',
147
146
}
148
147
},
149
- defaultVariant : {
148
+ default_variant : {
150
149
rounded: 'md',
151
150
}
152
151
) %}
@@ -158,7 +157,7 @@ If no variants match, you can define a default set of classes to apply:
158
157
{# index.html.twig #}
159
158
160
159
{{ include('alert.html.twig', {color: 'red', size: 'lg'}) }}
161
- // class="alert bg-red text-lg rounded-md"
160
+ {# class="alert bg-red text-lg rounded-md" #}
162
161
163
162
.. note ::
164
163
0 commit comments