CODEWITHSUNDEEP
androidioshyperlinknativescript
Neiluj
Neiluj

Reputation: 113

Make a simple href link in Nativescript Ios & Android

Good Evening,

I have a simple question, how to create a link in an application made with VueJs & Nativescript for Ios & Android.

I have a online shop and I want user to be able to visit this shop just by clicking a link/button in my app. The click would launch the browser on mobile.

Lets say I have www.shop.com I want a link like this : My Link.

Thanks.

Upvotes: 0

Views: 465

Answers (1)

Paaske
Paaske

Reputation: 4403

Here's a StackBlitz example of how you could do it.

The important part is here if you just want to see, not run it. In short, use a Label with class link to style it as a link, and use openUrl to launch the link in the browser.

<template>
  <Page>
    <ActionBar>
      <Label text="Home" class="font-bold text-lg" />
    </ActionBar>

    <GridLayout>
      <Label
        class="text-xl align-middle text-center link"
        :text="linkText"
        @tap="openLink"
      />
    </GridLayout>
  </Page>
</template>

<script lang="ts">
import Vue from 'nativescript-vue';
import { Utils } from '@nativescript/core';

export default Vue.extend({
  computed: {
    linkText() {
      return 'My Link';
    },
  },
  methods: {
    openLink() {
      Utils.openUrl('https://nativescript.org');
    },
  },
});
</script>

<style>
.link {
  color: #0645ad;
  text-decoration: underline;
}
</style>

In case you don't want to rely on the built in Utils.openUrl(), you can call the native API directly, for example like this on iOS:

import { Application } from '@nativescript/core';

const app: UIApplication = Application.ios.nativeApp;
const options = NSDictionary.dictionary<string, any>();
const callback = (success) => {
  console.log('openUrl: ', success);
};
app.openURLOptionsCompletionHandler(NSURL.URLWithString('https://nrk.no'), options, callback);

Upvotes: 1

Related Questions