web-dev-qa-db-fra.com

Dégradé de couleur de fond dans Ionic 2

J'essaie de définir la couleur de fond de mon application à l'aide de la variable $background-color dans le fichier variables.scss. Cela fonctionne bien lorsque vous définissez uniquement une couleur, telle que #000 ou #fff, mais vous ne pouvez pas le faire fonctionner avec un dégradé.

$background-color: linear-gradient(to bottom, #000 0%, #fff 100%);

Ce code génère l'erreur Sass suivante:

argument '$color' of 'rgba($color, $alpha)' must be a color Backtrace.

Alors, comment puis-je définir la couleur de fond pour être un dégradé?

csssassionic2
8
Alexandru Pufan

C'est le code scss que j'utilise pour mon propre dégradé d'arrière-plan. 

$SIDEMENU_TOP: #A23C4B;
$SIDEMENU_BOTTOM: #ff9068;
$SIDEMENU_TRANSPARENCY: rgba(255,255,255,0.4);


.side-menu-gradient{
    background: -webkit-gradient(left top, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
    background: -o-linear-gradient(bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
    background: -moz-linear-gradient(bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
    background: linear-gradient(to bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
}

(Peut-être très inspiré de Ionic Creator - Créer de beaux Sidemenus (YouTube)

3
Ivar Reukers

Si vous souhaitez définir la couleur d'arrière-plan d'une page, par exemple home.html page, sur un dégradé, procédez comme suit:

  1. Dans home.html, vous devriez avoir une classe appelée home dans la balise ion-content:

    <ion-content padding class="home">
   ...
</ion-content>

    Allez dans le fichier home.scss (créez-en un si vous ne l'avez pas) et définissez la classe home:

    .home {
    background: linear-gradient(to bottom,  #000 0%, #fff 100%);
}

  2. Assurez-vous que ce fichier est compilé en l'important dans le fichier app.css:

    @import "../pages/home/home";

Insérez cette ligne de code dans votre fichier app.css.

Faites ionic run Android dans votre Terminal et ... vous aurez un fond dégradé pour votre page home!

Terminé!

2
Stefan

La variable $background-color ne fonctionnera pas à la place, utilisez $app-background

Exemple: $app-background: linear-gradient(to bottom, #000 0%, #fff 100%);

1
Ray