搜索文档 /
影子

ion-card

卡片是UI的标准部分,作为更详细信息的入口点。一张卡片可以是一个组件,但通常是由一些标题、标题、副标题和内容组成。 ion-card 被分解成几个子组件来反映这一点。请参阅 ion-card-content ion-card-header ion-card-title ion-card-subtitle

使用


                  <
                 ion-card
                 >
               
                  <
                 ion-card-header
                 >
               
                  <
                 ion-card-subtitle
                 >
               卡副标题
                  
                 ion-card-subtitle
                 >
               
                  <
                 ion-card-title
                 >
               卡标题
                  
                 ion-card-title
                 >
               
                  
                 ion-card-header
                 >
               
                  <
                 ion-card-content
                 >
               贴近大自然的心…偶尔去爬山或者在树林里呆上一个星期。洗净你的灵魂。
                  
                 ion-card-content
                 >
               
                  
                 ion-card
                 >
               
                  <
                 ion-card
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               卡片上的离子物品,左边的图标,右边的按钮
                  
                 ion-label
                 >
               
                  <
                 ion-button
                
                 填满
                  
                  
                 大纲
                  
                
                 
                  
                  
                 结束
                  
                 >
               视图
                  
                 ion-button
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-card-content
                 >
               这是离子卡内容元素中的内容,没有任何段落或标题标记。
                  
                 ion-card-content
                 >
               
                  
                 ion-card
                 >
               
                  <
                 ion-card
                 >
               
                  <
                 ion-item
                
                 href
                  
                  
                 
                  
                
                 
                  
                  
                 ion-activated
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 无线网络
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               Card Link项目1激活
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                
                 href
                  
                  
                 
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               卡片链接项2
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                
                 
                  
                  
                 ion-activated
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 警告
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               卡片按钮项目1激活
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               卡片按钮2
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  
                 ion-card
                 >
复制 复制

                  <
                 ion-card
                 >
               
                  <
                 ion-card-header
                 >
               
                  <
                 ion-card-subtitle
                 >
               卡副标题
                  
                 ion-card-subtitle
                 >
               
                  <
                 ion-card-title
                 >
               卡标题
                  
                 ion-card-title
                 >
               
                  
                 ion-card-header
                 >
               
                  <
                 ion-card-content
                 >
               贴近大自然的心…偶尔去爬山或者在树林里呆上一个星期。洗净你的灵魂。
                  
                 ion-card-content
                 >
               
                  
                 ion-card
                 >
               
                  <
                 ion-card
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               卡片上的离子物品,左边的图标,右边的按钮
                  
                 ion-label
                 >
               
                  <
                 ion-button
                
                 填满
                  
                  
                 大纲
                  
                
                 
                  
                  
                 结束
                  
                 >
               视图
                  
                 ion-button
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-card-content
                 >
               这是离子卡内容元素中的内容,没有任何段落或标题标记。
                  
                 ion-card-content
                 >
               
                  
                 ion-card
                 >
               
                  <
                 ion-card
                 >
               
                  <
                 ion-item
                
                 href
                  
                  
                 
                  
                
                 
                  
                  
                 ion-activated
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 无线网络
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               Card Link项目1激活
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                
                 href
                  
                  
                 
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               卡片链接项2
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                
                 
                  
                  
                 ion-activated
                  
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 警告
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               卡片按钮项目1激活
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-icon
                
                 的名字
                  
                  
                 
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               卡片按钮2
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  
                 ion-card
                 >
