Directiva @class
Comprar curso

45. Directiva @class

En este capítulo, aprenderás cómo utilizar la directiva @class en Laravel 10. La directiva @class se utiliza para agregar clases CSS dinámicamente a elementos HTML en tus vistas.


1 comentarios

Inicia sesión para comentar

Comentarios:

  • Victor Arana Flores

    Victor Arana Flores hace 11 meses Destacado

    La directiva @class permite compilar condicionalmente una cadena de clase CSS. Se le puede pasar una matriz de clases donde la clave de la matriz contiene la clase o clases que deseas agregar, mientras que el valor es una expresión booleana. Si el elemento de la matriz tiene una clave numérica, siempre se incluirá en la lista de clases representadas.

    En el siguiente ejemplo, se utiliza la directiva @class para agregar diferentes clases según el estado de las variables $isActive y $hasError. También se incluye una versión estática de las clases para comparar:

    @php
        $isActive = false;
        $hasError = true;
    @endphp
     
    <span @class([
        'p-4',
        'font-bold' => $isActive,
        'text-gray-500' => ! $isActive,
        'bg-red' => $hasError,
    ])></span>
     
    <span class="p-4 text-gray-500 bg-red"></span>

    De manera similar, la directiva @style se puede utilizar para agregar estilos CSS en línea de forma condicional a un elemento HTML. En este ejemplo, se agrega la propiedad background-color: red y se cambia la propiedad font-weight según el valor de la variable $isActive:

    @php
        $isActive = true;
    @endphp
     
    <span @style([
        'background-color: red',
        'font-weight: bold' => $isActive,
    ])></span>
     
    <span style="background-color: red; font-weight: bold;"></span>

    Recuerda que utilizar estas directivas puede mejorar la legibilidad y el mantenimiento de tu código, y también puede tener un impacto positivo en la optimización para motores de búsqueda al permitirte agregar clases y estilos de forma condicional.