离子芯片
芯片以小块的形式表示复杂的实体,比如一个触点。一个芯片可以包含几个不同的元素,如头像、文本和图标。
使用
<
离子芯片
>
<
ion-label
>
默认的
ion-label
>
离子芯片
>
<
离子芯片
>
<
ion-label
颜色
=
"
二次
"
>
二次标签
ion-label
>
离子芯片
>
<
离子芯片
颜色
=
"
二次
"
>
<
ion-label
颜色
=
"
黑暗
"
>
次级带深色标签
ion-label
>
离子芯片
>
<
离子芯片
(禁用)
=
"
真正的
"
>
<
ion-label
>
禁用的芯片
ion-label
>
离子芯片
>
<
离子芯片
>
<
ion-icon
的名字
=
"
销
"
>
ion-icon
>
<
ion-label
>
默认的
ion-label
>
离子芯片
>
<
离子芯片
>
<
ion-icon
的名字
=
"
心
"
颜色
=
"
黑暗
"
>
ion-icon
>
<
ion-label
>
默认的
ion-label
>
离子芯片
>
<
离子芯片
>
<
ion-label
>
按钮芯片
ion-label
>
<
ion-icon
的名字
=
"
与关系密切
"
>
ion-icon
>
离子芯片
>
<
离子芯片
>
<
ion-icon
的名字
=
"
销
"
颜色
=
"
主
"
>
ion-icon
>
<
ion-label
>
图标芯片
ion-label
>
<
ion-icon
的名字
=
"
关闭
"
>
ion-icon
>
离子芯片
>
<
离子芯片
>
<
ion-avatar
>
<
img
src
=
"
https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y
"
>
ion-avatar
>
<
ion-label
>
《阿凡达》芯片
ion-label
>
<
ion-icon
的名字
=
"
与关系密切
"
>
ion-icon
>
离子芯片
>
复制
复制
<
离子芯片
>
<
ion-label
>
默认的
ion-label
>
离子芯片
>
<
离子芯片
>
<
ion-label
颜色
=
"
二次
"
>
二次标签
ion-label
>
离子芯片
>
<
离子芯片
颜色
=
"
二次
"
>
<
ion-label
颜色
=
"
黑暗
"
>
次级带深色标签
ion-label
>
离子芯片
>
<
离子芯片
禁用
=
"
真正的
"
>
<
ion-label
>
禁用的芯片
ion-label
>
离子芯片
>
<
离子芯片
>
<
ion-icon
的名字
=
"
销
"
>
ion-icon
>
<
ion-label
>
默认的
ion-label
>
离子芯片
>
<
离子芯片
>
<
ion-icon
的名字
=
"
心
"
颜色
=
"
黑暗
"
>
ion-icon
>
<
ion-label
>
默认的
ion-label
>
离子芯片
>
<
离子芯片
>
<
ion-label
>
按钮芯片
ion-label
>
<
ion-icon
的名字
=
"
与关系密切
"
>
ion-icon
>
离子芯片
>
<
离子芯片
>
<
ion-icon
的名字
=
"
销
"
颜色
=
"
主
"
>
ion-icon
>
<
ion-label
>
图标芯片
ion-label
>
<
ion-icon
的名字
=
"
关闭
"
>
ion-icon
>
离子芯片
>
<
离子芯片
>
<
ion-avatar
>
<
img
src
=
"
https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y
"
>
ion-avatar
>
<
ion-label
>
《阿凡达》芯片
ion-label
>
<
ion-icon
的名字
=
"
与关系密切
"
>
ion-icon
>
离子芯片
>
复制
复制
进口
反应
从
“反应”
;
进口
{
IonContent
,
IonHeader
,
IonPage
,
IonTitle
,
IonToolbar
,
IonChip
,
IonLabel
,
betway东盟体育appIonIcon
,
IonAvatar
}
从
“@betway东盟体育appionic /反应”
;
进口
{
销
,
心
,
closeCircle
,
关闭
}
从
“betway东盟体育appionicons /图标”
;
出口
常量
ChipExamples
:
反应
.
足球俱乐部
=
(
)
=>
{
返回
(
<
IonPage
>
<
IonHeader
>
<
IonToolbar
>
<
IonTitle
>
ChipExamples
IonTitle
>
IonToolbar
>
IonHeader
>
<
IonContent
>
<
IonChip
>
<
IonLabel
>
默认的
IonLabel
>
IonChip
>
<
IonChip
>
<
IonLabel
颜色
=
"
二次
"
>
二次标签
IonLabel
>
IonChip
>
<
IonChip
颜色
=
"
二次
"
>
<
IonLabel
颜色
=
"
黑暗
"
>
次级带深色标签
IonLabel
>
IonChip
>
<
IonChip
禁用
=
{
真正的
}
>
<
IonLabel
>
禁用的芯片
IonLabel
>
IonChip
>
<
IonChip
>
<
betway东盟体育appIonIcon
图标
=
{
销
}
/>
<
IonLabel
>
默认的
IonLabel
>
IonChip
>
<
IonChip
>
<
betway东盟体育appIonIcon
图标
=
{
心
}
颜色
=
"
黑暗
"
/>
<
IonLabel
>
默认的
IonLabel
>
IonChip
>
<
IonChip
>
<
IonLabel
>
按钮芯片
IonLabel
>
<
betway东盟体育appIonIcon
图标
=
{
closeCircle
}
/>
IonChip
>
<
IonChip
>
<
betway东盟体育appIonIcon
图标
=
{
销
}
颜色
=
"
主
"
/>
<
IonLabel
>
图标芯片
IonLabel
>
<
betway东盟体育appIonIcon
图标
=
{
关闭
}
/>
IonChip
>
<
IonChip
>
<
IonAvatar
>
<
img
src
=
"
https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y
"
/>
IonAvatar
>
<
IonLabel
>
《阿凡达》芯片
IonLabel
>
<
betway东盟体育appIonIcon
图标
=
{
closeCircle
}
/>
IonChip
>
IonContent
>
IonPage
>
)
;
}
;
复制
复制
进口
{
组件
,
h
}
从
“@stencil /核心”
;
@
组件
(
{
标签
:
“chip-example”
,
styleUrl
:
“chip-example.css”
}
)
出口
类
ChipExample
{
渲染
(
)
{
返回
[
<
离子芯片
>
<
ion-label
>
默认的
ion-label
>
离子芯片
>
,
<
离子芯片
>
<
ion-label
颜色
=
"
二次
"
>
二次标签
ion-label
>
离子芯片
>
,
<
离子芯片
颜色
=
"
二次
"
>
<
ion-label
颜色
=
"
黑暗
"
>
次级带深色标签
ion-label
>
离子芯片
>
,
<
离子芯片
>
<
ion-icon
的名字
=
"
销
"
>
ion-icon
>
<
ion-label
>
默认的
ion-label
>
离子芯片
>
,
<
离子芯片
>
<
ion-icon
的名字
=
"
心
"
颜色
=
"
黑暗
"
>
ion-icon
>
<
ion-label
>
默认的
ion-label
>
离子芯片
>
,
<
离子芯片
>
<
ion-label
>
按钮芯片
ion-label
>
<
ion-icon
的名字
=
"
与关系密切
"
>
ion-icon
>
离子芯片
>
,
<
离子芯片
>
<
ion-icon
的名字
=
"
销
"
颜色
=
"
主
"
>
ion-icon
>
<
ion-label
>
图标芯片
ion-label
>
<
ion-icon
的名字
=
"
关闭
"
>
ion-icon
>
离子芯片
>
,
<
离子芯片
>
<
ion-avatar
>
<
img
src
=
"
https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y
"
/>
ion-avatar
>
<
ion-label
>
《阿凡达》芯片
ion-label
>
<
ion-icon
的名字
=
"
与关系密切
"
>
ion-icon
>
离子芯片
>
]
;
}
}
复制
复制
<
模板
>
<
离子芯片
>
<
ion-label
>
默认的
ion-label
>
离子芯片
>
<
离子芯片
>
<
ion-label
颜色
=
"
二次
"
>
二次标签
ion-label
>
离子芯片
>
<
离子芯片
颜色
=
"
二次
"
>
<
ion-label
颜色
=
"
黑暗
"
>
次级带深色标签
ion-label
>
离子芯片
>
<
离子芯片
:禁用
=
"
真正的
"
>
<
ion-label
>
禁用的芯片
ion-label
>
离子芯片
>
<
离子芯片
>
<
ion-icon
:图标
=
"
销
"
>
ion-icon
>
<
ion-label
>
默认的
ion-label
>
离子芯片
>
<
离子芯片
>
<
ion-icon
:图标
=
"
心
"
颜色
=
"
黑暗
"
>
ion-icon
>
<
ion-label
>
默认的
ion-label
>
离子芯片
>
<
离子芯片
>
<
ion-label
>
按钮芯片
ion-label
>
<
ion-icon
:图标
=
"
closeCircle
"
>
ion-icon
>
离子芯片
>
<
离子芯片
>
<
ion-icon
:图标
=
"
销
"
颜色
=
"
主
"
>
ion-icon
>
<
ion-label
>
图标芯片
ion-label
>
<
ion-icon
:图标
=
"
关闭
"
>
ion-icon
>
离子芯片
>
<
离子芯片
>
<
ion-avatar
>
<
img
src
=
"
https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y
"
>
ion-avatar
>
<
ion-label
>
《阿凡达》芯片
ion-label
>
<
ion-icon
:图标
=
"
closeCircle
"
>
ion-icon
>
离子芯片
>
模板
>
<
脚本
>
进口
{
IonAvatar
,
IonChip
,
betway东盟体育appIonIcon
,
IonLabel
}
从
“@betway东盟体育appionic / vue”
;
进口
{
关闭
,
closeCircle
,
心
,
销
}
从
“betway东盟体育appionicons /图标”
;
进口
{
defineComponent
}
从
“vue”
;
出口
默认的
defineComponent
(
{
组件
:
{
IonAvatar
,
IonChip
,
betway东盟体育appIonIcon
,
IonLabel
}
,
设置
(
)
{
返回
{
关闭
,
closeCircle
,
心
,
销
}
}
}
)
;
脚本
>
复制
复制
属性
颜色 |
|
---|---|
描述 |
应用程序调色板中要使用的颜色。默认的选项是: |
属性 |
颜色 |
类型 |
字符串|未定义 |
禁用 |
|
描述 |
如果 |
属性 |
禁用 |
类型 |
布尔 |
默认的 |
假 |
模式 |
|
描述 |
模式决定使用哪种平台样式。 |
属性 |
模式 |
类型 |
“ios”|“医学博士” |
大纲 |
|
描述 |
显示大纲样式按钮。 |
属性 |
大纲 |
类型 |
布尔 |
默认的 |
假 |
CSS自定义属性
的名字 | 描述 |
---|---|
——背景 |
芯片背景 |
——颜色 |
芯片的颜色 |