top trim

Einführung des s Namespace

Der s Namespace ist eine Sammlung an Style Attributen die auf jedes Element in einer Boxely Anwendung angewendet werden können. Die folgende Liste stellt eine unvollständige Liste an positioning, alignment, dimensions, und anderen Style Attributen zur Verfügung:

Positioning und Alignment Styles

Tabelle 2.1. Positioning und Alignment Styles

position

Legt fest, ob eine Box eine feste oder fließende Position einnimmt. Standard ist eine fließende Position. Wenn festes Positionieren benutzt wird, wird die Box versetzt relativ zum Ursprung (die obere linke Ecke) seiner übergeordneten (Parent) Box positioniert, und ihre eigene Breite und Höhe finden. Fließendes Positionieren ordnet die Boxen automatisch an, damit sie in ihre Parent Box passen.

Ein gültiger Wert ist "fixed". Wenn er weggelassen wird, wird "flow" Positioning verwendet. Alle anderen Werte sind nicht definiert.

top

Setzt die Position der oberen Kante des Objekts. Um die Position in Pixeln festzulegen, kann ein ganzzahliger Wert verwendet werden. Um einen Ort, relativ zum übergeordneten Objekt zu bestimmen, kann "start" (oben), "end" (unten), oder "center" verwendet werden.

Wichtig: Das top Attribut sollte nur verwendet werden, wenn das position Attribut auf "fixed" gesetzt ist.

left

Setzt die Position der linken Kante des Objekts. Um die Position in Pixeln festzulegen, kann ein ganzzahliger Wert verwendet werden. Um einen Ort, relativ zum übergeordneten Objekt zu bestimmen, kann "start" (links), "end" (rechts), oder "center" verwendet werden.

Wichtig: Das left Attribut sollte nur verwendet werden, wenn das position Attribut auf "fixed" gesetzt ist.

bottom

Setzt die Position der unteren Kante des Objekts. Um die Position in Pixeln festzulegen, kann ein ganzzahliger Wert verwendet werden. Um einen Ort, relativ zum übergeordneten Objekt zu bestimmen, kann "start" (unten), "end" (oben), oder "center" verwendet werden.

Wichtig: Das bottom Attribut sollte nur verwendet werden, wenn das position Attribut auf "fixed" gesetzt ist.

right

Setzt die Position der rechten Kante des Objekts. Um die Position in Pixeln festzulegen, kann ein ganzzahliger Wert verwendet werden. Um einen Ort, relativ zum übergeordneten Objekt zu bestimmen, kann "start" (rechts), "end" (links), oder "center" verwendet werden.

Wichtig: Das right Attribut sollte nur verwendet werden, wenn das position Attribut auf "fixed" gesetzt ist.

vAlign

Ordnet die Inhalte des Elements an der vertikalen Achse an. Gültige Werte sind "start" (oben), "end" (unten), "center", and "stretch" (strecken).

hAlign

Ordnet die Inhalte des Elements an der horizontalen Achse an. Gültige Werte sind "start" (links), "end" (rechts), "center", and "stretch" (strecken).


Dimension Styles

Tabelle 2.2. Dimension Styles

height

Legt die Höhe eines Objekts fest. Um die Höhe in Pixeln zu bestimmen, ist eine positive Ganzzahl zu verwenden.

width

Legt die Breite eines Objekts fest. Um die Höhe in Pixeln zu bestimmen, ist eine positive Ganzzahl zu verwenden.

minHeight

Legt die minimale Höhe eines Objekts in Pixeln fest.

minWidth

Legt die minimale Breite eines Objekts in Pixeln fest.

maxHeight

Legt die maximale Höhe eines Objekts in Pixeln fest.

maxWidth

Legt die maximale Breite eines Objekts in Pixeln fest.

flex

Legt fest, wie eine Container Box freien Platz an ihre enthaltenen Boxen freigibt. Wenn flex auf "1" gesetzt wird, streckt sich die Box um zusätzlichen Platz in der Parent Box einzunehmen. Wenn mehr als eine Child Box ein flex Attribut hat, wird die Box mit dem höheren Wert eine proportional höhere Menge an Platz einnehmen.


Fill, Stroke, Shadow, Bevel, Affine, und andere Styles

Tabelle 2.3. Fill, Stroke, Shadow, Bevel, Affine, und andere Styles

fill

Legt die Füllfarbe eines Objekts fest. Gültige Werte sind eingebaute Farben (wie "red" oder "blue"), Systemfarben, HEX Farben in den #ARGB und #RGB Formaten (wie "#FFFF0000" oder "#FF0000"), oder Bilder.

opacity

Legt die Durchsichtigkeit einer Füllung fest. Werte reichen von "0" (transparent) bis "100" (undurchsichtig).

stroke

Legt die Farbe des Randes eines Objekts fest.

strokeWidth

Legt die Breite des Randes eines Objekts fest.

strokeCornerRadius

Legt den Radius der Ecken des Randes eines Objekts fest. Größere Ganzzahlenwerte lassen die Ecken der Box runder erscheinen.

padding

Legt die Menge an Abstand zwischen dem Inhalt eines Objekts und der Umrandung des Objekts in Pixeln fest. Vier Werte müssen festgelegt werden (zum Beispiel, "0 0 0 0"). Diese Werte entsprechen der oberen, rechten, unteren und linken Umrandung.


Text Styles

Tabelle 2.4. Text Styles

fontFamily

Legt die zu verwendende Schriftart fest. Zum Beispiel "Arial".

fontSize

Legt die zu verwendende Schriftgröße fest. Zum Beispiel "16" oder "16px" oder "16pt".

textColor

Legt die Farbe der Schrift fest. Eingebaute Farben (wie "red" oder "blue") und HEX Farben in den #ARGB oder #RGB Formaten (wie ""#FFFF0000" oder "#FF0000") können verwendet werden.

textOrientation

Legt die Orientierung des Textes fest. Gültige Werte sind "up", "down", "left", und "right".


bottom trim