Мобильная разработка с Ionic и Vue - группы элементов, примечания и списки

Если мы знаем, как создавать веб-приложения Vue, но хотим разрабатывать мобильные приложения, мы можем использовать фреймворк Ionic.

В этой статье мы рассмотрим, как начать разработку мобильных приложений с помощью фреймворка Ionic и Vue.

Группы товаров

Мы можем добавлять группы элементов с помощью компонента ion-item-group.

Например, мы можем написать:

<template>
  <ion-page>
    <ion-content>
      <ion-item-group>
        <ion-item-divider>
          <ion-label>B</ion-label>
        </ion-item-divider>
        <ion-item>
          <ion-label>Bangladesh</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>Belarus</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>Belgium</ion-label>
        </ion-item>
      </ion-item-group>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import {
  IonItem,
  IonItemGroup,
  IonContent,
  IonPage,
  IonLabel,
} from "@ionic/vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  components: { IonItem, IonContent, IonItemGroup, IonPage, IonLabel },
});
</script>

Мы добавляем ion-item-group, чтобы сгруппировать элементы списка и разделитель элементов вместе.

Также мы можем сделать так, чтобы элемент списка скользил:

<template>
  <ion-page>
    <ion-content>
      <ion-item-group>
        <ion-item-sliding>
          <ion-item>
            <ion-label>
              <h3>Carrots</h3>
            </ion-label>
          </ion-item>
          <ion-item-options>
            <ion-item-option> Favorite </ion-item-option>
          </ion-item-options>
        </ion-item-sliding>
      </ion-item-group>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import {
  IonItem,
  IonItemGroup,
  IonContent,
  IonPage,
  IonLabel,
  IonItemSliding,
} from "@ionic/vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  components: {
    IonItem,
    IonContent,
    IonItemGroup,
    IonPage,
    IonLabel,
    IonItemSliding,
  },
});
</script>

Мы добавляем компонент ion-item-sliding, чтобы добавить скользящий элемент списка.

Затем мы можем провести по элементу справа налево и увидеть кнопку «Избранное».

Примечание

Мы можем добавить компонент ion-note для отображения заметок.

Чтобы воспользоваться им, мы пишем:

<template>
  <ion-page>
    <ion-content>
      <ion-note color="primary">Primary Note</ion-note>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import { IonContent, IonPage, IonNote } from "@ionic/vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  components: {
    IonContent,
    IonPage,
    IonNote,
  },
});
</script>

Мы добавляем компонент ion-note для отображения заметки.

Опора color устанавливает цвет.

Списки

Мы можем добавлять списки с помощью компонента ion-list.

Чтобы добавить список, мы можем написать:

<template>
  <ion-page>
    <ion-content>
      <ion-list>
        <ion-item>
          <ion-label>Input</ion-label>
          <ion-input></ion-input>
        </ion-item>
        <ion-item>
          <ion-label>Toggle</ion-label>
          <ion-toggle slot="end"></ion-toggle>
        </ion-item>
        <ion-item>
          <ion-label>Radio</ion-label>
          <ion-radio slot="end"></ion-radio>
        </ion-item>
        <ion-item>
          <ion-label>Checkbox</ion-label>
          <ion-checkbox slot="start"></ion-checkbox>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import {
  IonContent,
  IonPage,
  IonList,
  IonLabel,
  IonToggle,
  IonRadio,
} from "@ionic/vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  components: {
    IonContent,
    IonPage,
    IonList,
    IonLabel,
    IonToggle,
    IonRadio,
  },
});
</script>

Мы добавляем ion-list с компонентом ion-item, чтобы добавить список с элементом.

ion-label отображает метку на let, а все остальное отображается справа, кроме строки флажка.

Флажок отображает ion-label справа и флажок слева.

Заключение

Мы можем добавлять группы элементов, отображение заметок и списки с помощью Ionic Vue.