CapDriveSpacer
Weisen Sie den verbleibenden Platz im Stapel zu, um Inhalte auf beiden Seiten zu verschieben, oder reservieren Sie elastischen Abstand für Inhalte. minLength legt die Mindestlänge fest, explizit width oder height können die Größe in der entsprechenden Richtung festlegen.
Beispiel
function main() {
return (
<HStack>
<Text>A</Text>
<Spacer minLength={16} />
<Text>B</Text>
</HStack>
);
}
Verwendung
- Spacer zeichnet nichts. In HStack nutzt er horizontalen, in VStack vertikalen Restplatz; minLength ist die Untergrenze. Explizite width/height fixieren eine Achse. Hintergrund, Deckkraft und Effekte entfallen.
- Maße sind Punkte. auto misst Inhalt, fill nutzt den zugeteilten Elternraum. Zuerst den Container bemessen; fill und langer Text vergrößern keinen festen Elternrahmen.
Eigenschaften
minLength?numberMinimaler flexibler Abstand auf der Hauptachse des übergeordneten Stacks, in Punkten.
0Allgemeine Eigenschaften
width?number | "auto" | "fill"Breite in Punkten, automatische Größe oder Ausfüllen des übergeordneten Bereichs.
"auto"height?number | "auto" | "fill"Höhe in Punkten, automatische Größe oder Ausfüllen des übergeordneten Bereichs.
"auto"animations?SpacerAnimation[]Attributänderung animieren. duration/delay in Sekunden; from/to sind Endwerte; repeat/autoreverse steuern Wiederholung, wrap die Periode.
[{property: "minLength", duration: 0.25, curve: "easeInOut"}]key?string | numberStabile Kennung unter Geschwisterelementen.
""Praxisbeispiel
function main() {
return (
<VStack spacing={16}>
<HStack width={240}>
<Text>A</Text>
<Spacer minLength={20} />
<Text>B</Text>
</HStack>
<HStack width={240}>
<Text>A</Text>
<Spacer width={20} />
<Text>B</Text>
</HStack>
</VStack>
);
}
Animation
widthheightminLengthBeim Weglassen
Die Tabelle zeigt implementierte Vorgaben beim Weglassen. Eigenschaftsbeispiele sind keine Standardwerte. Für feste Ergebnisse explizite Werte setzen; kontextabhängige Maße und Themenfarben sind keine Konstanten.
| Eigenschaften | Beim Weglassen |
|---|---|
minLength | 0 |