J’ai vu cette bibliothèque qui possède une fonction de plage de curseur, mais dans AngularJS: Ion.RangeSlider
Et il y a un gars qui fabrique une enveloppe pour que cela fonctionne dans Angular 2: ng2-ion-range-slider
J’utilise webpack
pas Angular-Cli
.
J’ai essayé de suivre ses instructions d’installation et il est travaillé mais sans styles.
Quelqu’un peut-il m’aider à savoir où placer les chemins de style dans Webpack?
Je l’ai fait après quelques tentatives infructueuses.
Premièrement, j’utilise Angular 5
avec Webpack
et Angular Material
.
1) ajoutez la bibliothèque de curseurs et son wrapper au fichier package.json
.
"ion-rangeslider": "2.2.0" "ng2-ion-range-slider": "~1.0.3"
2) J’ai ajouté les styles de curseur au fichier theme.scss
dans mon projet, comme theme.scss
:
@import '~@angular/material/_theming.scss'; @import '~ion-rangeslider/css/ion.rangeSlider.css'; @import '~ion-rangeslider/css/ion.rangeSlider.skinModern.css'; // @import '~ion-rangeslider/css/ion.rangeSlider.skinFlat.css';
append le style dont vous avez besoin dépend de la peau que vous choisissez.
3) Il n’est pas nécessaire d’importer un fichier javascript
dans webpack
, je veux dire ces deux fichiers:
jquery/dist/jquery.min.js ion-rangeslider/js/ion.rangeSlider.js
4) Importez IonRangeSliderModule
dans votre AppModule
.
import { IonRangeSliderModule } from 'ng2-ion-range-slider';
Maintenant, vous pouvez l’utiliser comme:
Mettre à jour
Pour ceux qui n’utilisent pas de matériau angular
Vous pouvez importer les fichiers css
et scss
dans le fichier de configuration de webpack
.
1-) Installer la bibliothèque sass-loader
:
"sass-loader": "^6.0.3", "sass-resources-loader": "^1.3.3",
2-) Créez un nouveau fichier scss
dans le projet avec n’importe quel nom (ex. ./src/index.scss
) et ajoutez tous les css
et scss
à importer dans ce fichier.
3-) Dans le fichier webpack.common.js
, ajoutez ceci aux règles ou modifiez-le s’il existe:
/** * To ssortingng and sass loader support for *.scss files (from Angular components) * Returns comstackd css content as ssortingng * */ { test: /\.scss$/, use: ['to-ssortingng-loader', 'css-loader', 'sass-loader', { loader: 'sass-resources-loader', options: { // Provide path to the file with resources resources: `./src/index.scss` }, }, ], exclude: [helpers.root('src', 'styles')] },