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:
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). |
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. |
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. |
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". |