tabler rubygem
1.0.0
Ruby on Rails 用の Tabler Ruby gem。
選択した環境に応じて適切なガイドを参照してください。
Ruby on Rails 4+ またはその他の Sprockets 環境。
Rails にない他の Ruby フレームワーク。
v0.1.4 重大な変更:
画像はデフォルトでは含まれなくなりました。代わりに、すべての画像セットまたは必要な特定の画像セット (ブラウザ、フラグ、支払いのいずれか) を含めることができます。 これを行う方法の詳細については、以下をお読みください。
bootstrapとtabler-rubygem Gemfile に追加します。
gem 'bootstrap', '~> 4.1.1'gem 'tabler-rubygem'
sprockets-railsが少なくとも v2.3.2 であることを確認してください。
bundle installてサーバーを再起動し、パイプライン経由でファイルを利用できるようにします。
Tabler スタイルと、必要に応じて Tabler プラグイン スタイルとアイコンをapp/assets/stylesheets/application.scssにインポートします。
// カスタム tabler 変数はブートストラップと tabler の前に設定またはインポートする必要があります。@import "tabler/variables";@import "bootstrap";@import "tabler";@import "tabler.plugins"; //Optional@import "tabler.icons"; // オプションで [ブラウザ、フラグ、支払い] が含まれます
利用可能な変数はここで見つけることができます。
Tabler プラグインには、ここにある JavaScript の 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 app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
次に、すべての*= requireステートメントと*= require_treeステートメントを Sass ファイルから削除します。代わりに、 @importを使用して Sass ファイルをインポートします。
Sass では*= require使用しないでください。使用しないと、他のスタイルシートが Tabler のミックスインと変数にアクセスできなくなります。
Tabler と、必要に応じて Tabler プラグインをapplication.jsに追加します。
//= tabler が必要です//= tabler.plugins が必要です
Tabler には、jQuery と Bootstrap JavaScript がすでに含まれています。
Tabler プラグインには、ここにある JavaScript が含まれています。
すでにプロジェクトに jQuery を含めている場合は、競合を避けるためにファイルごとに tabler の js を含めることができます。
// = 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 が必要
フレームワークで Sprockets または Hanami を使用している場合、Gem が必要なときにアセットが Sprockets に登録され、ガイドの Rails セクションに従って使用できます。
それ以外の場合は、アセットを手動で登録する必要がある場合があります。この件については、フレームワークのドキュメントを参照してください。
Tabler では Autoprefixer を使用する必要があります。 Autoprefixer は、Can I Use の値を使用して CSS ルールにベンダー プレフィックスを追加します。
Rails で tabler を使用している場合、autoprefixer が自動的にセットアップされます。それ以外の場合は、Autoprefixer のドキュメントを参照してください。
デフォルトでは、Tabler がすべてインポートされます。
コンポーネントを明示的にインポートすることもできます。モジュールの完全なリストを開始するには、 _tabler.scssファイルを_tabler-custom.scssとしてアセットにコピーします。次に、 _tabler-customから不要なコンポーネントをコメントアウトします。アプリケーションの Sass ファイルで、 @import 'tabler'のように置き換えます。
@import 'テーブルラーカスタム';
