Building with Ionic Components: A Beginner's Guide

<p></p>

What is an ionic component?

Ionic components are largely what make your hybrid apps come to life. Components provide the user interface for your application, and Ionic comes bundled with more than 28 components. These will help you create a stunning first impression for your app.

Of course, you cannot use all 28 components in a single application. How to decide which ones to use?

Fortunately, you can find some components in almost every application. inside In a previous article, I showed you how to use an Ionic component button to navigate to another view. All you need to create this button is the following code:

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

Here we have used one of the available Ionic components. That’s the beauty of Ionic: we don’t have to care about how the buttons are used After the components are built, what we need to know is how to use the related components correctly.

When to use ionic components?

As a beginner, I doubt that you will develop an application without using Ionic components. You can also develop your own custom components, but that's a topic for another day about advanced usage of Ionic and Angular.

Having said so much, let’s take a look at how to use the most commonly used components in Ionic mobile application:

Slideshow component

The slideshow component is usually used as an introduction to the application. Here are pictures of its common usage:

List component

Lists are one of the components you'll use frequently in Ionic applications. See the screenshot example below.

Add components to your project<p></p>

Now that we've gathered some information about Ionic components, let's try to put some of these "building blocks" together. Let's go ahead and add some components to our Ionic project.

We will use the project we created in the previous tutorial, and since Homepage is the entry point to our app, we will add slides to Homepage. html file to add our slideshow. To do this, we will navigate to the home.html file in src/pages/home and make the following changes to the file:

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

As you can see above, we added three slides using the Slideshow component. This is within <ion-slide>content here...</ion-slide>. You can generate as many slides as you like, but for the purposes of this example, we only created three.

We will use another Ionic component: the list component. To do this, we go ahead and generate a new page titled My List. You should remember how to generate a new page from the previous tutorial using the following command: ionic generate page my-list.

After adding the newly created page to the application, let's continue navigating to my-list.html and edit the file as follows:

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

After adding the above code to your app, you should be able to see a list with three items. That's fine now, but I'm sure you'd like to see some smooth scrolling with acceleration and deceleration when scrolling through the list, right? Well, that’s easy to do – we just need a bigger list!

Consider the following code in the my-list.html file:

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

If you update the file with the longer list above, you will see the scrolling speed up and slow down.

Now, this is one way to create a list in our project, but if we need to create a list with more items, this will look annoying. This means writing <ion-item>...content...</ion-item> for each one. Fortunately, there is a better way, and even as a beginner, you should try to follow the same approach when dealing with large amounts of data and information.

The official Ionic documentation shows how to populate a list with items using different methods:

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

The magic of the above code is the use of the Angular directive: *ngFor. We won’t go into more depth about what this directive means and what it does, but in a nutshell, it iterates over a collection of data, allowing us to build data presentation lists and tables in our app. items is a variable containing our data, and item is populated with each item in the list. If you want to know more about this directive, check out the official Angular documentation.

With this knowledge, we can use the *ngFor directive to improve our project. Edit the my-list.html file to reflect the following:

<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="Building with Ionic Components: A Beginner's Guide" >
        </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>

The above is the detailed content of Building with Ionic Components: A Beginner's Guide. For more information, please follow other related articles on the PHP Chinese website!