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
｝
设置
（
）
｛
返回
｛
警告
｝
；
｝
｝
）
；
脚本
>
复制
复制
属性
按钮 |
|
|---|---|
| 描述 |
如果 |
| 属性 |
按钮 |
| 类型 |
布尔 |
| 默认的 |
假 |
颜色 |
|
| 描述 |
应用程序调色板中要使用的颜色。默认的选项是: |
| 属性 |
颜色 |
| 类型 |
字符串|未定义 |
禁用 |
|
| 描述 |
如果 |
| 属性 |
禁用 |
| 类型 |
布尔 |
| 默认的 |
假 |
下载 |
|
| 描述 |
这个属性指示浏览器下载URL，而不是导航到它，这样用户就会被提示将其保存为本地文件。如果属性有值，则在Save提示符中将其用作预填充的文件名(用户仍然可以根据需要更改文件名)。 |
| 属性 |
下载 |
| 类型 |
字符串|未定义 |
href |
|
| 描述 |
包含超链接指向的URL或URL片段。如果设置了此属性，将呈现锚标记。 |
| 属性 |
href |
| 类型 |
字符串|未定义 |
模式 |
|
| 描述 |
模式决定使用哪种平台样式。 |
| 属性 |
模式 |
| 类型 |
“ios”|“医学博士” |
rel |
|
| 描述 |
指定目标对象与链接对象的关系。值是一个用空格分隔的列表链接类型． |
| 属性 |
rel |
| 类型 |
字符串|未定义 |
routerAnimation |
|
| 描述 |
当使用路由器时，它指定在使用时导航到另一个页面时的过渡动画 |
| 类型 |
((baseEl:任何,选择?：any) => Animation) | undefined |
routerDirection |
|
| 描述 |
当使用路由器时，它指定在使用时导航到另一个页面时的转换方向 |
| 属性 |
router-direction |
| 类型 |
"back" | "forward" | "root" |
| 默认的 |
“前进” |
目标 |
|
| 描述 |
指定显示链接URL的位置。仅适用于 |
| 属性 |
目标 |
| 类型 |
字符串|未定义 |
类型 |
|
| 描述 |
按钮的类型。仅用于 |
| 属性 |
类型 |
| 类型 |
"按钮" | "重置" | "提交" |
| 默认的 |
“按钮” |
CSS阴影部分
| 的名字 | 描述 |
|---|---|
本地的 |
包装所有子元素的原生HTML按钮、锚或div元素。 |
CSS自定义属性
| 的名字 | 描述 |
|---|---|
——背景 |
卡片的背景 |
——颜色 |
卡片颜色 |