Skip to main content

Ant Design Components

คำแนะนำการใช้ Ant Design Component ร่วมกับการพัฒนาระบบจาก Boilerplate

Card​

คู่มือการใช้งาน https://antblazor.com/en-US/components/card
คำแนะนำการใช้งาน - ใช้สำหรับจัดรูปแบบเค้าโครงระบบ (Layout)
- ใช้สำหรับแสดงผลข้อมูลที่มีปริมาณไม่มากและต้องการความสวยงาม
- ไม่แนะนำสำหรับ Content ที่มีปริมาณมากแนะนำให้ใช้ Table แทน

Table​

คู่มือการใช้งาน https://antblazor.com/en-US/components/table
คำแนะนำการใช้งาน - ใช้สำหรับแสดงผลข้อมูล จากฐานข้อมูลที่มีจำนวนมาก
- มีส่วนการกรองข้อมูล (Filter) และการจัดเรียงข้อมูล (Sort) ให้ใช้งาน
- ถ้าข้อมูลมีปริมาณมากควรใช้ pagination แบ่งหน้าข้อมูล
- แต่ถ้าความต้องการของลูกค้าต้องการให้แสดงผลข้อมูลหน้าแรกเพียงหน้าเดียวแนะนำให้ใช้วิธีการ Lazy loading
- กรณีต้องการแสดงผลข้อมูลในรูปแบบการจัดกลุ่มข้อมูล (Group) แนะนำให้ใช้ Nested Table
- สามารถนำ Component อื่น ๆ ที่ต้องการใช้งานมาใส่ใน Table ได้ เช่น Radio Button, Tags, List เป็นต้น

Empty​

คู่มือการใช้งาน https://antblazor.com/en-US/components/empty
คำแนะนำการใช้งาน ใช้ร่วมกับ data binding Components เช่น Table, List ในกรณีที่ไม่มีข้อมูลแสดงหรือ จำนวน records เป็น 0

DatePicker​

คู่มือการใช้งาน https://antblazor.com/en-US/components/datepicker
คำแนะนำการใช้งาน - ใช้สำหรับการระบุข้อมูลที่อยู่ในรูปแบบวันที่ หรือการแสดงผลในรูปแบบวันที่
- สามารถ Config Locale ได้ ค่าตั้งต้น (Default) ขึ้นอยู่กับการตั้งค่าภาษาของเครื่อง
คู่มือการใช้งาน https://antblazor.com/en-US/components/modal
คำแนะนำการใช้งาน - กรณีเป็นการจัดการข้อมูลสำคัญ แนะนำให้เลือกใช้ Confirmation modal dialog เนื่องจากสามารถแสดงรายละเอียดได้
- กรณีเป็นการจัดการข้อมูล แนะนำให้เลือกใช้ popconfirm แทน
- ใช้สำหรับแจ้งเตือนเรื่องสำคัญ
- ไม่แนะนำให้ใช้ Modal ซ้อนกัน

Notification​

คู่มือการใช้งาน https://antblazor.com/en-US/components/notification
คำแนะนำการใช้งาน - ใช้สำหรับการแสดงข้อความเป็นการแจ้งเตือนโดยมีหลากหลาย position ให้เลือกจัดวาง
- กรณีแสดงข้อความแจ้งเตือนสำคัญ แนะนำให้ใช้ Modal

Spin​

คู่มือการใช้งาน https://antblazor.com/en-US/components/spin
คำแนะนำการใช้งาน ใช้สำหรับขั้นตอนระหว่างรอโหลด/เปิดเอกสาร หรือระหว่างเปลี่ยนหน้าที่ต้องใช้ระยะเวลา

Skeleton​

คู่มือการใช้งาน https://antblazor.com/en-US/components/skeleton
คำแนะนำการใช้งาน ใช้สำหรับขั้นตอนระหว่างรอโหลดข้อมูล/ข้อความ เช่น ข้อความที่เป็น paragraph

DIIS Components​

Upload​

สามารถกำหนดค่าคอนฟิกต่างๆ ได้ในไฟล์ appsettings.json โดยกำหนดใน section FileUploadSetting ดังนี้

  • "FilePathTemp" กำหนด Path เก็บไฟล์อัปโหลดชั่วคราว

  • "FileMaxSize" กำหนดขนาดไฟล์สูงสุด หน่วยเป็น MB

  • "FilePathPrivate" กำหนด Path เก็บไฟล์

  • "FilePathPublic" กำหนด Path เก็บไฟล์

ตัวอย่าง

"FilePathTemp": "\\Temp",
"FileMaxSize": "10",
"FilePathPrivate": "\\Upload\\Private",
"FilePathPublic": "\\Upload\\Public"

วิธีการนำ Upload Component ไปใช้งาน

  1. กำหนดประเภทของไฟล์สำหรับนำไปใช้ในการตรวจสอบ เช่น .doc, .docx และ .pdf เป็นต้น

  2. กำหนดจำนวนไฟล์ที่สามารถอัปโหลดได้ เช่น 3 ไฟล์ เป็นต้น

ตัวอย่าง Source Code สำหรับนำไปใช้งาน

@page "/Example/UploadSample"

<UploadFilesComponent @ref="uploadFilesComponent2" FileTypes="fileTypes" MaxAllowedFiles="3"></UploadFilesComponent>

@code {
    List<string> fileTypes = new List<string>() { ".jpeg", ".jpg", ".png", ".pdf" };
}

ตัวอย่าง UI Upload component

ตัวอย่าง กรณีอัปโหลดไฟล์ไม่ถูกต้องตามประเภทไฟล์ที่ระบุ

ตัวอย่าง กรณีอัปโหลดไฟล์ขนาดไฟล์เกินกำหนดที่ระบุ

ตัวอย่าง กรณีอัปโหลดไฟล์มากกว่า 3 ไฟล์ขึ้นไป

ตัวอย่าง กรณีอัปโหลดไฟล์ถูกต้อง (กรณีไม่กดปุ่ม Save)

หมายเหตุ:ไฟล์จะถูกจัดเก็บในโฟลเดอร์ที่ถูกตั้งค่าใน appsettings.json (FilePathTemp) ในกรณีนี้คือ โฟลเดอร์ Temp

ตัวอย่าง กรณีอัปโหลดไฟล์ถูกต้อง (กรณีกดปุ่ม Save) จะขึ้นข้อความดังนี้

หมายเหตุ:

  1. ไฟล์จะถูกจัดเก็บในโฟลเดอร์ที่ถูกตั้งค่าใน appsettings.json (FilePathPrivate) ในกรณีนี้คือ โฟลเดอร์ Upload/Private

  2. ไฟล์ที่ถูกอัปโหลดจะอยู่ในโฟลเดอร์ตามชื่อไฟล์ (2 ตัวอักษรแรก)