ionic UI 组件之 ion-card

北纬的距离

已于 2023-03-15 14:32:27 修改

阅读量209

点赞数 1

文章标签：前端 angular.js Powered by 金山文档

于 2023-03-06 13:20:16 首次发布

本文链接：https://blog.csdn.net/qq_24909149/article/details/129358905

版权

本文介绍了如何在Ionic应用中使用组件来创建卡片式布局，包括添加标题、内容、列表和图像。示例展示了基本用法、自定义标题、列表项以及如何使用背景图片来增强视觉效果。此外，还提到了如何通过CSS进行样式调整以保持一致的界面风格。

摘要由CSDN通过智能技术生成

1.基本用法

<ion-card>
    <ion-card-header>Card Header</ion-card-header>
    <ion-card-content>
        <!-- Add card content here! -->
    </ion-card-content>
</ion-card>

2.标题

可以对card进行自定义以包含标题，将<ion-card-header>组件添加到卡中

<ion-card>
    <ion-card-header>    Header  </ion-card-header>
    <ion-card-content>
        The British use the term "header", 
        but the American term "head-shot" 
        the English simply refuse to adopt.  
    </ion-card-content>
</ion-card>

3.列表

一张card可以包含一个项目列表<ion-card> <ion-card>

<ion-card>
    <ion-card-header>    Explore Nearby  </ion-card-header>
    <ion-list>
        <button ion-item>
             <ion-icon name="cart" item-start></ion-icon>Shopping    
        </button>
        <button ion-item>
            <ion-icon name="medical" item-start></ion-icon>Hospital
        </button>
        <button ion-item>
            <ion-icon name="cafe" item-start>
            </ion-icon>Cafe
        </button>
        <button ion-item>
            <ion-icon name="paw" item-start>
                </ion-icon>Dog Park
        </button>
        <button ion-item>
            <ion-icon name="beer" item-start>
            </ion-icon>Pub
        </button>
        <button ion-item>
            <ion-icon name="planet" item-start></ion-icon>Space
        </button>
    </ion-list>
</ion-card>

4.图像

图片大小各不相同，因此在整个应用中采用一致的样式非常重要。图像可以很容易地添加到card上。将图像添加到card上会使图像具有恒定的宽度和可变的高度。列表，标题和其他card组件可以轻松地与图像card结合使用。要将图像添加到card上，使用以下标记：

<ion-card>
    <img src="img/nin-live.png"/>
    <ion-card-content>
        <ion-card-title>
            Nine Inch Nails Live
        </ion-card-title>
        <p>
            The most popular industrial group ever, 
            and largely responsible for bringing the music
            to a mass audience.
        </p>
        </ion-card-content>
</ion-card>

5.背景图片

<ion-content class="card-background-page">
    <ion-card>
        <img src="img/card-saopaolo.png"/>
        <div class="card-title">São Paulo</div>
        <div class="card-subtitle">41 Listings</div>
    </ion-card>
    <ion-card> 
        <img src="img/card-amsterdam.png"/>
        <div class="card-title">Amsterdam</div>
        <div class="card-subtitle">64 Listings</div>
    </ion-card>
    <ion-card>
        <img src="img/card-sf.png"/> 
        <div class="card-title">San Francisco</div>
        <div class="card-subtitle">72 Listings</div> 
    </ion-card>
    <ion-card>
        <img src="img/card-madison.png"/>
        <div class="card-title">Madison</div>
        <div class="card-subtitle">28 Listings</div> 
    </ion-card>
</ion-content>

然后在页面的scss文件中：

.card-background-page {  
    .ion-card {    
        position: relative;
        text-align: center;
    }  
    .card-title {    
        position: absolute;    
        top: 36%;    
        font-size: 2.0em;    
        width: 100%;    
        font-weight: bold;    
        color: #fff;  
    }  
    .card-subtitle{    
        font-size: 1.0em;    
        position: absolute;    
        top: 52%;    
        width: 100%;    
        color: #fff;  
    }
}

更多高级设置可以参考官方文档：https://ionicframework.com/docs/components/#card-background