Gema de rubí Tabler para Ruby on Rails.
Consulte la guía adecuada para el entorno de su elección:
Ruby on Rails 4+ u otro entorno Sprockets.
Otros marcos de Ruby que no están en Rails.
v0.1.4 CAMBIO IMPORTANTE:
Las imágenes ya no se incluyen de forma predeterminada. En su lugar, puede incluir todos los conjuntos de imágenes o los conjuntos de imágenes específicos que desee (ya sea navegador, bandera y/o pagos). Lea a continuación para obtener más información sobre cómo hacer esto.
Agregue bootstrap
y tabler-rubygem
a su Gemfile:
gema 'bootstrap', '~> 4.1.1'gema 'tabler-rubygem'
Asegúrese de que sprockets-rails
sea al menos v2.3.2.
bundle install
y reinicie su servidor para que los archivos estén disponibles a través de la canalización.
Importe estilos de Tabler y, opcionalmente, estilos e íconos del complemento de Tabler en app/assets/stylesheets/application.scss
:
// Las variables personalizadas del tabler deben configurarse o importarse *antes* de bootstrap y tabler.@import "tabler/variables";@import "bootstrap";@import "tabler";@import "tabler.plugins"; // opcional@importar "tabler.icons"; // opcional incluye [navegador, bandera, pagos]
Las variables disponibles se pueden encontrar aquí.
Los complementos de Tabler incluyen los archivos CSS para los javascripts que se encuentran aquí.
También puede optar por incluir el complemento css por complemento, por ejemplo:
// Las variables personalizadas del tabler deben configurarse o importarse *antes* de tabler.@import "tabler/variables";@import "bootstrap";@import "tabler";@import "tabler/plugins/charts-c3/plugin.scss" ;
o incluir íconos css por tipo, por ejemplo:
// Las variables personalizadas del tabler deben configurarse o importarse *antes* de tabler.@import "tabler/variables";@import "bootstrap";@import "tabler";@import "tabler/icons/flag";
Asegúrese de que el archivo tenga la extensión .scss
(o .sass
para la sintaxis Sass). Si acaba de generar una nueva aplicación Rails, es posible que venga con un archivo .css
. Si este archivo existe, se entregará en lugar de Sass, así que cámbiele el nombre:
$ mv aplicación/activos/hojas de estilo/aplicación.css aplicación/activos/hojas de estilo/aplicación.scss
Luego, elimine todas las declaraciones *= require
y *= require_tree
del archivo Sass. En su lugar, utilice @import
para importar archivos Sass.
No utilice *= require
en Sass o sus otras hojas de estilo no podrán acceder a los mixins y variables de Tabler.
Agregue Tabler y, opcionalmente, los complementos de Tabler a su application.js
:
//= requiere tabler//= requiere tabler.plugins
Tabler ya incluye jQuery y Bootstrap javascript.
Los complementos de Tabler incluyen los javascripts que se encuentran aquí.
Si ya incluye jQuery en su proyecto, puede incluir js de Tabler por archivo para evitar conflictos:
// = requiere tabler/tabler// = requiere tabler/vendors/bootstrap.bundle.min// = requiere tabler/vendors/circle-progress.min// = requiere tabler/vendors/jquery.sparkline.min// = requiere mesa/núcleo
También puede optar por incluir el complemento js por complemento, por ejemplo:
//= requiere tabler//= requiere tabler/plugins/charts-c3/js/d3.v3.min//= requiere tabler/plugins/charts-c3/js/c3.min
Si su marco usa Sprockets o Hanami, los activos se registrarán en Sprockets cuando se requiera la gema y podrá usarlos según la sección Rails de la guía.
De lo contrario, es posible que deba registrar los activos manualmente. Consulte la documentación de su marco sobre el tema.
Tabler requiere el uso de Autoprefixer. Autoprefixer agrega prefijos de proveedores a las reglas CSS usando valores de Can I Use.
Si está utilizando tabler con Rails, el autoprefixer se configura automáticamente. De lo contrario, consulte la documentación de Autoprefixer.
De forma predeterminada, se importa todo Tabler.
También puede importar componentes explícitamente. Para comenzar con una lista completa de módulos, copie el archivo _tabler.scss
en sus activos como _tabler-custom.scss
. Luego comente los componentes que no desea de _tabler-custom
. En el archivo Sass de la aplicación, reemplace @import 'tabler'
con:
@import 'tabler-personalizado';