Kaip sukurti pasirinktinę temą kampinėje medžiagoje

„Angular Material“ yra puiki biblioteka, įgyvendinanti „Angular 2+“ medžiagos dizainą. Oficialus dokumentas yra pakankamas, atsižvelgiant į komponentų naudojimą, nors yra nedaug straipsnių apie tai, kaip pritaikyti pačią temą, konkrečiai, temoje naudojamas spalvas.

Šiame įraše norėčiau apibendrinti tai, ko išmokau šiais mėnesiais pritaikydamas „Angular Material“ temas.

Atkreipkite dėmesį, kad šis straipsnis NE apie „AngularJS“ medžiagą, kuri naudojama „AngularJS 1.x“.

Susijusios žinutės

Kai kurie įprasti įrašai apie temų pritaikymą:

  • „Kampinės medžiagos programos kūrimas“ - oficialus pritaikytų temų vadovas,
  • Tomo Trajano „Išsamus kampinių medžiagų temų vadovas“, kuriame pateikiama daugybė dokumentų be dokumentų. Labai rekomenduojama .

Neradau kitų naudingų pranešimų ir būčiau dėkingas, jei kas nors galėtų pateikti keletą išteklių komentaruose.

Kaip sukurti pasirinktinę temą

Sukurti materialią temą yra labai paprasta: jums reikia pasirinkti tik tris spalvas - pagrindinę , akcentinę ir įspėjančią, o kampinė medžiaga padarys visa kita už jus. Medžiagos paletės puslapyje paaiškinama, kaip jis veikia aiškiai, taip pat galite vizualiai sukurti temą naudodami „Color Tool“.

Kalbant apie kodą, jums tereikia sukurti šį temos failą:

// [email protected] '[email protected]/material/theming';
$my-theme-primary: mat-palette($mat-green);$my-theme-accent : mat-palette($mat-amber);$my-theme-warn : mat-palette($mat-red);
$my-theme: mat-light-theme( $my-theme-primary, $my-theme-accent, $my-theme-warn);

Tada turite pritaikyti šią temą pagrindiniame style.scssfaile:

@import "theme.scss";
@include mat-core();@include angular-material-theme($my-theme);

Kaip naudoti pasirinktinę temą komponentuose

Sukūrus savo temą, išaugs tokie reikalavimai:

Noriu sukurti teksto laukelį. Teksto spalva, fono spalva ir kraštinės spalva turėtų būti sukurta pagal mūsų pačių temą, o ne griežtai koduojant.

Šis reikalavimas yra gana įprastas - bet kokiu atveju galimybė naudoti komponentus yra būtent tai, kodėl mes norime sukurti pasirinktinę temą. Problema yra kaip.

„Mixin“ metodas

Pirmajame oficialiame dokumente, kuriame pasidalinau, buvo pasiūlytas SCSS mišinio naudojimo būdas. Aš tai vadinu „iš apačios į viršų“ metodu, kuris apima šiuos veiksmus:

  1. Kiekvienas komponentas apibrėžia temos derinį ir nusuka spalvas iš $themeparametro.
  2. Visuotinis theme.scssapibūdina pasirinktinę temą, tada apima visus komponentų temų derinius ir iškviečia juos su pasirinkta tema.

Be theme.scsspirmiau minėto apibrėžimo, kiekvienas komponentas turi sukurti tokį temos failą:

