tabler rubygem
1.0.0
Tabler Ruby Gem für Ruby on Rails.
Bitte beachten Sie den entsprechenden Leitfaden für die Umgebung Ihrer Wahl:
Ruby on Rails 4+ oder eine andere Sprockets-Umgebung.
Andere Ruby-Frameworks, die nicht auf Rails basieren.
v0.1.4 WICHTIGSTE ÄNDERUNG:
Bilder sind standardmäßig nicht mehr enthalten. Stattdessen können Sie alle Bildsätze oder die gewünschten Bildsätze (entweder Browser, Flagge und/oder Zahlungen) einschließen. Weitere Informationen dazu finden Sie weiter unten.
Fügen Sie bootstrap und tabler-rubygem zu Ihrer Gemfile hinzu:
gem 'bootstrap', '~> 4.1.1'gem 'tabler-rubygem'
Stellen Sie sicher, dass sprockets-rails mindestens v2.3.2 ist.
bundle install und starten Sie Ihren Server neu, um die Dateien über die Pipeline verfügbar zu machen.
Importieren Sie Tabler-Stile und optional Tabler-Plugin-Stile und -Symbole in app/assets/stylesheets/application.scss :
// Benutzerdefinierte Tabler-Variablen müssen *vor* Bootstrap und Tabler festgelegt oder importiert werden.@import "tabler/variables";@import "bootstrap";@import "tabler";@import "tabler.plugins"; // optional@import "tabler.icons"; // optional beinhaltet [Browser, Flag, Zahlungen]
Die verfügbaren Variablen finden Sie hier.
Tabler-Plugins enthalten die CSS-Dateien für die hier gefundenen Javascripts.
Sie können Plugin-CSS auch einzeln für jedes Plugin einbinden, zum Beispiel:
// Benutzerdefinierte Tabler-Variablen müssen *vor* tabler.@import "tabler/variables";@import "bootstrap";@import "tabler";@import "tabler/plugins/charts-c3/plugin.scss" festgelegt oder importiert werden ;
oder fügen Sie CSS-Symbole pro Typ hinzu, zum Beispiel:
// Benutzerdefinierte Tabler-Variablen müssen festgelegt oder importiert werden *vor* tabler.@import "tabler/variables";@import "bootstrap";@import "tabler";@import "tabler/icons/flag";
Stellen Sie sicher, dass die Datei die Erweiterung .scss (oder .sass für Sass-Syntax) hat. Wenn Sie gerade eine neue Rails-App generiert haben, enthält diese möglicherweise stattdessen eine .css Datei. Wenn diese Datei vorhanden ist, wird sie anstelle von Sass bereitgestellt. Benennen Sie sie daher um:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
Entfernen Sie dann alle *= require und *= require_tree -Anweisungen aus der Sass-Datei. Verwenden Sie stattdessen @import , um Sass-Dateien zu importieren.
Verwenden Sie *= require nicht in Sass, da Ihre anderen Stylesheets sonst nicht auf die Tabler-Mixins und -Variablen zugreifen können.
Fügen Sie Tabler und optional Tabler-Plugins zu Ihrer application.js hinzu:
//= tabler erfordern //= tabler.plugins erfordern
Tabler enthält bereits jQuery und Bootstrap-Javascript.
Zu den Tabler-Plugins gehören die hier gefundenen Javascripte.
Wenn Sie jQuery bereits in Ihr Projekt einbinden, können Sie die js des Tablers auf Dateibasis einbinden, um Konflikte zu vermeiden:
// = erfordern tabler/tabler// = erfordern tabler/vendors/bootstrap.bundle.min// = erfordern tabler/vendors/circle-progress.min// = erfordern tabler/vendors/jquery.sparkline.min// = erfordern Tabelle/Kern
Sie können Plugin-JS auch einzeln für jedes Plugin einbinden, zum Beispiel:
//= tabler erfordern //= tabler/plugins/charts-c3/js/d3.v3.min erfordern//= tabler/plugins/charts-c3/js/c3.min erfordern
Wenn Ihr Framework Sprockets oder Hanami verwendet, werden die Assets bei Sprockets registriert, wenn der Edelstein benötigt wird, und Sie können sie gemäß dem Abschnitt „Rails“ des Leitfadens verwenden.
Andernfalls müssen Sie die Vermögenswerte möglicherweise manuell registrieren. Weitere Informationen finden Sie in der Dokumentation Ihres Frameworks zu diesem Thema.
Tabler erfordert die Verwendung von Autoprefixer. Autoprefixer fügt Herstellerpräfixe zu CSS-Regeln hinzu und verwendet dabei Werte aus „Can I Use“.
Wenn Sie Tabler mit Rails verwenden, wird der Autoprefixer automatisch für Sie eingerichtet. Andernfalls konsultieren Sie bitte die Autoprefixer-Dokumentation.
Standardmäßig wird der gesamte Tabler importiert.
Sie können Komponenten auch explizit importieren. Um mit einer vollständigen Liste der Module zu beginnen, kopieren Sie die Datei _tabler.scss als _tabler-custom.scss in Ihre Assets. Kommentieren Sie dann nicht gewünschte Komponenten aus _tabler-custom aus. Ersetzen Sie in der Sass-Anwendungsdatei @import 'tabler' durch:
@import 'tabler-custom';
