Spacer

ตัวอย่าง

function main() {
  return (
    <HStack>
      <Text>A</Text>
      <Spacer minLength={16} />
      <Text>B</Text>
    </HStack>
  );
}

การใช้งาน

• Spacer ไม่วาดภาพ ใช้พื้นที่แนวนอนที่เหลือใน HStack หรือแนวตั้งใน VStack โดย minLength เป็นขั้นต่ำ width/height ตรึงแกนได้ ไม่มีพื้นหลัง ความทึบ หรือเอฟเฟกต์
• ขนาดตัวเลขใช้พอยต์ auto วัดเนื้อหา ส่วน fill ใช้พื้นที่ที่พ่อแม่จัดให้ กำหนดขนาดกรอบก่อน เพราะ fill และข้อความยาวไม่ขยายกรอบที่ล็อกขนาดไว้

คุณสมบัติ

ตัวอย่างใช้งาน

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>
  );
}

ภาพเคลื่อนไหว

ภาพเคลื่อนไหว

เมื่อไม่ระบุ

ตารางคือพฤติกรรมเมื่อไม่ระบุที่ตรวจจากโค้ด ตัวอย่างไม่ใช่ค่าเริ่มต้น หากต้องการผลแน่นอนให้ระบุค่า ขนาดและสีตามบริบทไม่ใช่ค่าคงที่

API ที่เกี่ยวข้อง