Matériau à changement de thème de conception Angulaire 2
Je suis en train d'utiliser Angulaire Des Matériaux 2 avec mon Angulaire 2 de la demande.
Je n'ai pas trouvé comment le matériau à changement de thème à l'échelle mondiale (primaryColor
, etc).
Je sais que Angulaires Matériau 2 est encore en alpha, mais est-il un moyen de le faire?
Avez-vous lu les docs pour angulaire de l'article 1? C'est peut-être similaire. Si il n'y a pas de docs pour 2 encore, essayez de regarder le code source pour comprendre. Ou de soulever une question sur leur github du projet.
OriginalL'auteur quen2404 | 2016-04-29
Vous devez vous connecter pour publier un commentaire.
https://github.com/angular/material2/issues/287
Gardez à l'esprit que nous sommes encore au début de l'alpha processus et, comme tel, de l'Api ou les comportements peuvent changer entre les versions.
Non, Google ne fournit pas de délais => "quand c'est prêt"
ce que im faire est de copier les styles de thème et de l'ajouter à la composante de la feuille de style est-il la bonne méthode à utiliser le thème?
Vous pouvez utiliser
:host md-xxx /deep/ some-inner-element { ... }
à atteindre dans le contenu dems-xxx
éléments et de changer de style.Je ne comprenais pourrait vous donner tout lien utile, serait d'une grande aide!
OriginalL'auteur Günter Zöchbauer
Voici un exemple de la dynamique Angulaire Matériau thème de la mise en œuvre du Angulaire 5.1 et de la quantité de Matériel 5.0.
(edit) - Actuellement testé et de travail dans angulaire 7+.
De travail modifiable exemple - https://stackblitz.com/edit/dynamic-material-theming
Dans le thème.scss fichier, inclure un thème par défaut(remarquez qu'il n'est pas maintenu sous un nom de classe - c'est donc Angulaire utilisera la valeur par défaut), puis une lumière et un thème sombre.
thème.scss
Dans l'application.fichier de composant, comprennent OverlayContainer de @angulaire/cdk/overlay. Vous pouvez trouver Angulaire de la documentation pour ce ici https://material.angular.io/guide/theming, bien que leur mise en œuvre est un peu différent. Veuillez noter que j'ai également eu à inclure OverlayModule comme une importation dans l'app.module ainsi.
Dans mon application.fichier de composant, j'ai aussi déclaré
@HostBinding('class') componentCssClass;
de la variable qui sera utilisée pour définir le thème, en tant que classe.app.composante.ts
app.le module.ts
Enfin, appelez le onSetTheme fonction de votre vue.
app.component.html
Vous pouvez envisager d'utiliser un observables, de sorte que la fonctionnalité pourrait être plus dynamique.
Désolé, j'ai donné plus de détails dans le post.
Merci de ne pas poster à l'identique des réponses à de multiples questions. Publier une bonne réponse, puis voter/drapeau pour fermer les autres questions comme des doublons. Si la question n'est pas un doublon, d'adapter vos réponses à la question.
C'est cool, mais corrigez-moi si je me trompe; ce n'est pas toujours de nous donner le contrôle, par exemple, permettre à un utilisateur de choisir leur accent/couleurs primaires indépendamment les uns des autres n'est ce pas? À moins que nous de créer un thème pour chaque combinaison de couleurs, les utilisateurs sont toujours enfermés dans des thèmes prédéfinis? J'aimerais pour nos utilisateurs d'être en mesure de créer leurs propres thèmes.
Malheureusement, @Jus10 - Ce n'est pas possible actuellement, mais il y a eu des discussions sur l'intégration de propriétés personnalisées dans la bibliothèque pour cela. On dirait qu'ils se sont fixé pour objectif ~2020, quand IE soutien meurt. github.com/angular/material2/issues/4352#issuecomment-449310193
OriginalL'auteur K. Waite
Voici le lien vers l'angle de matériel thématisation guide - https://material.angular.io/guide/theming
Et voici un exemple d'application qui implémente la thématisation de l'approche décrite dans le guide - https://github.com/jelbourn/material2-app
OriginalL'auteur Alec Kravets