跳至主要内容
版本:v8

ion-card

阴影

卡片是用于显示内容(例如文本、图像、按钮和列表)的容器。卡片可以是一个单一组件,但通常由标题、标题、副标题和内容组成。卡片被分成几个组件来适应这种结构:卡片标题卡片标题卡片副标题卡片内容.

基本用法

媒体卡片

卡片按钮

列表卡片

主题

颜色

CSS 自定义属性

属性

按钮

描述如果为 true,将呈现一个按钮标签,卡片将可点击。
属性按钮
类型布尔值
默认值false

颜色

描述要从应用程序调色板中使用的颜色。默认选项为:"primary""secondary""tertiary""success""warning""danger""light""medium""dark"。有关颜色的更多信息,请参阅主题.
属性颜色
类型"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | 字符串 | undefined
默认值undefined

禁用

描述如果为 true,用户将无法与卡片进行交互。
属性禁用
类型布尔值
默认值false

下载

描述此属性指示浏览器下载 URL 而不是导航到该 URL,因此系统会提示用户将其保存为本地文件。如果属性具有值,则该值将用作保存提示中的预填充文件名(用户仍然可以根据需要更改文件名)。
属性下载
类型字符串 | undefined
默认值undefined

href

描述包含超链接指向的 URL 或 URL 片段。如果设置了此属性,将呈现一个锚点标签。
属性href
类型字符串 | undefined
默认值undefined

模式

描述模式决定要使用哪个平台样式。
属性模式
类型"ios" | "md"
默认值undefined

rel

描述指定目标对象与链接对象的关系。该值是链接类型的空间分隔列表。
属性rel
类型字符串 | undefined
默认值undefined

routerAnimation

描述使用路由器时,它指定使用 href 导航到另一个页面时的过渡动画。
属性undefined
类型((baseEl: any, opts?: any) => Animation) | undefined
默认值undefined

routerDirection

描述使用路由器时,它指定使用 href 导航到另一个页面时的过渡方向。
属性router-direction
类型"back" | "forward" | "root"
默认值'forward'

目标

描述指定在何处显示链接的 URL。仅在提供 href 时适用。特殊关键字:"_blank""_self""_parent""_top"
属性目标
类型字符串 | undefined
默认值undefined

类型

描述按钮的类型。仅在存在 onclickbutton 属性时使用。
属性类型
类型"button" | "reset" | "submit"
默认值'button'

事件

此组件没有可用事件。

方法

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

CSS 阴影部分

名称描述
原生包装所有子元素的原生 HTML 按钮、锚点或 div 元素。

CSS 自定义属性

名称描述
--background卡片的背景
--color卡片的颜色

插槽

此组件没有可用的插槽。