Style-Tag in HTML-Vorlage (in Aurelia-Ansicht)?

Kann ich ein <style> Tag in eine Vorlage für eine Aurelia-Ansicht einfügen? Ich habe ein spezifisches Problem, wo, wenn ich ein <style> Tag in der Vorlage habe, mein Aurelia-Dialog nicht richtig ausgerichtet ist (es ist zum oberen Rand des Bildschirms geschwebt anstatt zentriert in der Mitte). Sobald ich das <style> Tag entferne, ist alles richtig platziert. Was ist der richtige Weg, um .css Klassen für eine Ansicht/Vorlage zu schreiben?Style-Tag in HTML-Vorlage (in Aurelia-Ansicht)?

Beispiel: Für meine Dialogkomponente (ähnlich einem Bootstrap-modal), habe ich eine dialog.html und dialog.js Innerhalb dialog.html sieht der Code so etwas wie dieses:

<template> 
    <style media="screen"> 
    .selectedBorder { 
     border: 1px solid black; 
    } 
    </style> 
    <ai-dialog> 
    <ai-dialog-header> 
     Header 
    </ai-dialog-header> 
    <ai-dialog-body> 
     Sample body information 
    </ai-dialog-body> 
    <ai-dialog-footer> 
     Footer info 
    </ai-dialog-footer> 
    </ai-dialog> 
</template>

bearbeiten : Ich habe es herausgefunden. Sie können <style> Tags in Vorlagen haben. Mein Problem war, dass ich eine Vorlage (Hauptbildschirmbereich) hatte, die eine andere Vorlage (Popup-Dialog) aufruft. Ich musste nur die <style> von der dialog.html in die HTML-Version der Hauptansicht verschieben und alles hat richtig funktioniert.

Quelle

2016-05-06 Rohhan

Dies ist vielleicht nicht der populäre Konsens, aber was ich getan habe, machen alle meine Kundenelemente containerless, Beseitigung der Markup Bloat und dann Namespace der Vorlageninhalt mit einem ID-Attribut. Zum Beispiel:

someView.html:

<body> 
    <avatar-pic containerless></avatar-pic> 
</body>

avatar-pic.html

<template> 
    <section class="avatar-pic"> 
     .... 
    </section> 
</template>

avatar-pic.css

.avatar-pic { 
    ...styles here 
}

Quelle

2017-04-14 20:30:31

Style-Tag in HTML-Vorlage (in Aurelia-Ansicht)?

Antwort

Verwandte Themen