ion-card

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4卡片组件ion-card对项目进行布局。

ion-card官方文档地址:https://ionicframework.com/docs/api/card

Cards 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 true, a button tag will be rendered and the card will be tappable.

Attribute button
Type boolean
Default false

color

Description

The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

Attribute color
Type string | undefined

disabled

Description

If true, the user cannot interact with the card.

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 href.

Attribute router-direction
Type "back" | "forward" | "root"
Default 'forward'

type

Description

The type of the button. Only used when an onclick or button property is present.

Attribute type
Type "button" | "reset" | "submit"
Default 'button'

ion-card中的CSS 自定义属性

Name Description
--background Background of the card
--color Color of the card