Spacer
Phân bổ không gian còn lại trong Ngăn xếp để đẩy nội dung sang cả hai bên hoặc dành khoảng cách linh hoạt cho nội dung. minLength đặt độ dài tối thiểu, width hoặc height rõ ràng có thể cố định kích thước theo hướng tương ứng.
Ví dụ
function main() {
return (
<HStack>
<Text>A</Text>
<Spacer minLength={16} />
<Text>B</Text>
</HStack>
);
}
Cách sử dụng
- Spacer không vẽ. Chiếm phần ngang còn lại trong HStack hoặc dọc trong VStack; minLength là tối thiểu. width/height rõ ràng cố định trục. Không nền, độ mờ hay hiệu ứng.
- Kích thước số dùng điểm. auto đo nội dung; fill dùng phần cha cấp. Đặt kích thước khung trước; fill và chữ dài không mở rộng khung cha cố định.
Thuộc tính
minLength?numberKhoảng trống linh hoạt nhỏ nhất trên trục chính Stack cha, theo điểm.
0Thuộc tính chung
width?number | "auto" | "fill"Chiều rộng tính bằng point, tự động hoặc lấp đầy khung cha.
"auto"height?number | "auto" | "fill"Chiều cao tính bằng point, tự động hoặc lấp đầy khung cha.
"auto"animations?SpacerAnimation[]Hoạt ảnh khi thuộc tính đổi. duration/delay theo giây; from/to là đầu cuối; repeat/autoreverse điều khiển lặp, wrap là chu kỳ.
[{property: "minLength", duration: 0.25, curve: "easeInOut"}]key?string | numberĐịnh danh ổn định giữa các phần tử cùng cấp.
""Ví dụ kết hợp
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>
);
}
Hoạt ảnh
widthheightminLengthKhi bỏ qua
Bảng ghi hành vi bỏ qua đã kiểm tra từ triển khai; ví dụ không phải mặc định. Muốn kết quả cố định hãy truyền giá trị rõ, kích thước và màu theo ngữ cảnh không phải hằng số.
| Thuộc tính | Khi bỏ qua |
|---|---|
minLength | 0 |