复制 复制

                进口
               反应
                
               
                “反应”
                
               
                进口
               
                
               IonContent
                
               IonHeader
                
               IonPage
                
               IonTitle
                
               IonToolbar
                
               IonCard
                
               IonCardHeader
                
               IonCardSubtitle
                
               IonCardTitle
                
               IonCardContent
                
               IonItem
                
               betway东盟体育appIonIcon
                
               IonLabel
                
               IonButton
                
               
                
               
                “@betway东盟体育appionic /反应”
                
               
                进口
               
                
               
                
               无线网络
                
               
                
               警告
                
               
                
               
                
               
                “betway东盟体育appionicons /图标”
                
               
                出口
               
                常量
               CardExamples
                
               反应
                
                足球俱乐部
               
                
               
                
                
               
                =>
               
                
               
                返回
               
                
               
                  <
                  IonPage
                 >
                
                  <
                  IonHeader
                 >
                
                  <
                  IonToolbar
                 >
                
                  <
                  IonTitle
                 >
                CardExamples
                  
                  IonTitle
                 >
                
                  
                  IonToolbar
                 >
                
                  
                  IonHeader
                 >
                
                  <
                  IonContent
                 >
                
                  <
                  IonCard
                 >
                
                  <
                  IonCardHeader
                 >
                
                  <
                  IonCardSubtitle
                 >
                卡副标题
                  
                  IonCardSubtitle
                 >
                
                  <
                  IonCardTitle
                 >
                卡标题
                  
                  IonCardTitle
                 >
                
                  
                  IonCardHeader
                 >
                
                  <
                  IonCardContent
                 >
                贴近大自然的心…偶尔去爬山或者在树林里呆上一个星期。洗净你的灵魂。
                  
                  IonCardContent
                 >
                
                  
                  IonCard
                 >
                
                  <
                  IonCard
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 图标
                  
                  
                 
                  
                
                 
                  
                  
                 开始
                  
                
                 />
                
                  <
                  IonLabel
                 >
                卡片上的离子物品,左边的图标,右边的按钮
                  
                  IonLabel
                 >
                
                  <
                  IonButton
                
                 填满
                  
                  
                 大纲
                  
                
                 
                  
                  
                 结束
                  
                 >
                视图
                  
                  IonButton
                 >
                
                  
                  IonItem
                 >
                
                  <
                  IonCardContent
                 >
                这是ion-cardContent元素中的内容,没有任何段落或标题标记。
                  
                  IonCardContent
                 >
                
                  
                  IonCard
                 >
                
                  <
                  IonCard
                 >
                
                  <
                  IonItem
                
                 href
                  
                  
                 
                  
                
                 类名称
                  
                  
                 ion-activated
                  
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 图标
                  
                  
                 无线网络
                  
                
                 
                  
                  
                 开始
                  
                
                 />
                
                  <
                  IonLabel
                 >
                Card Link项目1激活
                  
                  IonLabel
                 >
                
                  
                  IonItem
                 >
                
                  <
                  IonItem
                
                 href
                  
                  
                 
                  
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 图标
                  
                  
                 
                  
                
                 
                  
                  
                 开始
                  
                
                 />
                
                  <
                  IonLabel
                 >
                卡片链接项2
                  
                  IonLabel
                 >
                
                  
                  IonItem
                 >
                
                  <
                  IonItem
                
                 类名称
                  
                  
                 ion-activated
                  
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 图标
                  
                  
                 警告
                  
                
                 
                  
                  
                 开始
                  
                
                 />
                
                  <
                  IonLabel
                 >
                卡片按钮项目1激活
                  
                  IonLabel
                 >
                
                  
                  IonItem
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  betway东盟体育appIonIcon
                
                 图标
                  
                  
                 
                  
                
                 
                  
                  
                 开始
                  
                
                 />
                
                  <
                  IonLabel
                 >
                卡片按钮2
                  
                  IonLabel
                 >
                
                  
                  IonItem
                 >
                
                  
                  IonCard
                 >
                
                  
                  IonContent
                 >
                
                  
                  IonPage
                 >
               
                
                
               
                
                
               
