跳到主要内容
版本:v6

ion-card

shadow

卡片(Card)是显示文本、图像、按钮和列表等内容的容器。 卡片可以是单个组件,但通常由头部、标题、副标题和内容组成。 卡片被分解为多个组件以适应这种结构: card headercard titlecard subtitlecard content

基本用法

媒体卡片

卡片按钮

列表卡片

主题

颜色

CSS 自定义属性

属性

button

说明If true, a button tag will be rendered and the card will be tappable.
属性button
类型boolean
默认值false

color

说明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.
属性color
类型"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
默认值undefined

disabled

说明If true, the user cannot interact with the card.
属性disabled
类型boolean
默认值false

download

说明This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
属性download
类型string | undefined
默认值undefined

href

说明Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
属性href
类型string | undefined
默认值undefined

mode

说明The mode determines which platform styles to use.

这是一个虚拟属性,在初始化时设置一次,之后更改其值不会更新组件。
属性mode
类型"ios" | "md"
默认值undefined

rel

说明Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
属性rel
类型string | undefined
默认值undefined

routerAnimation

说明When using a router, it specifies the transition animation when navigating to another page using href.
属性undefined
类型((baseEl: any, opts?: any) => Animation) | undefined
默认值undefined

routerDirection

说明When using a router, it specifies the transition direction when navigating to another page using href.
属性router-direction
类型"back" | "forward" | "root"
默认值'forward'

target

说明Specifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top".
属性target
类型string | undefined
默认值undefined

type

说明The type of the button. Only used when an onclick or button property is present.
属性type
类型"button" | "reset" | "submit"
默认值'button'

事件

该组件没有可用的事件。

方法

该组件没有可用的公共方法。

CSS 阴影部分

Name说明
nativeThe native HTML button, anchor, or div element that wraps all child elements.

CSS 自定义属性

Name说明
--backgroundBackground of the card
--colorColor of the card

插槽

该组件没有可用的插槽。