如何让我的 Ionic 列表看起来像这样？

Question

我是 Ionic 的新手，Angular 我正在尝试为我的 Ionic 列表实现某种外观。我想让我的列表项在某种程度上看起来像卡片。以下是我的意思的两个例子：

First Example

Second Example

到目前为止，我尝试使用离子卡，但无法使它们看起来像那样。我也试过得到一个普通的离子列表，但我不知道我该如何塑造这些项目看起来像想要的。

Progress

 <ion-list>
 <ion-item *ngFor="let item of items">
   <ion-avatar slot="start">
     <img src="assets/icon/favicon.png">
   </ion-avatar>
   <ion-label>
     <ion-grid>
       <ion-row>
         <ion-col size="12">
           <ion-label>{{item.text}}</ion-label>
         </ion-col>
       </ion-row>
       <ion-row>
         <ion-col size="2">
           <ion-label>+</ion-label>
         </ion-col>
         <ion-col size="10">
           <ion-label>{{item.text2}}</ion-label>
         </ion-col>
       </ion-row>
     </ion-grid>
   </ion-label>
 </ion-item>
</ion-list>

目前我用这个作为参考

在此先感谢您的帮助！

Answer 1

我强烈建议您使用 ionic-team 的 2021 conference app source code 来表达您的敬意。它充满了您可以在您的应用程序中使用的有用列表示例。

如何让我的 Ionic 列表看起来像这样？

How can I make my Ionic list look like this?

user-interface

android

ionic-framework

angular