Campus UI Kitต้นแบบ UI สำหรับระบบของวิทยาลัย
กลับหน้าแปลงไฟล์

Campus UI Kit

ชุดสไตล์กลางที่ยกโทนมาจาก campus-cms (สีพีช-ฟ้า ฟอนต์ Sarabun มุมโค้ง ปุ่มแคปซูล) — คัดลอกโฟลเดอร์ ui-kit/ ไปใช้กับระบบใหม่ได้ทันที

เริ่มใช้งาน

  1. คัดลอกโฟลเดอร์ ui-kit/ (มี campus-ui.css, campus-ui.js, fonts.css, fonts/) ไปไว้ในโปรเจกต์ใหม่
  2. ใส่ใน <head>: <script src="ui-kit/campus-ui.js"></script> แล้วตามด้วย <link rel="stylesheet" href="ui-kit/campus-ui.css">
  3. เปลี่ยนสี/มุมโค้ง/ฟอนต์ทั้งระบบที่ตัวแปร :root ตอนต้นไฟล์ campus-ui.css ที่เดียว (หรือ override ในไฟล์ของระบบเอง)
  4. สไตล์เฉพาะของระบบนั้น ๆ เขียนแยกในไฟล์ของตัวเอง (เช่น 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 ไฟล์
ผิดพลาด — ไฟล์ใหญ่เกินกำหนด
ป้ายหลักป้ายรองใช้ได้ไม่จำกัด [email protected]

ตาราง

ชื่อแผนกสถานะ
สมชายช่างยนต์ปกติ
สมหญิงITรอตรวจ

หน้าเข้าสู่ระบบ / กล่องข้อความ