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

<p>

<h2> <p>이온 성분이란 무엇인가요?

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

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

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

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

<h2> <p>이온 성분은 언제 사용해야 하나요?

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

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

슬라이드쇼 구성 요소

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

<p>

목록 구성요소

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

<p>

<p>프로젝트에 구성 요소 추가

<h2> <p>

이제 Ionic의 구성 요소에 대한 정보를 모았으므로 이러한 "구성 요소" 중 일부를 함께 사용해 보겠습니다. 계속해서 Ionic 프로젝트에 몇 가지 구성 요소를 추가해 보겠습니다. <p>이전 튜토리얼에서 만든 프로젝트를 사용하고

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

내에 있습니다. 원하는 만큼 슬라이드를 생성할 수 있지만 이 예에서는 3개만 만들었습니다. <p> <ion-slide>此处内容...</ion-slide>또 다른 Ionic 구성 요소인 목록 구성 요소를 사용하겠습니다. 이를 위해

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

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

<p>

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

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

를 쓰는 것을 의미합니다. 다행스럽게도 더 좋은 방법이 있으며, 초보자라도 많은 양의 데이터와 정보를 다룰 때 동일한 접근 방식을 따르도록 노력해야 합니다. <p> <ion-item>...content...</ion-item>공식 Ionic 문서에서는 다양한 방법을 사용하여 항목으로 목록을 채우는 방법을 보여줍니다.

으아악 <p>위 코드의 마법은 Angular 지시문을 사용한다는 것입니다.

는 목록의 각 항목으로 채워집니다. 이 지시어에 대해 더 자세히 알고 싶다면 공식 Angular 문서를 확인하세요. <p> *ngFor。我们不会更深入地探讨该指令的含义及其用途，但简而言之，它会迭代数据集合，使我们能够在应用中构建数据呈现列表和表格。 items 是一个包含我们的数据的变量，并且 item이 지식을 바탕으로

지시문을 사용하여 프로젝트를 개선할 수 있습니다. 다음 사항을 반영하도록 <p>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="/static/imghw/default1.png"  data-src="{{item.image}}"  class="lazy" alt="이온 구성 요소를 사용한 구축: 초보자 가이드" >
        </ion-avatar>
        <h2 id="item-title">{{item.title}}</h2>
        <p>{{item.subTitle}}</p>
      </ion-item>
    </ion-list>
    <!-- End Ionic List Component -->
</ion-content>

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

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

<p>现在，回到我们的代码，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'
      }]
    }

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

结论

<p>

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

<p>

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

<p>

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