Skip to content

Commit fde4de9

Browse files
committed
minor #4626 Tweaks html_cva docs (fabpot)
This PR was merged into the 3.x branch. Discussion ---------- Tweaks html_cva docs Commits ------- f14f220 Tweaks html_cva docs
2 parents 7b2fe7c + f14f220 commit fde4de9

File tree

1 file changed

+13
-14
lines changed

1 file changed

+13
-14
lines changed

doc/functions/html_cva.rst

+13-14
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55

66
The ``html_cva`` function was added in Twig 3.12.
77

8-
98
`CVA (Class Variant Authority)`_ is a concept from the JavaScript world and used
109
by the well-known `shadcn/ui`_ library.
1110
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:
4544
4645
{# index.html.twig #}
4746
{{ include('alert.html.twig', {'color': 'blue', 'size': 'md'}) }}
48-
// class="alert bg-blue text-md"
47+
{# class="alert bg-blue text-md" #}
4948
5049
{{ include('alert.html.twig', {'color': 'green', 'size': 'sm'}) }}
51-
// class="alert bg-green text-sm"
50+
{# class="alert bg-green text-sm" #}
5251
5352
{{ 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" #}
5554
5655
CVA and Tailwind CSS
5756
--------------------
@@ -68,11 +67,11 @@ with the ``html_cva()`` function:
6867
.. code-block:: html+twig
6968

7069
{% set alert = html_cva(
71-
// ...
70+
...
7271
) %}
7372

7473
<div class="{{ alert.apply({color, size}, class)|tailwind_merge }}">
75-
...
74+
...
7675
</div>
7776

7877
Compound Variants
@@ -98,27 +97,27 @@ when multiple other variant conditions are met:
9897
}
9998
},
10099
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
102101
color: ['red'],
103102
size: ['md', 'lg'],
104-
class: 'font-bold'
103+
class: 'font-bold',
105104
}]
106105
) %}
107106

108107
<div class="{{ alert.apply({color, size}) }}">
109-
...
108+
...
110109
</div>
111110

112111
{# index.html.twig #}
113112

114113
{{ 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" #}
116115

117116
{{ include('alert.html.twig', {color: 'green', size: 'sm'}) }}
118-
// class="alert bg-green text-sm"
117+
{# class="alert bg-green text-sm" #}
119118

120119
{{ 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" #}
122121

123122
Default Variants
124123
----------------
@@ -146,7 +145,7 @@ If no variants match, you can define a default set of classes to apply:
146145
lg: 'rounded-lg',
147146
}
148147
},
149-
defaultVariant: {
148+
default_variant: {
150149
rounded: 'md',
151150
}
152151
) %}
@@ -158,7 +157,7 @@ If no variants match, you can define a default set of classes to apply:
158157
{# index.html.twig #}
159158

160159
{{ 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" #}
162161

163162
.. note::
164163

0 commit comments

Comments
 (0)