이온 구성 요소를 사용한 구축: 초보자 가이드

<p></p>

이온 성분이란 무엇인가요?

Ionic 구성 요소는 주로 하이브리드 앱에 생명을 불어넣는 요소입니다. 구성 요소는 애플리케이션에 대한 사용자 인터페이스를 제공하며 Ionic에는 28개 이상의 구성 요소가 번들로 제공됩니다. 이는 앱에 대한 멋진 첫인상을 만드는 데 도움이 됩니다.

물론 단일 애플리케이션에서 28개 구성 요소를 모두 사용할 수는 없습니다. 어떤 것을 사용할지 결정하는 방법은 무엇입니까?

다행히도 거의 모든 애플리케이션에서 일부 구성 요소를 찾을 수 있습니다. 내부에 이전 기사에서는 Ionic 구성 요소 버튼을 사용하여 다른 보기로 이동하는 방법을 설명했습니다. 이 버튼을 만드는 데 필요한 것은 다음 코드뿐입니다:

으아악

여기에서는 사용 가능한 Ionic 구성 요소 중 하나를 사용했습니다. 이것이 Ionic의 장점입니다. 버튼이 어떻게 사용되는지 신경 쓸 필요가 없습니다. 컴포넌트가 빌드된 후에 우리가 알아야 할 것은 관련 컴포넌트를 올바르게 사용하는 방법입니다.

이온 성분은 언제 사용해야 하나요?

초보자로서 Ionic 구성 요소를 사용하지 않고 애플리케이션을 개발할 수 있을지 의문입니다. 자신만의 사용자 정의 구성 요소를 개발할 수도 있지만 이는 Ionic 및 Angular의 고급 사용법에 대한 다른 날의 주제입니다.

그럼, Ionic 모바일에서 가장 일반적으로 사용되는 구성 요소를 사용하는 방법을 살펴보겠습니다. 신청:

슬라이드쇼 구성 요소

슬라이드쇼 구성 요소는 응용 프로그램을 소개하는 데 자주 사용됩니다. 다음은 일반적인 사용법 사진입니다. <p></p>

목록 구성요소

목록은 Ionic 앱에서 가장 자주 사용되는 구성 요소 중 하나입니다. 아래 스크린샷 예시를 참조하세요.

<p></p>

프로젝트에 구성 요소 추가

이제 Ionic의 구성 요소에 대한 정보를 모았으므로 이러한 "구성 요소" 중 일부를 함께 사용해 보겠습니다. 계속해서 Ionic 프로젝트에 몇 가지 구성 요소를 추가해 보겠습니다.

이전 튜토리얼에서 만든 프로젝트를 사용하고

Homepage

가 앱의 진입점이므로 Homepage에 슬라이드쇼를 추가하겠습니다. html 파일을 사용하여 슬라이드쇼를 추가하세요. 이를 위해 src/pages/home에 있는 home.html 파일로 이동하여 파일을 다음과 같이 변경합니다. 으아악 위에서 볼 수 있듯이 슬라이드쇼 구성 요소를 사용하여 3개의 슬라이드를 추가했습니다.

내에 있습니다. 원하는 만큼 슬라이드를 생성할 수 있지만 이 예에서는 3개만 만들었습니다.

<ion-slide>此处内容...</ion-slide>또 다른 Ionic 구성 요소인 목록 구성 요소를 사용하겠습니다. 이를 위해

My List

라는 제목의 새 페이지를 생성합니다. 다음 명령을 사용하여 이전 튜토리얼에서 새 페이지를 생성하는 방법을 기억해야 합니다. . ionic 生成页面 my-list새로 생성된 페이지를 애플리케이션에 추가한 후

my-list.html

로 이동하여 다음과 같이 파일을 편집해 보겠습니다. 으아악 위 코드를 앱에 추가하면 세 가지 항목이 포함된 목록을 볼 수 있습니다. 지금은 괜찮지만 목록을 스크롤할 때 가속 및 감속이 포함된 부드러운 스크롤을 보고 싶으시겠죠? 글쎄요, 그건 쉽습니다. 더 큰 목록이 필요합니다!

my-list.html

파일에서 다음 코드를 고려하세요. 으아악 위의 긴 목록으로 파일을 업데이트하면 스크롤의 가속 및 감속을 볼 수 있습니다.

이것은 프로젝트에서 목록을 생성하는 한 가지 방법이지만, 더 많은 항목이 포함된 목록을 생성해야 한다면 이는 귀찮아 보일 것입니다. 이는 각각에 대해

를 쓰는 것을 의미합니다. 다행스럽게도 더 좋은 방법이 있으며, 초보자라도 많은 양의 데이터와 정보를 다룰 때 동일한 접근 방식을 따르도록 노력해야 합니다.

<ion-item>...content...</ion-item>공식 Ionic 문서에서는 다양한 방법을 사용하여 항목으로 목록을 채우는 방법을 보여줍니다.

으아악

위 코드의 마법은 Angular 지시문을 사용한다는 것입니다.

는 목록의 각 항목으로 채워집니다. 이 지시어에 대해 더 자세히 알고 싶다면 공식 Angular 문서를 확인하세요.

*ngFor。我们不会更深入地探讨该指令的含义及其用途，但简而言之，它会迭代数据集合，使我们能够在应用中构建数据呈现列表和表格。 items 是一个包含我们的数据的变量，并且 item이 지식을 바탕으로

지시문을 사용하여 프로젝트를 개선할 수 있습니다. 다음 사항을 반영하도록

my-list.html*ngFor 파일을 편집하세요.

<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="이온 구성 요소를 사용한 구축: 초보자 가이드" >
        </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>

위 내용은 이온 구성 요소를 사용한 구축: 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!