es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo se puede cambiar dinámicamente la variable CSS “from” desde “Laravel Nova”?

¿Cómo se puede cambiar dinámicamente la variable CSS “from” desde “Laravel Nova”?

19 Jun, 2023 Programación

Estoy utilizando Nova Settings en el que se utiliza un campo selector de color.

NovaServiceProvider-

\OptimistDigital\NovaSettings\NovaSettings::addSettingsFields([
Panel::make('Colors', [
Color::make('Color primario')->slider(),
Color::make('Color secundario')->slider(),
]),
]);

$primary-color = nova_get_setting('primary_color');

En mi archivo CSS –

:root {
--primary-color: rgb(255, 0, 0); //Quiero utilizar el color de configuración de Nova aquí
--secondary-color: rgb(255, 197, 6);
}

¿Cómo puedo llamar al valor de color de configuración de Nova en el archivo CSS para cambiar los colores dinámicamente?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para llamar al valor de color de la configuración Nova en el archivo CSS, se puede utilizar la sintaxis de propiedades personalizadas de CSS. Reemplaza los valores de color codificados en el selector :root con la función var(), como se muestra a continuación:

    :root {
    --primary-color: var(--nova-color-primary, rgb(255, 0, 0));
    --secondary-color: var(--nova-color-secondary, rgb(255, 197, 6));
}

    La función var() tiene dos parámetros: el primero es el nombre de la propiedad personalizada y el segundo es un valor de fallback que se utilizará si la propiedad personalizada no está definida. En este caso, utilizamos --nova-color-primary y --nova-color-secondary como nombres de propiedad personalizada y los colores codificados originales como valores de fallback.

    Para establecer los valores de la propiedad personalizada dinámicamente desde la configuración Nova, puedes mostrarlos como estilos en línea en el elemento HTML body usando la sintaxis blade de Laravel:

    <body style="--nova-color-primary: {{ nova_get_setting('primary_color', '#ff0000') }}; --nova-color-secondary: {{ nova_get_setting('secondary_color', '#ffc506') }};">

    Esto mostrará los valores de la propiedad personalizada como atributos de estilo en línea en el elemento body, que luego se pueden utilizar en el archivo CSS a través de la función var() como se muestra arriba.

Comments are closed.