ion-card
卡片是显示文本、图像、按钮和列表等内容的容器。 卡片可以是单个组件,但通常由头部、标题、副标题和内容组成。 卡片被拆分为多个组件以适应此结构: 卡片头部、卡片标题、卡片副标题 和卡片内容。
基本用法
媒体卡片
卡片按钮
列表卡片
主题定制
颜色
CSS 自定义属性
Properties
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' |
Events
该组件没有可用的事件。
Methods
该组件没有可用的公共方法。
CSS Shadow Parts
| Name | 说明 |
|---|---|
native | The native HTML button, anchor, or div element that wraps all child elements. |
CSS Custom Properties
- iOS
- MD
| Name | 说明 |
|---|---|
--background | Background of the card |
--color | Color of the card |
| Name | 说明 |
|---|---|
--background | Background of the card |
--color | Color of the card |
Slots
该组件没有可用的插槽。