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

อัญมณีทับทิมเทเบิล

อัญมณีทับทิม Tabler สำหรับ Ruby on Rails

การติดตั้ง

โปรดดูคำแนะนำที่เหมาะสมสำหรับสภาพแวดล้อมที่คุณเลือก:

  • Ruby on Rails 4+ หรือสภาพแวดล้อม Sprockets อื่นๆ

  • เฟรมเวิร์ก Ruby อื่นๆ ที่ไม่อยู่บน Rails

ก. รูบี้ออนเรลส์

v0.1.4 การเปลี่ยนแปลงที่แตกหัก:

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

เพิ่ม bootstrap และ tabler-rubygem ให้กับ Gemfile ของคุณ:

 อัญมณี 'bootstrap', '~> 4.1.1'gem 'tabler-rubygem'

ตรวจสอบให้แน่ใจว่า sprockets-rails เป็นอย่างน้อย v2.3.2

bundle install และรีสตาร์ทเซิร์ฟเวอร์ของคุณเพื่อให้ไฟล์พร้อมใช้งานผ่านไปป์ไลน์

นำเข้าสไตล์ Tabler และตัวเลือกสไตล์และไอคอนปลั๊กอิน Tabler ใน app/assets/stylesheets/application.scss :

 // ต้องตั้งค่าหรือนำเข้าตัวแปร tabler แบบกำหนดเอง *ก่อน* bootstrap และ tabler.@import "tabler/variables";@import "bootstrap";@import "tabler";@import "tabler.plugins"; // option@import "tabler.icons"; // ทางเลือกรวมถึง [เบราว์เซอร์ ธง การชำระเงิน]

ตัวแปรที่มีอยู่สามารถพบได้ที่นี่
ปลั๊กอิน Tabler มีไฟล์ css สำหรับจาวาสคริปต์ที่พบที่นี่

คุณยังสามารถเลือกที่จะรวมปลั๊กอิน CSS ในแต่ละปลั๊กอินได้ ตัวอย่างเช่น:

 // ต้องตั้งค่าหรือนำเข้าตัวแปร tabler แบบกำหนดเอง *ก่อน* tabler.@import "tabler/variables";@import "bootstrap";@import "tabler";@import "tabler/plugins/charts-c3/plugin.scss" ;

หรือรวมไอคอน css ตามประเภท เช่น

 // ต้องตั้งค่าหรือนำเข้าตัวแปร tabler แบบกำหนดเอง *ก่อน* tabler.@import "tabler/variables";@import "bootstrap";@import "tabler";@import "tabler/icons/flag";

ตรวจสอบให้แน่ใจว่าไฟล์มีนามสกุล .scss (หรือ .sass สำหรับไวยากรณ์ Sass) หากคุณเพิ่งสร้างแอป Rails ใหม่ แอปนั้นอาจมาพร้อมกับไฟล์ .css แทน หากมีไฟล์นี้อยู่ ไฟล์นั้นจะถูกนำมาใช้แทน Sass ดังนั้นให้เปลี่ยนชื่อใหม่:

 แอป $ mv/assets/stylesheets/application.css แอป/assets/stylesheets/application.scss

จากนั้น ลบคำสั่ง *= require และ *= require_tree ทั้งหมดออกจากไฟล์ Sass ให้ใช้ @import เพื่อนำเข้าไฟล์ Sass แทน

อย่าใช้ *= require ใน Sass มิฉะนั้นสไตล์ชีตอื่นๆ ของคุณจะไม่สามารถเข้าถึงมิกซ์อินและตัวแปรของ Tabler ได้

เพิ่ม Tabler และ Tabler Plugins เสริมให้กับ application.js ของคุณ :

 //= ต้องการ tabler//= ต้องการ tabler.plugins

Tabler มี jQuery และ Bootstrap javascript อยู่แล้ว
ปลั๊กอิน Tabler มีจาวาสคริปต์อยู่ที่นี่

หากคุณรวม jQuery ในโครงการของคุณแล้ว คุณสามารถรวม js ของ tabler ในแต่ละไฟล์ได้เพื่อหลีกเลี่ยงความขัดแย้ง:

 // = ต้องการ tabler/tabler// = ต้องการ tabler/vendors/bootstrap.bundle.min// = ต้องการ tabler/vendors/circle-progress.min// = ต้องการ tabler/vendors/jquery.sparkline.min// = ต้องการ โต๊ะ/แกน

คุณยังสามารถเลือกที่จะรวมปลั๊กอิน js ไว้ในแต่ละปลั๊กอินได้ ตัวอย่างเช่น:

 //= ต้องการ tabler//= ต้องการ tabler/plugins/charts-c3/js/d3.v3.min//= ต้องการ tabler/plugins/charts-c3/js/c3.min

ข. เฟรมเวิร์ก Ruby อื่นๆ

หากเฟรมเวิร์กของคุณใช้ Sprockets หรือ Hanami สินทรัพย์จะถูกลงทะเบียนกับ Sprockets เมื่อจำเป็นต้องใช้ Gem และคุณสามารถใช้ได้ตามส่วน Rails ของคำแนะนำ

มิฉะนั้นคุณอาจต้องลงทะเบียนสินทรัพย์ด้วยตนเอง โปรดดูเอกสารประกอบของกรอบงานของคุณในหัวข้อนี้

การกำหนดค่า

Sass: คำนำหน้าอัตโนมัติ

Tabler ต้องใช้ Autoprefixer Autoprefixer เพิ่มคำนำหน้าผู้ขายให้กับกฎ CSS โดยใช้ค่าจาก Can I Use

หากคุณใช้ tabler กับ Rails ระบบจะตั้งค่าคำนำหน้าอัตโนมัติให้คุณโดยอัตโนมัติ มิฉะนั้น โปรดดูเอกสารประกอบของคำนำหน้าอัตโนมัติ

Sass: ส่วนประกอบส่วนบุคคล

ตามค่าเริ่มต้น Tabler ทั้งหมดจะถูกนำเข้า

คุณยังสามารถนำเข้าส่วนประกอบได้อย่างชัดเจน หากต้องการเริ่มต้นด้วยรายการโมดูลทั้งหมด ให้คัดลอกไฟล์ _tabler.scss ลงในเนื้อหาของคุณเป็น _tabler-custom.scss จากนั้นใส่ความคิดเห็นส่วนประกอบที่คุณไม่ต้องการจาก _tabler-custom ในไฟล์แอปพลิเคชัน Sass ให้แทนที่ @import 'tabler' ด้วย:

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