Update html_cva.rst

twigphp · Dec 13, 2024 · 819a69b · 819a69b
1 parent fa8544c
commit 819a69b
Showing 1 changed file with 10 additions and 10 deletions.
diff --git a/doc/functions/html_cva.rst b/doc/functions/html_cva.rst
@@ -20,8 +20,8 @@ function where you define ``base`` classes that should always be present and the
 
     {# templates/alert.html.twig #}
     {% set alert = html_cva(
-        base='alert',
-        variants={
+        base: 'alert',
+        variants: {
             color: {
                 blue: 'bg-blue',
                 red: 'bg-red',
@@ -48,10 +48,10 @@ Then use the ``color`` and ``size`` variants to select the needed classes:
     // class="alert bg-red text-md"
 
     {{ include('alert.html.twig', {'color': 'green', 'size': 'sm'}) }}
-    // class="alert bg-green text-sm"
+    // class"alert bg-green text-sm"
 
     {{ include('alert.html.twig', {'color': 'red', 'class': 'flex items-center justify-center'}) }}
-    // class="alert bg-red flex items-center justify-center"
+    // class"alert bg-red flex items-center justify-center"
 
 CVA and Tailwind CSS
 --------------------
@@ -84,8 +84,8 @@ when multiple other variant conditions are met:
 .. code-block:: html+twig
 
     {% set alert = html_cva(
-        base='alert',
-        variants={
+        base: 'alert',
+        variants: {
             color: {
                 blue: 'bg-blue',
                 red: 'bg-red',
@@ -97,7 +97,7 @@ when multiple other variant conditions are met:
                 lg: 'text-lg',
             }
         },
-        compoundVariants=[{
+        compoundVariants: [{
             // if color = red AND size = (md or lg), add the `font-bold` class
             color: ['red'],
             size: ['md', 'lg'],
@@ -128,8 +128,8 @@ If no variants match, you can define a default set of classes to apply:
 .. code-block:: html+twig
 
     {% set alert = html_cva(
-        base='alert',
-        variants={
+        base: 'alert',
+        variants: {
             color: {
                 blue: 'bg-blue',
                 red: 'bg-red',
@@ -146,7 +146,7 @@ If no variants match, you can define a default set of classes to apply:
                 lg: 'rounded-lg',
             }
         },
-        defaultVariant={
+        defaultVariant: {
             rounded: 'md',
         }
     ) %}