Fermer

janvier 14, 2019

Options pour les composants de style dans Kendo UI Builder


En ce qui concerne le style des composants, il est utile de connaître vos options. Lisez la suite pour savoir ce qui fonctionnera et ce qui ne fonctionnera pas pour vous.

Récemment, je souhaitais appliquer un style de bordure au composant de classement que nous avons construit dans Kendo UI Builder dans un . ] précédent article de blog . J'ai ajouté les instructions CSS de bordure dans les "styles de vue" (disponibles dans le panneau des propriétés), mais cela n'a pas fonctionné.

Par exemple, ajouter simplement le style ci-dessous n'a aucun effet:

.kbc-rating-container {

de la frontière : de 1px [19659009] solid black ;

}

Dans cet article de blog, nous allons apprendre pourquoi cela n'a pas fonctionné et quelles sont vos options aborde le style de vos composants.

Pourquoi l'ajout de ce style n'a pas fonctionné?

Pour comprendre cela, nous devons étudier le fonctionnement des styles de vue. Pour cela, nous allons créer une vue vierge avec un composant HTML contenant les éléments suivants:

< div class = "test-class" > Composant HTML personnalisé </ div >

Et dans les styles de vue, nous entrons:

.test-class { couleur : chartreuse; }

Lorsque cette vue s'affiche, nous obtenons quelque chose comme ceci:

 title "title =" title "/></p data-recalc-dims=

Inspectons maintenant le composant HTML dans les outils de développement de Chrome.

] < div _ngcontent-c5 = "" class = "test-class" > Composant HTML personnalisé </ div >

Et dans la fenêtre des styles, nous voyons que notre classe de test CSS a été générée sous la forme:

.test-class [_ngcontent-c 5 ] {

couleur : chartreuse;

}

Cette syntaxe CSS signifie simplement «appliquer une chartreuse des couleurs à tout élément ayant fait l'objet d'un test -class et _ngcontent-c5. ”L'utilisation d'un attribut unique génère des styles de cadrage pour une vue spécifique et évite ainsi les collisions avec d'autres vues. Pour en savoir plus sur ceci cliquez ici .

Maintenant retour à notre problème: wh fr nous inspectons le DOM d’une vue vierge contenant le composant d’évaluation, nous avons:

< div _ngcontent-c6 = "" class = [19659020] "kbc-rating-container" >

et