复制 复制

                进口
               
                
               组件
                
               h
                
               
                
               
                “@stencil /核心”
                
               
                组件
                
                
               标签
                
               
                “card-example”
                
               styleUrl
                
               
                “card-example.css”
               
                
                
               
                出口
               
                
               
                CardExample
               
                
               
                渲染
                
                
               
                
               
                返回
               
                
               
                  <
                 ion-card
                 >
                
                  <
                 ion-card-header
                 >
                
                  <
                 ion-card-subtitle
                 >
                卡副标题
                  
                 ion-card-subtitle
                 >
                
                  <
                 ion-card-title
                 >
                卡标题
                  
                 ion-card-title
                 >
                
                  
                 ion-card-header
                 >
                
                  <
                 ion-card-content
                 >
                贴近大自然的心…偶尔去爬山或者在树林里呆上一个星期。洗净你的灵魂。
                  
                 ion-card-content
                 >
                
                  
                 ion-card
                 >
                
               
                  <
                 ion-card
                 >
                
                  <
                 ion-item
                 >
                
                  <
                 ion-icon
                
                 的名字
                  
                  
                 
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
                
                  <
                 ion-label
                 >
                卡片上的离子物品,左边的图标,右边的按钮
                  
                 ion-label
                 >
                
                  <
                 ion-button
                
                 填满
                  
                  
                 大纲
                  
                
                 
                  
                  
                 结束
                  
                 >
                视图
                  
                 ion-button
                 >
                
                  
                 ion-item
                 >
                
                  <
                 ion-card-content
                 >
                这是离子卡内容元素中的内容,没有任何段落或标题标记。
                  
                 ion-card-content
                 >
                
                  
                 ion-card
                 >
                
               
                  <
                 ion-card
                 >
                
                  <
                 ion-item
                
                 href
                  
                  
                 
                  
                
                 
                  
                  
                 ion-activated
                  
                 >
                
                  <
                 ion-icon
                
                 的名字
                  
                  
                 无线网络
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
                
                  <
                 ion-label
                 >
                Card Link项目1激活
                  
                 ion-label
                 >
                
                  
                 ion-item
                 >
                
                  <
                 ion-item
                
                 href
                  
                  
                 
                  
                 >
                
                  <
                 ion-icon
                
                 的名字
                  
                  
                 
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
                
                  <
                 ion-label
                 >
                卡片链接项2
                  
                 ion-label
                 >
                
                  
                 ion-item
                 >
                
                  <
                 ion-item
                
                 
                  
                  
                 ion-activated
                  
                 >
                
                  <
                 ion-icon
                
                 的名字
                  
                  
                 警告
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
                
                  <
                 ion-label
                 >
                卡片按钮项目1激活
                  
                 ion-label
                 >
                
                  
                 ion-item
                 >
                
                  <
                 ion-item
                 >
                
                  <
                 ion-icon
                
                 的名字
                  
                  
                 
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
                
                  <
                 ion-label
                 >
                卡片按钮2
                  
                 ion-label
                 >
                
                  
                 ion-item
                 >
                
                  
                 ion-card
                 >
               
                
                
               
                
               
                
