Mobile Development with Ionic and Vue — Toggle, Toolbar, and Header
Tags: webdev, programming, android, vue
Published: 2021-01-23 02:20:19

**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.

### Toggle Switches

We can add toggle switches with the `ion-toggle` component.

For example, we can add switches with various colors:

```
<template>
  <div>
    <ion-toggle color="primary"></ion-toggle>
    <ion-toggle color="secondary"></ion-toggle>
    <ion-toggle color="danger"></ion-toggle>
    <ion-toggle color="light"></ion-toggle>
    <ion-toggle color="dark"></ion-toggle>
  </div>
</template>

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

export default defineComponent({
  components: { IonLabel, IonList, IonItem, IonToggle }
});
</script>
```

Also, we can write:

```
<template>
  <ion-item>
    <ion-label>Mushrooms</ion-label>
    <ion-toggle
      @ionChange="checked.value = !checked.value"
      value="mushrooms"
      :checked="checked"
    >
    </ion-toggle>
  </ion-item>
</template>

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

export default defineComponent({
  components: { IonLabel, IonList, IonItem, IonToggle },
  setup() {
    const checked = ref(false);
    return { checked };
  },
});
</script>
```

to set a reactive property when we toggle the value.

### Toolbar

We can add a toolbar with the `ion-toolbar` component.

For instance, we can write:

```
<template>
  <ion-toolbar color="dark">
    <ion-buttons slot="secondary">
      <ion-button>
        <ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
      </ion-button>
      <ion-button>
        <ion-icon slot="icon-only" :icon="search"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="primary">
      <ion-button color="danger">
        <ion-icon
          slot="icon-only"
          :ios="ellipsisHorizontal"
          :md="ellipsisVertical"
        ></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Dark Toolbar</ion-title>
  </ion-toolbar>
</template>

<script>
import {
  IonButton,
  IonButtons,
  IonIcon,
  IonTitle,
  IonToolbar,
} from "@ionic/vue";
import {
  ellipsisHorizontal,
  ellipsisVertical,
  helpCircle,
  personCircle,
  search,
  star,
} from "ionicons/icons";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonButton,
    IonButtons,
    IonIcon,
    IonTitle,
    IonToolbar,
  },
  setup() {
    return {
      ellipsisHorizontal,
      ellipsisVertical,
      helpCircle,
      personCircle,
      search,
      star,
    };
  },
});
</script>
```

to add a dark toolbar with some buttons inside it.

`ion-title` has the title of the toolbar, which is displayed on the left side.

### Header

We can add a header with various styles.

For example, we can write:

```
<template>
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-back-button></ion-back-button>
      </ion-buttons>
      <ion-title>Navigation Bar</ion-title>
    </ion-toolbar>

    <ion-toolbar>
      <ion-title>Subheader</ion-title>
    </ion-toolbar>
  </ion-header>

  <!-- Header without a border -->
  <ion-header class="ion-no-border">
    <ion-toolbar>
      <ion-title>Header - No Border</ion-title>
    </ion-toolbar>
  </ion-header>
</template>

<script>
import {
  IonBackButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonTitle,
  IonToolbar
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    IonBackButton,
    IonButtons,
    IonContent,
    IonHeader,
    IonTitle,
    IonToolbar
  }
});
</script>
```

to add the header with a toolbar inside.

We can add the `ion-no-border` class to remove the border from the header.

### Conclusion

We can add a toggle switch, toolbar and header with Ionic Vue.