Ionic 4: Hvordan tilføjer du flere farver og bruger dem som farve i knapper og mere?

Føj flere farver til Ionic 4, forventer de standardfarver

Hvordan kan jeg tilføje flere farver i Ionic 4 og bruge dem som farve i forskellige komponenter som knappen, varen osv.?

Hvis du arbejder med Ionic 4, har måden, hvorpå du tilføjer farver, ændret sig. Ionic 4 bruger CSS-variabler (en dejlig måde, hvis du spørger mig).

9 standardfarver i Ionic 4

Ionic har 9 standardfarver: Primær, sekundær, tertiær, succes, advarsel, fare, mørk, medium og lys. Og det bedste: Ionic bringer en farvegenerator, så du nemt kan ændre denne standardfarver: https://beta.ionicframework.com/docs/theming/color-generator. Du skal bare redigere farverne der og derefter importere dem til dine variables.scssin src / themfolder. Og dine farver er blevet ændret:

Ændring af standardfarverne i Ionic 4

Koden ser sådan ud:

 Primær 
 Primær.aktiveret 

Jeg vil have flere farver :)

Men hvad nu hvis du har brug for mere end 9 farver? Intet problem! Du kan tilføje dine egne farver. Og i slutningen kan du gøre noget sådan:

 Guld 

Jeg vil vise dig, hvordan du kan oprette en farve kaldet "guld" (efter det samme skema kan du tilføje endnu flere farver og bruge dem i dine komponenter).

Trin 1: Opret din farve

Jeg anbefaler dig at bruge Ionic Color Generator (https://beta.ionicframework.com/docs/theming/color-generator). Skift for eksempel den primære farve. Jeg vil have en guldfarve, så jeg ændrer den til # ffd700. Kopier nu koden nedenunder. Søg og erstat "primær" med guld, og kopier kun disse linjer. Så du skal have følgende:

--ion-farve-guld: # ffd700;
--ion-farve-guld-rgb: 255, 215, 0;
--ion-farve-guld-kontrast: # 000000;
--ion-farve-guld-kontrast-rgb: 0, 0, 0;
--ion-farve-guld-nuance: # e0bd00;
-ion-farve-guld-farvetone: # ffdb1a;

Trin 2: Føj dette til din scss-fil

Nu er det op til dig, hvor du tilføjer den nye farve. For eksempel kan du tilføje det til dine variabler.scss. Vær opmærksom på, at du indsætter det inde: rod. En anden metode kan være at oprette en colours.scss, tilføje: rootand indsætte den imellem. Derefter tilføjes @import "farver"; til din global.scss fil.

Trin 3: Definer farven på dine komponenter

Sidste trin er at oprette farveklassen. Dette er vigtigt, fordi ved at tilføje farve = ”guld” vil dette blive klassen ”ion-farve-guld”, og derfor er vi nødt til at skabe en stil til det. Så vi tilføjer følgende til vores colours.scss eller vores global.scss

.ion-farve-guld {
- ion-farve-base: var (- ion-farve-guld)! vigtig;
--ion-farve-base-rgb: var (- ion-farve-guld-rgb)! vigtig;
- ion-farve-kontrast: var (- ion-farve-guld-kontrast)! vigtig;
--ion-farve-kontrast-rgb: var (- ion-farve-guld-kontrast-rgb)! vigtig;
--ion-farve-nuance: var (- ion-farve-guld-nuance)! vigtig;
--ion-farvetone: var (- ion-farve-guldfarvet farve)! vigtigt;
}

Alt i alt er dette vores kode:

Også

 Vi har nu en guldknap :) 

vil blive:

Det er ikke vanskeligt at tilføje nye farver i Ionic 4, og forresten behøver du kun .ion-farve-guld og farverne direkte uden CSS-variabler, men jeg synes, det er det pænere;)

Bonus: Gør det lettere med SCSS

Trin 3 kan gøres lettere, når du tilføjer flere farver ved hjælp af SCSS. Vi tilføjer bare en scss-variabel, f.eks. $ CustomColors. Her tilføjer du alle dine tilpassede farver. Lav derefter en løkke med hver og udskift den hårdkodede farve med din scss-variabelfarve. Og så ser det bagefter ud:

$ customColors: ('hvid', 'info', 'guld', 'sølv', 'bronze', 'korrekt', 'forkert', 'grå');
@each $ farve i $ customColors {
.ion-farve - # {$ color} {
- ion-farve-base: var (- ion-farve - # {$ farve})! vigtig;
--ion-farve-base-rgb: var (- ion-farve - # {$ farve} -rgb)! vigtig;
--ion-farve-kontrast: var (- ion-farve - # {$ farve} -kontrast)! vigtig;
--ion-farve-kontrast-rgb: var (- ion-farve - # {$ farve} -kontrast-rgb)! vigtigt;
--ion-farve-skygge: var (- ion-farve - # {$ farve} -skygge)! vigtig;
--ion-farvetone: var (- ion-farve - # {$ farve} -farvet)! vigtigt;
}
}

Nu behøver du kun tilføje dine farver beskrevet i trin 1 og skal bare tilføje navnet til din scss-variabel.