Question

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-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content>
    Here's a small text description for the card content. Nothing more, nothing less.
  </ion-card-content>
</ion-card>

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