复制 复制

                  <
                 模板
                 >
               
                  <
                 ion-card
                 >
               
                  <
                 ion-card-header
                 >
               
                  <
                 ion-card-subtitle
                 >
               卡副标题
                  
                 ion-card-subtitle
                 >
               
                  <
                 ion-card-title
                 >
               卡标题
                  
                 ion-card-title
                 >
               
                  
                 ion-card-header
                 >
               
                  <
                 ion-card-content
                 >
               贴近大自然的心…偶尔去爬山或者在树林里呆上一个星期。洗净你的灵魂。
                  
                 ion-card-content
                 >
               
                  
                 ion-card
                 >
               
                  <
                 ion-card
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-icon
                
                 :图标
                  
                  
                 
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               卡片上的离子物品,左边的图标,右边的按钮
                  
                 ion-label
                 >
               
                  <
                 ion-button
                
                 填满
                  
                  
                 大纲
                  
                
                 
                  
                  
                 结束
                  
                 >
               视图
                  
                 ion-button
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-card-content
                 >
               这是离子卡内容元素中的内容,没有任何段落或标题标记。
                  
                 ion-card-content
                 >
               
                  
                 ion-card
                 >
               
                  <
                 ion-card
                 >
               
                  <
                 ion-item
                
                 href
                  
                  
                 
                  
                
                 
                  
                  
                 ion-activated
                  
                 >
               
                  <
                 ion-icon
                
                 :图标
                  
                  
                 无线网络
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               Card Link项目1激活
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                
                 href
                  
                  
                 
                  
                 >
               
                  <
                 ion-icon
                
                 :图标
                  
                  
                 
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               卡片链接项2
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                
                 
                  
                  
                 ion-activated
                  
                 >
               
                  <
                 ion-icon
                
                 :图标
                  
                  
                 警告
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               卡片按钮项目1激活
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-icon
                
                 :图标
                  
                  
                 
                  
                
                 
                  
                  
                 开始
                  
                 >
                  
                 ion-icon
                 >
               
                  <
                 ion-label
                 >
               卡片按钮2
                  
                 ion-label
                 >
               
                  
                 ion-item
                 >
               
                  
                 ion-card
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                 >
                 
                  进口
                 
                  
                 IonCard
                  
                 IonCardContent
                  
                 IonCardHeader
                  
                 IonCardSubtitle
                  
                 IonCardTitle
                  
                 betway东盟体育appIonIcon
                  
                 IonItem
                  
                 IonLabel
                  
                 
                  
                 
                  “@betway东盟体育appionic / vue”
                  
                 
                  进口
                 
                  
                 
                  
                 
                  
                 警告
                  
                 无线网络
                  
                 
                  
                 
                  
                 
                  “betway东盟体育appionicons /图标”
                  
                 
                  进口
                 
                  
                 defineComponent
                  
                 
                  
                 
                  “vue”
                  
                 
                  出口
                 
                  默认的
                 
                  defineComponent
                  
                  
                 组件
                  
                 
                  
                 IonCard
                  
                 IonCardContent
                  
                 IonCardHeader
                  
                 IonCardSubtitle
                  
                 IonCardTitle
                  
                 betway东盟体育appIonIcon
                  
                 IonItem
                  
                 IonLabel
                  
                 
                  设置
                  
                  
                 
                  
                 
                  返回
                 
                  
                 警告
                  
                  
                 
                  
                 
                  
                  
                  
                 
                  
                 脚本
                 >
复制 复制

属性

按钮

描述

如果真正的,一个按钮标签将被渲染,卡片将被点击。

属性 按钮
类型 布尔
默认的

颜色

描述

应用程序调色板中要使用的颜色。默认的选项是:“主”“二级”“三级”“成功”“警告”“危险”“光”“媒介”,“黑暗”.有关颜色的更多信息,请参见<钢网-route-link url="/docs/theming/basics" class="hydrated" s-id="165"> 主题

属性 颜色
类型 字符串|未定义

禁用

描述

如果真正的,则用户无法与卡进行交互。

属性 禁用
类型 布尔
默认的

下载

描述

这个属性指示浏览器下载URL,而不是导航到它,这样用户就会被提示将其保存为本地文件。如果属性有值,则在Save提示符中将其用作预填充的文件名(用户仍然可以根据需要更改文件名)。

属性 下载
类型 字符串|未定义

href

描述

包含超链接指向的URL或URL片段。如果设置了此属性,将呈现锚标记。

属性 href
类型 字符串|未定义

模式

描述

模式决定使用哪种平台样式。

属性 模式
类型 “ios”|“医学博士”

rel

描述

指定目标对象与链接对象的关系。值是一个用空格分隔的列表链接类型

属性 rel
类型 字符串|未定义

routerAnimation

描述

当使用路由器时,它指定在使用时导航到另一个页面时的过渡动画href

类型 ((baseEl:任何,选择?:any) => Animation) | undefined

routerDirection

描述

当使用路由器时,它指定在使用时导航到另一个页面时的转换方向href

属性 router-direction
类型 "back" | "forward" | "root"
默认的 “前进”

目标

描述

指定显示链接URL的位置。仅适用于href提供。特殊的关键词:“平等”“_self”“_parent”“_top”

属性 目标
类型 字符串|未定义

类型

描述

按钮的类型。仅用于onclick按钮属性存在。

属性 类型
类型 "按钮" | "重置" | "提交"
默认的 “按钮”

CSS阴影部分

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

CSS自定义属性

的名字 描述
——背景 卡片的背景
——颜色 卡片颜色
查看源代码
Baidu