tabler rubygem

Permata Tabler Ruby

Permata rubi tabler untuk Ruby on Rails.

Instalasi

Silakan lihat panduan yang sesuai untuk lingkungan pilihan Anda:

• Ruby on Rails 4+ atau lingkungan Sprocket lainnya.

• Kerangka kerja Ruby lainnya tidak ada di Rails.

A. Ruby di Rel

---

v0.1.4 PELANGGARAN PERUBAHAN:

Gambar tidak lagi disertakan secara default. Sebagai gantinya, Anda dapat menyertakan semua kumpulan gambar atau kumpulan gambar tertentu yang Anda inginkan (baik browser, bendera, dan/atau pembayaran). Baca di bawah untuk informasi lebih lanjut tentang cara melakukan ini.

---

Tambahkan bootstrap dan tabler-rubygem ke Gemfile Anda:

 permata 'bootstrap', '~> 4.1.1'permata 'tabler-rubygem'

Pastikan sprockets-rails setidaknya v2.3.2.

bundle install dan mulai ulang server Anda untuk membuat file tersedia melalui pipa.

Impor gaya Tabler dan opsional gaya dan ikon Plugin Tabler di app/assets/stylesheets/application.scss :

 // Variabel tabler khusus harus disetel atau diimpor *sebelum* bootstrap dan tabler.@import "tabler/variables";@import "bootstrap";@import "tabler";@import "tabler.plugins"; // opsional@import "tabler.icons"; // opsional termasuk [browser, bendera, pembayaran]

Variabel yang tersedia dapat ditemukan di sini.
Plugin Tabler menyertakan file css untuk javascript yang ditemukan di sini.

Anda juga dapat memilih untuk menyertakan plugin css per plugin, misalnya:

 // Variabel tabler khusus harus disetel atau diimpor *sebelum* tabler.@import "tabler/variables";@import "bootstrap";@import "tabler";@import "tabler/plugins/charts-c3/plugin.scss" ;

atau sertakan ikon css per jenisnya, misalnya:

 // Variabel tabler khusus harus disetel atau diimpor *sebelum* tabler.@import "tabler/variables";@import "bootstrap";@import "tabler";@import "tabler/icons/flag";

Pastikan file memiliki ekstensi .scss (atau .sass untuk sintaks Sass). Jika Anda baru saja membuat aplikasi Rails baru, aplikasi tersebut mungkin dilengkapi dengan file .css . Jika file ini ada, maka file tersebut akan disajikan sebagai ganti Sass, jadi ganti namanya:

 $ mv aplikasi/aset/stylesheets/application.css aplikasi/aset/stylesheets/application.scss

Kemudian, hapus semua pernyataan *= require dan *= require_tree dari file Sass. Sebagai gantinya, gunakan @import untuk mengimpor file Sass.

Jangan gunakan *= require di Sass atau stylesheet Anda yang lain tidak akan dapat mengakses mixin dan variabel Tabler.

Tambahkan Tabler dan opsional Plugin Tabler ke application.js Anda:

 //= memerlukan tabler//= memerlukan tabler.plugin

Tabler sudah menyertakan javascript jQuery dan Bootstrap.
Plugin Tabler menyertakan javascript yang ditemukan di sini.

Jika Anda sudah menyertakan jQuery dalam proyek Anda, Anda dapat menyertakan js tabler per file untuk menghindari konflik:

 // = memerlukan tabler/tabler// = memerlukan tabler/vendors/bootstrap.bundle.min// = memerlukan tabler/vendors/circle-progress.min// = memerlukan tabler/vendors/jquery.sparkline.min// = memerlukan tabel/inti

Anda juga dapat memilih untuk menyertakan plugin js per plugin, misalnya:

 //= memerlukan tabler//= memerlukan tabler/plugins/charts-c3/js/d3.v3.min//= memerlukan tabler/plugins/charts-c3/js/c3.min

B. Kerangka kerja Ruby lainnya

Jika kerangka kerja Anda menggunakan Sprocket atau Hanami, aset akan didaftarkan ke Sprocket saat permata diperlukan, dan Anda dapat menggunakannya sesuai bagian Rails dalam panduan ini.

Jika tidak, Anda mungkin perlu mendaftarkan aset secara manual. Lihat dokumentasi kerangka kerja Anda tentang subjek tersebut.

Konfigurasi

Sass: Pembetulan otomatis

Tabler memerlukan penggunaan Autoprefixer. Autoprefixer menambahkan awalan vendor ke aturan CSS menggunakan nilai dari Can I Use.

Jika Anda menggunakan tabler dengan Rails, autoprefixer diatur untuk Anda secara otomatis. Jika tidak, silakan lihat dokumentasi Autoprefixer.

Sass: Komponen individual

Secara default semua Tabler diimpor.

Anda juga dapat mengimpor komponen secara eksplisit. Untuk memulai dengan daftar lengkap modul, salin file _tabler.scss ke dalam aset Anda sebagai _tabler-custom.scss . Kemudian beri komentar pada komponen yang tidak Anda inginkan dari _tabler-custom . Di file aplikasi Sass, ganti @import 'tabler' dengan:

 @import 'tabler-custom';