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?number

Khoảng trống linh hoạt nhỏ nhất trên trục chính Stack cha, theo điểm.

Ví dụ0
Thuộ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.

Ví dụ"auto"
height?number | "auto" | "fill"

Chiều cao tính bằng point, tự động hoặc lấp đầy khung cha.

Ví dụ"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ỳ.

Ví dụ[{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ụ""

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

Hoạt ảnh

widthheightminLength

Khi 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ínhKhi bỏ qua
minLength0