在 angular2 cli 元素中安装 UIKit npm 包时,如何使用它?我还安装了类型 (@types/uikit),但我不知道如何将包导入 Controller 以使用其 JS/CSS 类。
最佳答案
它在一个基于 angular-cli 的元素上为我工作。制作自己的主题对我来说很重要,我就是这样做的:
首先安装/添加对 jquery 和 uikit 的依赖:
npm install jquery --save
npm install uikit --save
Then edit .angular-cli.json file and add the scripts:
...
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/uikit/dist/js/uikit.min.js",
"../node_modules/uikit/dist/js/uikit-icons.min.js"
],
...
Now you can use UIKit wherever
import {Component} from "@angular/core";
declare var UIkit: any;
@Component({
template: `<div (click)="showAlert()">alert</div>`
})
export class OwnerComponent {
showAlert(): void {
UIkit.modal.alert('UIkit alert!');
}
}
offtopic: 在下一步中,我将解释如何配置元素以使用 sass/scss 来制作你自己的 uikit 主题
将 styles.css 重命名为 styles.scss(不要忘记重命名文件本身!)
...
"styles": [
"styles.scss"
],
...
然后你可以编辑style.scss来编译UIKit并制作你自己的主题
// 1. Your custom variables and variable overwrites.
$global-link-color: #DA7D02;
// 2. Import default variables and available mixins.
@import "../node_modules/uikit/src/scss/variables-theme.scss";
@import "../node_modules/uikit/src/scss/mixins-theme.scss";
// 3. Your custom mixin overwrites.
@mixin hook-card() { color: #000; }
// 4. Import UIkit.
@import "../node_modules/uikit/src/scss/uikit-theme.scss";
关于css - Angular UIKit npm 安装,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41845812/