कोणीय UIKit एनपीएम स्थापना - सीएसएस, कोणीय, टाइपस्क्रिप्ट, एनपीएम, uikit

एक के अंदर UIKit npm पैकेज स्थापित करते समयकोणीय 2 क्ली परियोजना, फिर इसका उपयोग कैसे किया जा सकता है? टाइपिंग (@ प्रकार / यूकिट) हैं जिन्हें मैंने भी इंस्टॉल किया है, लेकिन मुझे नहीं पता कि पैकेज को अपने जेएस / सीएसएस वर्गों का उपयोग करने के लिए नियंत्रक में कैसे आयात करना है।

उत्तर:

यह मेरे लिए एक कोणीय-क्ली आधारित परियोजना पर काम कर रहा है। मेरे लिए अपनी थीम बनाना महत्वपूर्ण था और इस तरह मैंने यह किया:

पहले 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!");
}
}

ऑफटॉपिक: अगले चरण में मैं समझाता हूं कि आप अपने यूकिट थीम बनाने के लिए एसएएस / एसएसएस का उपयोग करने के लिए प्रोजेक्ट को कॉन्फ़िगर कैसे करें

शैलियों.css को शैलियों.sssss का नाम बदलें (फ़ाइल को स्वयं नाम बदलने के लिए मत भूलना!)

...
"styles": [
"styles.scss"
],
...

फिर आप UIKit संकलित करने और अपनी थीम बनाने के लिए style.scss को संपादित कर सकते हैं

// 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";