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自定义属性
的名字 | 描述 |
---|---|
——背景 |
卡片的背景 |
——颜色 |
卡片颜色 |