Construire avec des composants ioniques : guide du débutant

<p></p>

Que sont les composants ioniques ?

Les composants ioniques sont en grande partie ce qui donne vie à vos applications hybrides. Les composants fournissent l'interface utilisateur de votre application et Ionic est fourni avec plus de 28 composants. Ceux-ci vous aideront à créer une première impression époustouflante pour votre application.

Bien sûr, vous ne pouvez pas utiliser les 28 composants dans une seule application. Comment décider lesquels utiliser ?

Heureusement, vous pouvez trouver certains composants dans presque toutes les applications. à l'intérieur Dans un article précédent, je vous ai montré comment utiliser un bouton de composant Ionic pour accéder à une autre vue. Tout ce dont vous avez besoin pour créer ce bouton est le code suivant :

<button ion-button>Navigate to Info</button>

Ici, nous avons utilisé l'un des composants ioniques disponibles. C’est la beauté d’Ionic : nous n’avons pas à nous soucier de la façon dont les boutons sont utilisés Une fois les composants construits, ce que nous devons savoir, c'est comment utiliser correctement les composants associés.

Quand utiliser les composants ioniques ?

En tant que débutant, je doute que vous puissiez développer une application sans utiliser de composants Ionic. Vous pouvez également développer vos propres composants personnalisés, mais c'est un sujet pour un autre jour sur l'utilisation avancée d'Ionic et Angular.

Cela dit, voyons comment utiliser les composants les plus couramment utilisés dans Ionic mobile. Candidature :

Composant Diaporama

Le composant diaporama est souvent utilisé comme introduction à une application. Voici des photos de son utilisation courante :

Composant Liste

Les listes sont l'un des composants les plus fréquemment utilisés dans vos applications Ionic. Voir l'exemple de capture d'écran ci-dessous.

Ajoutez des composants à votre projet

Maintenant que nous avons rassemblé quelques informations sur les composants d'Ionic, essayons de rassembler certains de ces « éléments de base ». Allons-y et ajoutons quelques composants à notre projet Ionic.

Nous utiliserons le projet que nous avons créé dans le tutoriel précédent, et comme la

Page d'accueil est le point d'entrée de notre application, nous ajouterons un diaporama à la Page d'accueil. html pour ajouter notre diaporama. Pour ce faire, nous allons accéder au fichier home.html dans src/pages/home et apporter les modifications suivantes au fichier :

<ion-header>
  <ion-navbar>
    <ion-title>Welcome</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <!-- Start Ionic Slides Component -->
  <ion-slides pager>

    <ion-slide style="background-color: green">
      <h2>Welcome to Hello World</h2>
      <p>Do some reading here and swipe left</p>
    </ion-slide>
  
    <ion-slide style="background-color: blue">
      <h2>Ionic World</h2>
      <p>Some more reading here and swipe left</p>
      <p>Swiping right works too :)</p>
    </ion-slide>
  
    <ion-slide style="background-color: red">
      <h2>Finish</h2>
      <p>You can't swipe all day. See more of my app</p>
      <button ion-button (click)="navigateToMyList()">Show me more!</button>
    </ion-slide>
    
  </ion-slides>
  <!-- End Ionic Slides Component -->
</ion-content>

Comme vous pouvez le voir ci-dessus, nous avons ajouté trois diapositives à l'aide du composant Diaporama. C'est dans

. Vous pouvez générer autant de diapositives que vous le souhaitez, mais pour les besoins de cet exemple, nous n'en avons créé que trois. <ion-slide>此处内容...</ion-slide>

Nous utiliserons un autre composant Ionic : le composant liste. Pour ce faire, nous générons une nouvelle page intitulée

Ma liste. Vous devez vous rappeler comment générer une nouvelle page à partir du tutoriel précédent en utilisant la commande suivante : . ionic 生成页面 my-list

Après avoir ajouté la page nouvellement créée à l'application, naviguons vers

my-list.html et modifions le fichier comme suit :

<ion-header>

  <ion-navbar>
    <ion-title>My List</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
    <!-- Start Ionic List Component -->
    <ion-list>
      <ion-item>1</ion-item>
      <ion-item>2</ion-item>
      <ion-item>3</ion-item>
    </ion-list>
    <!-- End Ionic List Component -->
</ion-content>

Après avoir ajouté le code ci-dessus à votre application, vous devriez pouvoir voir une liste de trois éléments. C'est bien maintenant, mais je suis sûr que vous aimeriez voir un défilement fluide avec accélération et décélération lors du défilement dans la liste, n'est-ce pas ? Eh bien, c’est facile à faire – nous avons juste besoin d’une plus grande liste !

Considérez le code suivant dans le fichier

my-list.html  :

