How to use them? Docs are not clear about vuejs, only pure js.
I tried to add
var gestures = require("tns-core-modules/ui/gestures");
var labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.tap, function (args) {
console.log("Tap");
});
But that doesn't seem to work - not logs in the console.
Thanks
First of all,run tns -v and check your NS version.
tns-core-modules is an old way of importing things. For {N} v7:
#nativescript/ui/gestures Check out new import rules
As a general rule, If you are using nativescript-vue then you should
check typescript code samples.
"tns-core-modules/ui/gestures"; ```
Gestures in nativescript-vue
There is nothing to import to use gestures.
<Label
text="REFRESH"
#swipe="refresh"
/>
or
<Label
text="REFRESH"
#doubleTap="refresh"
/>
Unfortunately, nativescript docs are currently outdated for nativescript 7.
Related
Could someone advise me to use like scroll reveal for vue3, I couldn't find any forum and if so please explain to me exactly how to import scroll reveal for vue3
I've already tried different libraries, but all are for vue3, and the transition belonging to vue3 wouldn't work very well as scrollreveal
enter image description here
The Vue 3 branch for vue-scroll-reveal is not released on NPM, but you can add the library as a dependency using the project's github's URL. You will need to install it together with the dependency "scrollreveal" with yarn or npm like so:
yarn add scrollreveal https://github.com/tserkov/vue-scroll-reveal#v2
or
npm i scrollreveal https://github.com/tserkov/vue-scroll-reveal#v2
The Github README also describes how to use the library in a component which I've pasted below:
If using default options
<script setup>
import { vScrollReveal } from 'vue-scroll-reveal';
</script>
OR if using custom default options
<script setup>
import { createScrollRevealDirective } from 'vue-scroll-reveal';
const vScrollReveal = createScrollRevealDirective({
delay: 1000,
duration: 150,
});
</script>
I am migrating a project from NS 6.5 with Angular 8.2 to NS 8.1 and Angular 12.2 I have trouble with nsRouterLinkActive directive which doesn't work.
I am using lazy load for my modules like this
{ path: "mysettings", loadChildren: () => import("~/app/mysettings/mysettings.module").then((m) => m.MysettingsModule) }
and then in my app.component I use the following code to navigate:
<Label text="" class="fas bottomButton" [nsRouterLink]="['/mysettings']" nsRouterLinkActive="active" pageTransition="slide"></Label>
Navigation is working fine, my class is working fine, but it never gets added by nsRouterLinkActive directive.
Any help?
Without trying but looking at the docs, shouldn't the nsRouterLinkActive also be wrapped in square brackets, i.e. [nsRouterLinkActive]?
I'm experiencing a problem in my vue-cli created application. The following does not work:
<component :is="'v-text-field'"></component>
However a simple <v-text-field /> works great
The error is:
Unknown custom element: <v-text-field> - did you register the component correctly?
Does someone knows why? I can't reproduce it on codepen
Are you using vuetify-loader with tree-shaking? If so, you may just want to import {VTextField} from 'vuetify/lib' and add components: { VTextField }
I'm new to NativeScript. I have created a new project using the Angular Blank template. The navigation is done using page-router-outlet. I want to include a xmlns attribute on the page level. As far as i can see and understand the entire code is rendered inside a global page attribute. I've seen that I can modify the page properties by injecting the Page in a component and changing it's properties, but how can I do this for xmlns?
Best regards,
Vlad
To register a UI component in Angular based application you should use registerElement and not XML namespaces (which is a concept used in NativeScript Core). Nowadays most plugin authors are doing this job for you, but still, some of the plugins are not migrated to use the latest techniques so in some cases, we should manually register the UI element.
I've created this test applicaiton which demonstrates how to use nativescript-stripe in Angular. Here are the steps to enable and use the plugin.
Installation
npm i nativescript-stripe --save
Register the UI element in app.module.ts as done here
import { registerElement } from "nativescript-angular/element-registry";
registerElement("CreditCardView", () => require("nativescript-stripe").CreditCardView);
Add the following in main.ts as required in the plugin README
import * as app from "tns-core-modules/application";
import * as platform from "tns-core-modules/platform";
declare const STPPaymentConfiguration;
app.on(app.launchEvent, (args) => {
if (platform.isIOS) {
STPPaymentConfiguration.sharedConfiguration().publishableKey = "yourApiKey";
}
});
Use the plugin in your HTML (example)
<CreditCardView id="card"></CreditCardView>
Does anyone have a kendo UI scheduler example with angular 2? Is it compatible?
Thanks
Since there is some interest in this still you can create a component that is wrapped by the scheduler:
import { Component, ViewEncapsulation, ElementRef, AfterViewInit, OnDestroy, DoCheck, Input, Output, EventEmitter, IterableDiffers } from '#angular/core';
//you can import Jquery here if you want - i used it via CDN and not local node.
declare var jQuery: any;
scheduler: any;
schedulerControl: any;
#Component({
selector: 'scheduler',
template: `
<div></div>
`,
styleUrls: ['./scheduler.component.scss'],
encapsulation: ViewEncapsulation.None
})
constructor(
protected el: ElementRef,
) {
}
//you can also do #input and #outputs here if you want to build proper events around the scheduler components.
ngAfterViewInit() {
this.scheduler = jQuery(this.el.nativeElement.children[0]);
this.schedulerControl = jQuery(this.scheduler).data("kendoScheduler");
this.scheduler.kendoScheduler({.....put your scheduler options here ....});
Note:
You must import and use the right version of jquery - which is sadly still version 1.xxx
Note 2:
New versions now supports higher versions of Jquery - important to make sure they versions match with kendo requirements.
We are currently working on a project that has a very complex scheduling module.
At the momonet we are using Kendo UI scheduler wrapped with Angular2.
This is of course not a good solution as we are wrapping the Kendo JQuery implementation. It does work (and pretty well) but we will not continue with it if there will be no progress on native Angular2 implementation soon as it forces us to work "outside" Angular.
I think it's a shame that Telerik announcements on Angular2 are not clear enough. They put on their flag being leaders in Angular2 support long ago but it seems this is not happening as expected. We are already invested in Kendo in other projects(not Angular2) but we will have to choose something real soon.
If Kendo will not start showing any real progress we will not continue with it.
It is likely that the Angular2 kendo scheduler widget will be released in 2017. Here is a link to their roll out plan.
http://www.telerik.com/blogs/what-to-expect-in-2016-for-kendo-ui-with-angular-2-and-more
In the meantime to use the scheduler our team has just imported angular 1.x for the page running our scheduler in our angular 2.x app. Not ideal but you can also get just the kendo scripts you need to run the scheduler if you're worried about performance.
You may also want to look at using ngForward with angular 1.x in the meantime until the angular 2.x widget is available. Then convert your entire application over to angular 2.x when kendo releases the scheduler.