ion-card
Ionic4项目中我们可以使用Ionic4卡片组件ion-card对项目进行布局。 ion-card官方文档地址:https://ionicframework.com/docs/api/cardCards are a standard piece of UI that serves as an entry point to more detailed
information. A card can be a single component, but is often made up of some
header, title, subtitle, and content. ion-card
is broken up into several
sub-components to reflect this. Please see ion-card-content
,
ion-card-header
, ion-card-title
, ion-card-subtitle
.
ion-card 用法(Usage)
<ion-card>
<ion-card-header>
<ion-card-subtitle>Card Subtitleion-card-subtitle>
<ion-card-title>Card Titleion-card-title>
ion-card-header>
<ion-card-content>
Keep close to Nature's heart... and break clear away, once in awhile,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
ion-card-content>
ion-card>
<ion-card>
<ion-item>
<ion-icon name="pin" slot="start">ion-icon>
<ion-label>ion-item in a card, icon left, button rightion-label>
<ion-button fill="outline" slot="end">Viewion-button>
ion-item>
<ion-card-content>
This is content, without any paragraph or header tags,
within an ion-card-content element.
ion-card-content>
ion-card>
<ion-card>
<ion-item href="#" class="activated">
<ion-icon name="wifi" slot="start">ion-icon>
<ion-label>Card Link Item 1 .activatedion-label>
ion-item>
<ion-item href="#">
<ion-icon name="wine" slot="start">ion-icon>
<ion-label>Card Link Item 2ion-label>
ion-item>
<ion-item class="activated">
<ion-icon name="warning" slot="start">ion-icon>
<ion-label>Card Button Item 1 .activatedion-label>
ion-item>
<ion-item>
<ion-icon name="walk" slot="start">ion-icon>
<ion-label>Card Button Item 2ion-label>
ion-item>
ion-card>
<ion-card>
<ion-card-header>
<ion-card-subtitle>Card Subtitleion-card-subtitle>
<ion-card-title>Card Titleion-card-title>
ion-card-header>
<ion-card-content>
Keep close to Nature's heart... and break clear away, once in awhile,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
ion-card-content>
ion-card>
<ion-card>
<ion-item>
<ion-icon name="pin" slot="start">ion-icon>
<ion-label>ion-item in a card, icon left, button rightion-label>
<ion-button fill="outline" slot="end">Viewion-button>
ion-item>
<ion-card-content>
This is content, without any paragraph or header tags,
within an ion-card-content element.
ion-card-content>
ion-card>
<ion-card>
<ion-item href="#" class="activated">
<ion-icon name="wifi" slot="start">ion-icon>
<ion-label>Card Link Item 1 .activatedion-label>
ion-item>
<ion-item href="#">
<ion-icon name="wine" slot="start">ion-icon>
<ion-label>Card Link Item 2ion-label>
ion-item>
<ion-item class="activated">
<ion-icon name="warning" slot="start">ion-icon>
<ion-label>Card Button Item 1 .activatedion-label>
ion-item>
<ion-item>
<ion-icon name="walk" slot="start">ion-icon>
<ion-label>Card Button Item 2ion-label>
ion-item>
ion-card>
import React from 'react';
import { IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonItem, IonIcon, IonLabel, IonButton } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
<IonCard>
<IonCardHeader>
<IonCardSubtitle>Card SubtitleIonCardSubtitle>
<IonCardTitle>Card TitleIonCardTitle>
IonCardHeader>
<IonCardContent>
Keep close to Nature's heart... and break clear away, once in awhile,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
IonCardContent>
IonCard>
<IonCard>
<IonItem>
<IonIcon name="pin" slot="start" />
<IonLabel>ion-item in a card, icon left, button rightIonLabel>
<IonButton fill="outline" slot="end">ViewIonButton>
IonItem>
<IonCardContent>
This is content, without any paragraph or header tags,
within an ion-cardContent element.
IonCardContent>
IonCard>
<IonCard>
<IonItem href="#" class="activated">
<IonIcon name="wifi" slot="start" />
<IonLabel>Card Link Item 1 .activatedIonLabel>
IonItem>
<IonItem href="#">
<IonIcon name="wine" slot="start" />
<IonLabel>Card Link Item 2IonLabel>
IonItem>
<IonItem class="activated">
<IonIcon name="warning" slot="start" />
<IonLabel>Card Button Item 1 .activatedIonLabel>
IonItem>
<IonItem>
<IonIcon name="walk" slot="start" />
<IonLabel>Card Button Item 2IonLabel>
IonItem>
IonCard>
>
);
export default Example;
<template>
<ion-card>
<ion-card-header>
<ion-card-subtitle>Card Subtitleion-card-subtitle>
<ion-card-title>Card Titleion-card-title>
ion-card-header>
<ion-card-content>
Keep close to Nature's heart... and break clear away, once in awhile,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
ion-card-content>
ion-card>
<ion-card>
<ion-item>
<ion-icon name="pin" slot="start">ion-icon>
<ion-label>ion-item in a card, icon left, button rightion-label>
<ion-button fill="outline" slot="end">Viewion-button>
ion-item>
<ion-card-content>
This is content, without any paragraph or header tags,
within an ion-card-content element.
ion-card-content>
ion-card>
<ion-card>
<ion-item href="#" class="activated">
<ion-icon name="wifi" slot="start">ion-icon>
<ion-label>Card Link Item 1 .activatedion-label>
ion-item>
<ion-item href="#">
<ion-icon name="wine" slot="start">ion-icon>
<ion-label>Card Link Item 2ion-label>
ion-item>
<ion-item class="activated">
<ion-icon name="warning" slot="start">ion-icon>
<ion-label>Card Button Item 1 .activatedion-label>
ion-item>
<ion-item>
<ion-icon name="walk" slot="start">ion-icon>
<ion-label>Card Button Item 2ion-label>
ion-item>
ion-card>
template>
ion-card 属性(Properties)
button | |
---|---|
Description | If |
Attribute | button |
Type | boolean |
Default | false |
color | |
Description | The color to use from your application's color palette.
Default options are: |
Attribute | color |
Type | string | undefined |
disabled | |
Description | If |
Attribute | disabled |
Type | boolean |
Default | false |
href | |
Description | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. |
Attribute | href |
Type | string | undefined |
mode | |
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
routerDirection | |
Description | When using a router, it specifies the transition direction when navigating to
another page using |
Attribute | router-direction |
Type | "back" | "forward" | "root" |
Default | 'forward' |
type | |
Description | The type of the button. Only used when an |
Attribute | type |
Type | "button" | "reset" | "submit" |
Default | 'button' |
ion-card中的CSS 自定义属性
Name | Description |
---|---|
--background | Background of the card |
--color | Color of the card |