เริ่มใช้งาน
- คัดลอกโฟลเดอร์
ui-kit/(มีcampus-ui.css,campus-ui.js,fonts.css,fonts/) ไปไว้ในโปรเจกต์ใหม่ - ใส่ใน
<head>:<script src="ui-kit/campus-ui.js"></script>แล้วตามด้วย<link rel="stylesheet" href="ui-kit/campus-ui.css"> - เปลี่ยนสี/มุมโค้ง/ฟอนต์ทั้งระบบที่ตัวแปร
:rootตอนต้นไฟล์campus-ui.cssที่เดียว (หรือ override ในไฟล์ของระบบเอง) - สไตล์เฉพาะของระบบนั้น ๆ เขียนแยกในไฟล์ของตัวเอง (เช่น
app.css) โดยใช้ตัวแปรเดิม เช่นvar(--primary-deep)อย่าใส่สีตายตัว เพื่อให้โหมดมืดทำงาน
ถ้าเซิร์ฟเวอร์ตั้ง Content-Security-Policy ให้ใช้ไฟล์ CSS/JS ภายนอกเท่านั้น (ชุดนี้ไม่มี inline script/style)
สี (tokens)
--primary
สีหลักอ่อน / ขอบหัวเว็บ
สีหลักอ่อน / ขอบหัวเว็บ
--primary-deep
ปุ่ม ลิงก์เด่น
ปุ่ม ลิงก์เด่น
--primary-soft
พื้นหลังอ่อน
พื้นหลังอ่อน
--secondary
สีรองอ่อน
สีรองอ่อน
--secondary-deep
ลิงก์ ปุ่มรอง
ลิงก์ ปุ่มรอง
--ink / --muted
ตัวอักษร
ตัวอักษร
ปุ่ม
การ์ด
การ์ดธรรมดา
ใช้แสดงข้อมูลทั่วไป
ฟอร์ม
ข้อความช่วยเหลือใต้ช่อง
ตัวเลือกแบบปุ่ม
อัปโหลดไฟล์ + ความคืบหน้า
- รายงานประจำปี.pdf2.4 MB
กำลังประมวลผล…
แจ้งเตือนและป้าย
สำเร็จ — บันทึกข้อมูลเรียบร้อย
ข้อมูล — ระบบจะปิดปรับปรุงคืนวันอาทิตย์
คำเตือน — เหลือสิทธิ์ใช้งานฟรี 1 ไฟล์
ผิดพลาด — ไฟล์ใหญ่เกินกำหนด
ตาราง
| ชื่อ | แผนก | สถานะ |
|---|---|---|
| สมชาย | ช่างยนต์ | ปกติ |
| สมหญิง | IT | รอตรวจ |
หน้าเข้าสู่ระบบ / กล่องข้อความ
ชื่อระบบ
เข้าสู่ระบบด้วยอีเมลวิทยาลัย
หัวข้อกล่องข้อความ
ใช้ .modal-bg > .modal ครอบเพื่อให้ลอยกลางจอ