CSS Klassen verwenden

Innerhalb der Cascading Style Sheet Dateien eines Framework Controls werden die CSS-Klassenselektoren verwendet.

Zulässige Selektoren

Folgende CSS-Selektoren können innerhalb einer CSS-Datei eines Framework Controls bedingt verwendet werden:

	Bei Klassenselektoren werden neue CSS-Klassen für ein Framework Control definiert, wodurch es keine Überschreibungen von CSS-Styles außerhalb des Framework Controls gibt. Sollen Typ- oder Attributselektoren verwendet werden, muss darauf geachtet werden, dass diese nur für die Klasse des Framework Controls verwendet werden und keine Styles außerhalb des Framework Controls überschreiben (Nachfahrenselektor):

.framework-control-js1 a {
   color: red;
}

Folgende CSS-Selektoren sollten nicht innerhalb einer CSS-Datei eines Framework Controls verwendet werden:

ID-Selektoren: Innerhalb eines Framework Controls dürfen aufgrund der Mehrfachinstanziierung keine festen IDs vergeben werden.
Universalselektor: Ein Framework Control sollte bei der Instanziierung keine Styles außerhalb des Controls überschreiben.

CSS-Klassen können in der Template.html-Datei verwendet oder dynamisch zur Laufzeit innerhalb der Source.js-Datei hinzugefügt werden.

.framework-control-js1-template
{
   width: 100%;
   height: 100%;
}

Die Verwendung einer CSS-Klasse innerhalb der Template.html-Datei erfolgt über das HTML-Attribut „class“:

<div class="framework-control-js1-template tchmi-box">
   
</div>

	Die Klasse „`tchmi-box`“ setzt CSS-Eigenschaften zur einfacheren Positionierung des Elementes und kann bei allen positionierten HTML-Elementen verwendet werden.

Die dynamische Verwendung einer CSS-Klasse innerhalb der Source.js kann z. B. über die jQuery-Funktion „.addClass()“ realisiert werden:

this.__elementTemplateRoot.addClass('framework-control-js1-my-custom-class');