<ion-header>

  <ion-navbar>
    <ion-title>My List</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
    <!-- Start Ionic List Component -->
    <ion-list>
      <ion-item>1</ion-item>
      <ion-item>2</ion-item>
      <ion-item>3</ion-item>
      <ion-item>4</ion-item>
      <ion-item>5</ion-item>
      <ion-item>6</ion-item>
      <ion-item>7</ion-item>
      <ion-item>8</ion-item>
      <ion-item>9</ion-item>
      <ion-item>10</ion-item>
      <ion-item>11</ion-item>
      <ion-item>12</ion-item>
      <ion-item>13</ion-item>
      <ion-item>14</ion-item>
      <ion-item>15</ion-item>
      <ion-item>16</ion-item>
      <ion-item>17</ion-item>
      <ion-item>18</ion-item>
      <ion-item>19</ion-item>
      <ion-item>20</ion-item>
    </ion-list>
    <!-- End Ionic List Component -->
</ion-content>

Si vous mettez à jour le fichier avec la liste plus longue ci-dessus, vous verrez l'accélération et la décélération du défilement.

Maintenant, c'est une façon de créer une liste dans notre projet, mais si nous devons créer une liste avec plus d'éléments, cela semblera ennuyeux. Cela signifie écrire

pour chacun. Heureusement, il existe une meilleure méthode, et même en tant que débutant, vous devriez essayer de suivre la même approche lorsque vous traitez de grandes quantités de données et d'informations. <ion-item>...content...</ion-item>

La documentation officielle d'Ionic montre comment remplir une liste avec des éléments en utilisant différentes méthodes :

<ion-header>

  <ion-navbar>
    <ion-title>My List</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
    <!-- Start Ionic List Component -->
    <ion-list>
        <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
        {{ item }}
        </button>  
    </ion-list>
    <!-- End Ionic List Component -->
</ion-content>

La magie du code ci-dessus réside dans l'utilisation de directives angulaires :

est renseignée avec chaque élément de la liste. Si vous souhaitez en savoir plus sur cette directive, consultez la documentation officielle d'Angular. *ngFor。我们不会更深入地探讨该指令的含义及其用途，但简而言之，它会迭代数据集合，使我们能够在应用中构建数据呈现列表和表格。 items 是一个包含我们的数据的变量，并且 item

Grâce à ces connaissances, nous pouvons utiliser la directive

pour améliorer nos projets. Modifiez le fichier *ngFormy-list.html pour refléter ce qui suit :

<ion-header>

  <ion-navbar>
    <ion-title>My List</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
    <!-- Start Ionic List Component -->
    <ion-list>
      <ion-item *ngFor="let item of items">
        <ion-avatar item-start>
          <img  src="{{item.image}}" alt="Construire avec des composants ioniques : guide du débutant" >
        </ion-avatar>
        <h2>{{item.title}}</h2>
        <p>{{item.subTitle}}</p>
      </ion-item>
    </ion-list>
    <!-- End Ionic List Component -->
</ion-content>

这里发生了很多事情。 <ion-list></ion-list> 包含一系列 <ion-avatar></ion-avatar> 组件。 item-start 属性意味着头像将与右侧对齐。每个列表项还包含一个标题标签 (<h2></h2>) 和一个段落标签 (<p></p>)。

因此，基本上，您还可以在列表组件内添加其他组件。看看 Ionic 文档中的卡片列表示例中如何实现此目的的另一个很好的示例。同样，在该示例中实现 *ngFor 将会带来好处。

现在，回到我们的代码，items 中的 item 包含 title、subTitle 和 >图像。让我们继续在 my-list.ts 文件中进行以下更改：

export class MyListPage {
  items: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.items = [
      {
        title: 'Item 1', 
        subTitle: 'Sub title 1', 
        image: 'https://placehold.it/50'
      },
      {
        title: 'Item 2', 
        subTitle: 'Sub title 2', 
        image: 'http://placehold.it/50'
      },
      {
        title: 'Item 3', 
        subTitle: 'Sub title 3', 
        image: 'http://placehold.it/50'
      },
      {
        title: 'Item 4', 
        subTitle: 'Sub title 4', 
        image: 'http://placehold.it/50'
      },
      {
        title: 'item 5', 
        subTitle: 'Sub title 5', 
        image: 'http://placehold.it/50'
      },
      title: 'item 6', 
        subTitle: 'Sub title 6', 
        image: 'http://placehold.it/50'
      },
      title: 'item 7', 
        subTitle: 'Sub title 7', 
        image: 'http://placehold.it/50'
      },
      title: 'item 8', 
        subTitle: 'Sub title 8', 
        image: 'http://placehold.it/50'
      },
      title: 'item 9', 
        subTitle: 'Sub title 9', 
        image: 'http://placehold.it/50'
      },
      title: 'item 10', 
        subTitle: 'Sub title 10', 
        image: 'http://placehold.it/50'
      }]
    }

在上面的示例中，我们正在构造函数文件 my-list.ts 中填充项目。这些将显示在我们的页面模板（my-list.html 文件）中。该数据可以来自任何来源：本地数据库、用户输入或外部 REST API。但为了这个例子，我们只是对数据进行硬编码。

结论

虽然我们没有涵盖所有 Ionic 组件，但相同的原则也适用于其他组件。我想鼓励您尝试并测试其余组件并开始熟悉它们的使用。正如我在开头提到的，这些组件将成为您将构建的每个 Ionic 应用程序的构建块！

<p></p>

同时，请查看我们关于 Ionic 应用程序开发的其他一些帖子。

<p></p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!