หน้าแรก>ซอร์สโค้ด PHP>หมวดหมู่อื่นๆ
ดาวน์โหลด

ยินดีต้อนรับสู่การดึงวัสดุ!

แดชบอร์ดผู้ดูแลระบบตามกรอบ CSS เป็นรูปธรรม

Material Drawn เป็นผู้ดูแล Materialize ฟรีพร้อมการออกแบบใหม่ที่ได้รับแรงบันดาลใจจากการออกแบบ Material และธีม Pixinvent ของ Google เรารู้สึกตื่นเต้นมากที่จะแนะนำแนวคิดด้านวัสดุของเราผ่านชุดส่วนประกอบที่ใช้งานง่ายและสวยงาม Material Drawn ถูกสร้างขึ้นบนเฟรมเวิร์กที่เป็นรูปธรรมยอดนิยม และมาพร้อมกับปลั๊กอินของบุคคลที่สามสองสามตัว (amcharts, datatables) ที่ออกแบบใหม่เพื่อให้เข้ากับองค์ประกอบที่เหลือ

Material Dashboard มาพร้อมกับตัวเลือกธีมสี 6 แบบสำหรับส่วนประกอบใดๆ ที่เป็นพื้นหลัง

  1. ลาเวนเดอร์
  2. สีเขียวของป่า
  3. มิดไนท์บลู
  4. นกเป็ดน้ำ
  5. เลือด
  6. สาว

พร้อมภาพพื้นหลังบนแถบด้านข้างของแต่ละสี คุณยังสามารถสร้างสีของธีมของคุณเองได้ เพียงเตรียมสีของคุณให้พร้อมพร้อมกับเฉดสีที่สว่างกว่าและรูปภาพที่เข้ากัน เรารู้สึกตื่นเต้นมากที่จะแบ่งปันแดชบอร์ดนี้กับคุณ และเราหวังว่าจะได้ยินความคิดเห็นของคุณ!

หากต้องการเพิ่มสีธีมที่กำหนดเองหรือข้อเสนอแนะอื่น ๆ โปรดส่งอีเมลถึงฉันที่ [email protected]

คุณสามารถค้นหา Github Repo สำหรับการวาดวัสดุได้ที่นี่

ไฟล์

ไฟล์ CSS ของ โฟลเดอร์การแจกจ่าย

css การกระจายเฟรมเวิร์กทั้งหมดอยู่ใน: 

 dist/theme.min.css

css หน้าดัชนีอยู่ใน: 

 dist/Style.css

สำหรับ CSS ที่กำหนดเองที่เขียนโดย jquery สำหรับการเปลี่ยนธีม 

 <style type="text/css" id="page"></style>
<style type="text/css" id="material-custom"></style>
<style type="text/css" id="custom"></style>

css หน้าเข้าสู่ระบบอยู่ใน: 

 dist/LoginStyle.css

หน้าลงทะเบียน css อยู่ใน: 

 dist/RegisterStyle.css

JS ไฟล์ การกระจายเฟรมเวิร์กทั้งหมด JS อยู่ใน: 

 dist/app.min.js
dist/app2.min.js
dist/app3.min.js

ปลั๊กอิน js ของฉันพร้อมตัวเปลี่ยนธีมและ init ทั้งหมดสำหรับ index.html อยู่ใน: 

 dist/myplugin.js

ปลั๊กอิน js ของฉันพร้อมตัวเปลี่ยนธีมและ init ทั้งหมดสำหรับ index.html อยู่ใน: 

 dist/loginplugin.js

การติดตั้ง

การติดตั้ง CSS สำหรับหน้าดัชนี 

 <link rel="stylesheet" href="dist/theme.min.css">
<link rel="stylesheet" href="dist/Style.css">
<style type="text/css" id="page"></style>
<style type="text/css" id="material-custom"></style>
<style type="text/css" id="custom"></style>

การติดตั้ง CSS สำหรับหน้าเข้าสู่ระบบ 

 <link rel="stylesheet" href="dist/theme.min.css">
<link rel="stylesheet" href="dist/LoginStyle.css">
<style type="text/css" id="material-custom"></style>
<style type="text/css" id="custom"></style>

การติดตั้ง CSS สำหรับหน้าลงทะเบียน 

 <link rel="stylesheet" href="dist/theme.min.css">
<link rel="stylesheet" href="dist/RegisterStyle.css">
<style type="text/css" id="material-custom"></style>
<style type="text/css" id="custom"></style>

การติดตั้ง JS สำหรับหน้าดัชนี 

 <script src="dist/app.min.js"></script>
<script src="dist/app2.min.js"></script>
<script src="dist/app3.min.js"></script>
<script src="dist/myplugin.js"></script>

การติดตั้ง JS สำหรับหน้าเข้าสู่ระบบ 

 <script src="dist/app.min.js"></script>
<script src="dist/app2.min.js"></script>
<script src="dist/app3.min.js"></script>
<script src="dist/LoginStyle.css"></script>

การติดตั้ง JS สำหรับหน้าลงทะเบียน 

 <script src="dist/app.min.js"></script>
<script src="dist/app2.min.js"></script>
<script src="dist/app3.min.js"></script>
<script src="dist/registerplugin.js"></script>

หลังจากเสร็จสิ้นขั้นตอนการติดตั้งแล้ว ให้เปิด index.html ในเบราว์เซอร์ของคุณเพื่อดูแดชบอร์ดสาธิต อัปเดตและสนุกไปกับการใช้งาน

การสาธิตพื้นฐานของการดึงวัสดุ

เร็วๆ นี้

  • ส่วนประกอบ UI
  • ส่วนประกอบ JS
  • ส่วนประกอบแบบกำหนดเองบางส่วนที่แนะนำโดยแฟนๆ ของฉัน

สังเกต

เพิ่มฟีเจอร์ใหม่ เช่น โปรไฟล์ (ไทม์ไลน์และการตั้งค่า) การแชท และอื่นๆ อีกมากมาย จนกว่าฉันจะเสร็จสิ้นส่วนประกอบทั้งหมด คุณสามารถเขียนส่วนประกอบได้โดยตรงจาก Materialize.css โปรดสนับสนุนงานของฉัน ติดดาวและดู repo ของฉัน และติดตามฉันบน github สำหรับการอัปเดตที่กำลังจะมีขึ้นใน MaterialDrawn และโครงการอื่น ๆ ในอนาคต

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด