← กลับไปยัง Dev Center

ทดสอบ PropertyCard

หน้าทดสอบสำหรับ PropertyCard component แสดงทั้งแบบ Compact และ Detailed variants

1. Compact Variant (สำหรับผลการค้นหา)

แบบ Compact เหมาะสำหรับการแสดงผลในรายการค้นหา รูปแบบแนวนอน (horizontal layout)

ไม่มีรูป

อาคารตัวอย่าง 1

อาคารบริหาร•ใช้งานได้ปกติ
เขตบางรัก กรุงเทพฯ 10500
25 / 50
3
ไม่มีรูป

อาคารตัวอย่าง 2

อาคารสนับสนุน•รอซ่อมบำรุง
อ.เมือง จ.เชียงใหม่ 50000
10 / 20
ไม่มีรูป

อาคารตัวอย่าง 4

อาคารบริหาร•ใช้งานได้ปกติ
บางรัก, เขตบางรัก กรุงเทพฯ 10500
30 / 60
5

2. Detailed Variant (สำหรับรายละเอียดหมุดแผนที่)

แบบ Detailed เหมาะสำหรับการแสดงรายละเอียดเมื่อคลิกหมุดแผนที่ รูปแบบแนวตั้ง (vertical layout)

ไม่มีรูปภาพ

อาคารตัวอย่าง 1

ประเภท: อาคารบริหาร
สถานะ: ใช้งานได้ปกติ•อายุ: 4 ปี
หน่วยงาน: กรมราชพัสดุ
เขตบางรัก กรุงเทพฯ 10500
ผู้อยู่อาศัย 25 คน จาก 50 ห้อง
สำนักงาน: 3 หน่วยงาน
ไม่มีรูปภาพ

อาคารตัวอย่าง 2

ประเภท: อาคารสนับสนุน
สถานะ: รอซ่อมบำรุง•อายุ: 9 ปี
หน่วยงาน: กรมที่ดิน
อ.เมือง จ.เชียงใหม่ 50000
ผู้อยู่อาศัย 10 คน จาก 20 ห้อง
ไม่มีรูปภาพ

อาคารตัวอย่าง 4

ประเภท: อาคารบริหาร
สถานะ: ใช้งานได้ปกติ•อายุ: 6 ปี
หน่วยงาน: สำนักงานคณะกรรมการนโยบายที่ดินแห่งชาติ
บางรัก, เขตบางรัก กรุงเทพฯ 10500
ผู้อยู่อาศัย 30 คน จาก 60 ห้อง
สำนักงาน: 5 หน่วยงาน

3. สถานะต่างๆ

แสดง PropertyCard ที่มีสถานะต่างๆ

ไม่มีรูป

อาคารตัวอย่าง 1

อาคารบริหาร•ใช้งานได้ปกติ
เขตบางรัก กรุงเทพมหานคร
ไม่มีรูป

อาคารตัวอย่าง 2

อาคารสนับสนุน•รอซ่อมบำรุง
อ.เมือง จ.เชียงใหม่
ไม่มีรูป

อาคารตัวอย่าง 3

อาคารบริการ•รอจำหน่าย
อ.เมือง จ.ขอนแก่น

4. ไม่มีข้อมูลผู้อยู่อาศัย (Optional Fields)

PropertyCard ที่ไม่มีข้อมูลผู้อยู่อาศัยหรือผู้ใช้สำนักงาน

ไม่มีรูปภาพ

อาคารตัวอย่าง 5

ประเภท: อาคารบริการ
สถานะ: ใช้งานได้ปกติ•อายุ: 2 ปี
อ.เมือง จ.ภูเก็ต 83000
ไม่มีรูปภาพ

อาคารตัวอย่าง 3

ประเภท: อาคารบริการ
สถานะ: รอจำหน่าย•อายุ: 24 ปี
อ.เมือง จ.ขอนแก่น 40000

หมายเหตุ

  • Compact variant: เหมาะสำหรับการแสดงผลในรายการค้นหา ใช้พื้นที่น้อย
  • Detailed variant: เหมาะสำหรับการแสดงรายละเอียดเมื่อคลิกหมุดแผนที่ ใช้พื้นที่มากกว่า
  • PropertyCard รองรับการคลิก (onClick) และแสดงผลแบบ interactive
  • ข้อมูลผู้อยู่อาศัยและผู้ใช้สำนักงานเป็น optional fields
  • Component จะแสดงสถานะด้วยสีที่แตกต่างกัน (เขียว/เหลือง/แดง)