// src/app/comp-a/[email protected] '[email protected]/material/theming';
@mixin comp-a-theme($theme) { // define mixin $primary: map-get($theme, primary); // retrieve color def button { // apply theme to component background-color: mat-color($primary); }}

Tikriausiai norite custom-theme.scssimportuoti visas komponento lygio temas:

// src/app/[email protected] '[email protected]/material/theming';@import 'src/app/comp-a/comp-a.theme';@import 'src/app/comp-b/comp-b.theme';
@mixin custom-themes($theme) { @include comp-a-theme($theme); @include comp-b-theme($theme);}

Tada importuokite aukščiau nurodytus dalykus custom-theme.scssį savo theme.scss:

// [email protected] './custom-theme';@include custom-themes($my-theme);

Ši hierarchija veikia ir tikriausiai yra vienintelis būdas, kai reikia palaikyti kelias temas .

Tačiau dažniausiai mes palaikome tik vieną temą, o mišinio naudojimas gali būti sudėtingas. Daugiausia šio požiūrio yra trys trūkumai:

  1. Kiekvienai spalvų nuorodai reikia atskiro .theme.scssfailo.
  2. custom-theme.scssturi tiksliai žinoti, kurie komponentai teikia pasirinktines temas. Tai sukuria nereikalingas priklausomybes.
  3. Svarbiausia, kad komponentų lygio temos failai nėra inkapsuliuoti.

Pirmasis ir antrasis punktai yra gana savaime suprantami. Leiskite man šiek tiek paaiškinti 3 punktą. Tai susiję su tam tikromis pagrindinėmis žiniomis, vadinamomis „View Encapsulation“.

„Angular“ naudoja techniką, vadinamą „View Encapsulation“, kad komponento CSS būtų vietinis. Kitaip tariant, vienam komponentui apibrėžtos taisyklės išliks tame komponente ir neturės įtakos kitiems komponentams.

Tokiu būdu galite laisvai apibrėžti CSS klasės pavadinimą savo komponente, nesijaudindami dėl vardų konfliktų. Tačiau peržiūra apima tik tuo atveju, jei CSS yra apibrėžtas per @Component, t @Component({ styleUrls: ['./comp-a.scss'] }).

Kalbant apie mūsų pasirinktinį temos failą comp-a.theme.scss, kadangi jis yra importuojamas tiesiogiai custom-theme.scss, jo taisyklės nėra sujungtos, todėl jis bus taikomas visiems puslapio elementams. Aukščiau pateiktame pavyzdyje naudojau šį kodą (kuris buvo NETIESA!):

@mixin comp-a-theme($theme) { button { ... } // This will apply to ALL buttons!}

Bet tai pritaikys stilių visiems mygtukams, o ne tiems, kurie priklauso comp-atik. comp-a buttonNorint, kad šis darbas būtų teisingas, turite padaryti kažką panašaus .

Tiesioginis požiūris

Todėl siūlau geresnį požiūrį. Užuot naudoję „mixin“, kiekvienam komponentui leidžiame įtraukti temos failą ir tiesiogiai naudoti spalvų apibrėžimą.

Taikant šį metodą, komponento temos failas atrodys taip:

// NOTE: just do this in your regular scss file.// No need to create separate theme file!// src/app/comp-a/[email protected] 'src/theme.scss';
$primary: map-get($my-theme, primary);button { background-color: mat-color($primary);}

Ir viskas.

Let’s see how this works. First, theme related rules are put into the component SCSS file, so no extra component level theme file required. Second, the main theme.scss does not need to know component level themes (since it does not need to import them), so a simple theme definition is adequate. Third, the component SCSS file is used with @Component so it is encapsulated correctly, which means we can simply define rules for button.

Predefined Theme Keys

Probably you have noticed the next problem. What are the foreground, primary in above theme files ( map-get($my-theme, primary))? Are there any other keys I can use?

Na, šie „klavišai“ nurodo skirtingas temoje apibrėžtas spalvas. Vis dėlto neradau dokumentų, paaiškinančių šiuos „raktus“, todėl vienintelis būdas tai sužinoti yra perskaityti šaltinio kodą . (Nors ji sakė, kad geri programuotojai turėtų skaityti kodą, turintys skaityti kodą tikrai nėra geras ženklas bibliotekoje.)

Atidarykite node_modules/@angular/material/_theming.scssir pamatysite šių raktų apibrėžimus. Ateityje norėčiau apibendrinti raktus čia.

$theme |- primary |- accent |- warn |- foreground | |- base | |- divider | |- dividers | |- disabled | |- disabled-button | |- disabled-text | |- hint-text | |- secondary-text | |- icon | |- icons | |- text | |- slider-min | |- slider-off | `- slider-off-active |- background | |- status-bar | |- app-bar | |- background | |- hover | |- card | |- dialog | |- disabled-button | |- raised-button | |- focused-button | |- selected-button | |- selected-disabled-button | |- disabled-button-toggle | |- unselected-chip | `- disabled-list-option `- is-dark // bool, whether dark theme or not

Pvz., Jei komponente norite pateikti išjungtą tekstą, galite naudoti šį kodą:

$foreground: map-get($my-theme, foreground);.disabled-text { color: mat-color($foreground, disabled-text);}

Gerai, tai yra keletas pamokų, kurias išmokau kovodamas su kampine medžiaga. Tikiuosi, kad šis pranešimas bus naudingas, jei susidursite su panašiomis problemomis.