Mobile Development with Ionic and Vue — Loading Spinner and Range Input

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

If we know how to create Vue web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with Vue.

Loading Spinner

We can add a loading spinner with the ion-spinner component.

For example, we can write:

<template>
  <ion-spinner name="bubbles"></ion-spinner>
</template>

<script>
import { IonSpinner } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonSpinner },
});
</script>

to add a loading spinner.

Radio

We can add radio buttons with the ion-radio component.

For example, we can write:

<template>
  <ion-list>
    <ion-radio-group value="biff">
      <ion-list-header>
        <ion-label>Name</ion-label>
      </ion-list-header>
      <ion-item>
        <ion-label>Biff</ion-label>
        <ion-radio slot="start" value="biff"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Cliff</ion-label>
        <ion-radio slot="start" value="cliff"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>
</template>

<script>
import {
  IonItem,
  IonLabel,
  IonList,
  IonListHeader,
  IonRadio,
  IonRadioGroup,
} from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonItem,
    IonLabel,
    IonList,
    IonListHeader,
    IonRadio,
    IonRadioGroup,
  },
});
</script>
CopyCopied
Properties

to add an ion-list component and ion-item component to hold a series of radio buttons.

The slot prop set to start put the radio button on the left side.

Also, we can put radio buttons in ion-radio-group component:

<template>
  <ion-list>
    <ion-radio-group>
      <ion-list-header>
        <ion-label> Auto Manufacturers </ion-label>
      </ion-list-header>
      <ion-item>
        <ion-label>Cord</ion-label>
        <ion-radio value="cord"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Duesenberg</ion-label>
        <ion-radio value="duesenberg"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>
</template>

<script>
import {
  IonItem,
  IonLabel,
  IonList,
  IonListHeader,
  IonRadio,
  IonRadioGroup,
} from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonItem,
    IonLabel,
    IonList,
    IonListHeader,
    IonRadio,
    IonRadioGroup,
  },
});
</script>

We add the ion-radio-group component to group the radio buttons together.

Range Input

We can add a numeric input with the ion-range component.

For example, we can write:

<template>
  <ion-list>
    <ion-item>
      <ion-range
        :min="1000"
        :max="2000"
        :step="100"
        :snaps="true"
        color="secondary"
      ></ion-range>
    </ion-item>
    <ion-item>
      <ion-range
        ref="rangeDualKnobs"
        dual-knobs="true"
        :min="21"
        :max="72"
        :step="3"
        :snaps="true"
      ></ion-range>
    </ion-item>
  </ion-list>
</template>

<script>
import { IonItem, IonLabel, IonList, IonRange } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonItem, IonLabel, IonList, IonRange },
  mounted() {
    this.$refs.rangeDualKnobs.value = { lower: 24, upper: 42 };
  },
});
</script>

We add the ion-range component with a few props.

min sets the min allowed value.

max sets the max allowed value.

step sets step interval.

snaps set to true makes the knob snaps to a step.

We can also assign a ref so that we can set the value property with it to set the value.

Conclusion

We can add a loading spinner and a range input with Ionic Vue.