ion-select
选择是表单控件,用于从一组选项中选择一个或多个选项,类似于本机选项
<选择>
元素。当用户点击SELECT时,将显示一个对话框,其中所有选项都是大的,易于选择的列表。
选择应与子项一起使用
< ion-select-option >
元素。如果没有给出子选项
价值
属性,则其文本将用作值。
如果
价值
设置在
<离子选择>
,将基于该值选择所选选项。
接口
默认情况下,选择用途
行动单
或
弹出窗口
分别到
界面
财产。读取到其他部分的其他部分,以获取不同接口的局限性。
单一的选择
默认情况下,“选择”仅允许用户选择一个选项。“警报”界面向用户显示一个单选按钮样式的选项列表。“操作表”界面只能与单个值选择一起使用。“选择”组件的值接收所选选项的值。
多重选择
通过添加
多
属性选择时,用户可以选择多个选项。当可以选择多个选项时,警报覆盖层为用户呈现一个复选框样式的选项列表。select组件的值接收由所有选定选项值组成的数组。
注意:
行动单
和
弹出窗口
接口不能用于多重选择。
对象值引用
使用用于选择值的对象时,如果来自服务器或数据库,则这些对象的标识可能会更改,而选定的值的标识保持不变。例如,当使用所需对象值的现有记录加载到选择时,可以发生这种情况,但是新检索的选择选项现在具有不同的标识。这将导致SELECT似乎没有值,即使仍然完好无损。
默认情况下,选择使用对象平等(
===.
)以确定是否选择了某个选项。可以通过向
与之比较
财产。
选择按钮
警报支持两个按钮:
取消
和
好吧
.可以使用每个按钮的文本使用
cancelText
和
okText
属性。
这
行动单
和
弹出窗口
接口没有
好吧
按钮,单击任何选项将自动关闭叠加层,然后选择该值。这
弹出窗口
接口没有
取消
按钮,单击背景将关闭覆盖。
接口选项
由于select使用警报、动作表和弹出窗口界面,选项可以通过
interfaceOptions.
财产。这可以用来传递自定义的标题、子标题、css类等等。
看看
注意:
interfaceOptions.
不会覆盖
输入
或
按钮
与
警报
接口。
定制
有两个单元组成Select组件,每个单元都需要单独设置样式。这个
ion-select
元素由所选值的视图表示,或者如果没有,并且下拉图标,则表示占位符。接口,它在中定义
ion-select
.该接口包含通过添加定义的所有选项
离子选择 - 选项
元素。以下各节将讨论这些元素的样式差异。
样式选择元素
如上所述,
ion-select
元素仅包含在视图上显示的值或占位符和图标。要使用CSS的组合和任何一个自定义此操作,样式
ion-select
{
/*应用于值和占位符颜色*/
颜色
:
#545ca7.
;
/*设置一个不同的占位符颜色*/
- 墙壁 - 颜色
:
# 971 e49
;
/ *在占位符上设置完全不透明度* /
- 持场持有者 - 不透明度
:
1
;
}
或者,取决于 浏览器支持 需要,CSS阴影部分可以用来样式选择:
/*设置宽度为整个容器,并将内容居中*/
ion-select
{
宽度
:
100%
;
证明 - 内容
:
中心
;
}
/*设置flex,以便大小的文本宽度为其内容*/
ion-select:一部分(占位符),ion-select:一部分(文本)
{
弯曲
:
0 0汽车
;
}
/*设置占位符颜色和不透明度*/
ion-select:一部分(占位符)
{
颜色
:
#20a08a
;
不透明度
:
1
;
}
/ * *设置占位符的第一个字母*阴影零件的伪元素工作!* https://developer.mozilla.org/en-us/docs/web/css/pseudo-e1sements * /
离子选择:: part(占位符)::第一字母
{
字体大小
:
24px
;
粗细
:
500.
;
}
/*设置文本颜色*/
ion-select::一部分(文本)
{
颜色
:
#545ca7.
;
}
/*设置图标颜色和不透明度*/
离子选择:: part(图标)
{
颜色
:
# 971 e49
;
不透明度
:
1
;
}
注意,通过使用
::部分
,元素上的任何CSS属性都可以定位。
样式选择界面
应通过遵循该接口文档中的自定义部分来完成接口对话框:
但是,“选择”选项确实设置了一个类以简化样式设置,并允许将类传递给“覆盖”选项,请参见
用法
单一的选择
<
ion-list
>
<
离子列表头
>
<
离子标签
>
单一的选择
离子标签
>
离子列表头
>
<
离子项目
>
<
离子标签
>
性别
离子标签
>
<
ion-select
占位符
=
“
选择一个
“
>
<
离子选择 - 选项
价值
=
“
F
“
>
女
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
M.
“
>
男性
离子选择 - 选项
>
ion-select
>
离子项目
>
<
离子项目
>
<
离子标签
>
头发的颜色
离子标签
>
<
ion-select
价值
=
“
棕色的
“
okText
=
“
好吧
“
cancelText
=
“
解雇
“
>
<
离子选择 - 选项
价值
=
“
棕色的
“
>
棕色(的)
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
金发女郎
“
>
金发女郎
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
黑色的
“
>
黑色的
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
红色的
“
>
红色的
离子选择 - 选项
>
ion-select
>
离子项目
>
ion-list
>
多重选择
<
ion-list
>
<
离子列表头
>
<
离子标签
>
多重选择
离子标签
>
离子列表头
>
<
离子项目
>
<
离子标签
>
配料
离子标签
>
<
ion-select
多
=
“
真正的
“
cancelText
=
“
n
“
okText
=
“
可以
“
>
<
离子选择 - 选项
价值
=
“
熏肉
“
>
培根
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
橄榄
“
>
黑橄榄
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
xcheese.
“
>
额外的奶酪
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
辣椒
“
>
青椒
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
蘑菇
“
>
蘑菇
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
洋葱
“
>
洋葱
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
意大利辣香肠
“
>
意大利辣香肠
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
菠萝
“
>
菠萝
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
香肠
“
>
香肠
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
菠菜
“
>
菠菜
离子选择 - 选项
>
ion-select
>
离子项目
>
<
离子项目
>
<
离子标签
>
宠物
离子标签
>
<
ion-select
多
=
“
真正的
“
(价值)
=
“
(“鸟”,“狗”)
“
>
<
离子选择 - 选项
价值
=
“
鸟
“
>
鸟
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
猫
“
>
猫
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
狗
“
>
狗
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
蜜獾
“
>
蜜獾
离子选择 - 选项
>
ion-select
>
离子项目
>
ion-list
>
对象作为值
<
ion-list
>
<
离子列表头
>
<
离子标签
>
对象作为值(与值进行比较)
离子标签
>
离子列表头
>
<
离子项目
>
<
离子标签
>
用户
离子标签
>
<
ion-select
[与之比较]
=
“
与之比较
“
>
<
离子选择 - 选项
*ngFor
=
“
让用户中的用户
“
(价值)
=
“
使用者
“
>
{{user.first +'''+ user.last}}
离子选择 - 选项
>
ion-select
>
离子项目
>
ion-list
>
进口
{
成分
}
从…起
'@ Angular / Core'
;
界面
使用者
{
ID
:
数字
;
第一
:
字符串
;
去年
:
字符串
;
}
@
成分
(
{
选择器
:
“select-example”
那
模板URL
:
'select-example.html'
那
styleUrls
:
[
”。/ select-example.css '
]
那
}
的)
出口
班级
SelectExample
{
用户
:
使用者
[
]
=
[
{
ID
:
1
那
第一
:
'爱丽丝'
那
去年
:
'史密斯'
那
}
那
{
ID
:
2
那
第一
:
“鲍勃”
那
去年
:
“戴维斯”
那
}
那
{
ID
:
3.
那
第一
:
“查理”
那
去年
:
“Rosenburg”
那
}
]
;
与之比较
(
o1群
:
使用者
那
o2
:
使用者
的)
{
返回
o1群
&&
o2
还
o1群
.
ID
===.
o2
.
ID
:
o1群
===.
o2
;
}
}
对象作为多重选择的值
<
ion-list
>
<
离子列表头
>
<
离子标签
>
对象作为值(与值进行比较)
离子标签
>
离子列表头
>
<
离子项目
>
<
离子标签
>
用户
离子标签
>
<
ion-select
[与之比较]
=
“
与之比较
“
多
=
“
真正的
“
>
<
离子选择 - 选项
*ngFor
=
“
让用户中的用户
“
(价值)
=
“
使用者
“
>
{{user.first +'''+ user.last}}
离子选择 - 选项
>
ion-select
>
离子项目
>
ion-list
>
进口
{
成分
}
从…起
'@ Angular / Core'
;
界面
使用者
{
ID
:
数字
;
第一
:
字符串
;
去年
:
字符串
;
}
@
成分
(
{
选择器
:
“select-example”
那
模板URL
:
'select-example.html'
那
styleUrls
:
[
”。/ select-example.css '
]
那
}
的)
出口
班级
SelectExample
{
用户
:
使用者
[
]
=
[
{
ID
:
1
那
第一
:
'爱丽丝'
那
去年
:
'史密斯'
那
}
那
{
ID
:
2
那
第一
:
“鲍勃”
那
去年
:
“戴维斯”
那
}
那
{
ID
:
3.
那
第一
:
“查理”
那
去年
:
“Rosenburg”
那
}
]
;
与之比较
(
o1群
:
使用者
那
o2
:
使用者
|
使用者
[
]
的)
{
如果
(
!
o1群
||
!
o2
的)
{
返回
o1群
===.
o2
;
}
如果
(
数组
.
isarray.
(
o2
的)
的)
{
返回
o2
.
一些
(
(
你
:
使用者
的)
=>
你
.
ID
===.
o1群
.
ID
的)
;
}
返回
o1群
.
ID
===.
o2
.
ID
;
}
}
接口选项
<
ion-list
>
<
离子列表头
>
<
离子标签
>
接口选项
离子标签
>
离子列表头
>
<
离子项目
>
<
离子标签
>
警报
离子标签
>
<
ion-select
[wittersoptions]
=
“
customAlertOptions
“
界面
=
“
警报
“
多
=
“
真正的
“
占位符
=
“
选择一个
“
>
<
离子选择 - 选项
价值
=
“
熏肉
“
>
培根
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
橄榄
“
>
黑橄榄
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
xcheese.
“
>
额外的奶酪
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
辣椒
“
>
青椒
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
蘑菇
“
>
蘑菇
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
洋葱
“
>
洋葱
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
意大利辣香肠
“
>
意大利辣香肠
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
菠萝
“
>
菠萝
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
香肠
“
>
香肠
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
菠菜
“
>
菠菜
离子选择 - 选项
>
ion-select
>
离子项目
>
<
离子项目
>
<
离子标签
>
弹出组
离子标签
>
<
ion-select
[wittersoptions]
=
“
习惯性选项
“
界面
=
“
弹出窗口
“
占位符
=
“
选择一个
“
>
<
离子选择 - 选项
价值
=
“
棕色的
“
>
棕色(的)
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
金发女郎
“
>
金发女郎
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
黑色的
“
>
黑色的
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
红色的
“
>
红色的
离子选择 - 选项
>
ion-select
>
离子项目
>
<
离子项目
>
<
离子标签
>
行动表
离子标签
>
<
ion-select
[wittersoptions]
=
“
定制休闲选项
“
界面
=
“
行动单
“
占位符
=
“
选择一个
“
>
<
离子选择 - 选项
价值
=
“
红色的
“
>
红色的
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
紫色的
“
>
紫色的
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
黄色
“
>
黄色
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
橙色
“
>
橙色
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
绿色
“
>
绿色
离子选择 - 选项
>
ion-select
>
离子项目
>
ion-list
>
进口
{
成分
}
从…起
'@ Angular / Core'
;
@
成分
(
{
选择器
:
“select-example”
那
模板URL
:
'select-example.html'
那
styleUrls
:
[
”。/ select-example.css '
]
那
}
的)
出口
班级
SelectExample
{
customAlertOptions
:
任何
=
{
头
:
“比萨饼浇头”
那
小标题
:
'选择你的浇头'
那
信息
:
每超过1.00美元的
那
半透明
:
真正的
}
;
习惯性选项
:
任何
=
{
头
:
的头发的颜色
那
小标题
:
“选择您的头发颜色”
那
信息
:
'只选择你的主导头发颜色'
}
;
定制休闲选项
:
任何
=
{
头
:
“颜色”
那
小标题
:
'选择你最喜欢的颜色'
}
;
}
单一的选择
<
ion-list
>
<
离子列表头
>
<
离子标签
>
单一的选择
离子标签
>
离子列表头
>
<
离子项目
>
<
离子标签
>
性别
离子标签
>
<
ion-select
占位符
=
“
选择一个
“
>
<
离子选择 - 选项
价值
=
“
F
“
>
女
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
M.
“
>
男性
离子选择 - 选项
>
ion-select
>
离子项目
>
<
离子项目
>
<
离子标签
>
头发的颜色
离子标签
>
<
ion-select
价值
=
“
棕色的
“
ok-text
=
“
好吧
“
cancel-text
=
“
解雇
“
>
<
离子选择 - 选项
价值
=
“
棕色的
“
>
棕色(的)
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
金发女郎
“
>
金发女郎
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
黑色的
“
>
黑色的
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
红色的
“
>
红色的
离子选择 - 选项
>
ion-select
>
离子项目
>
ion-list
>
多重选择
<
ion-list
>
<
离子列表头
>
<
离子标签
>
多重选择
离子标签
>
离子列表头
>
<
离子项目
>
<
离子标签
>
配料
离子标签
>
<
ion-select
多
=
“
真正的
“
cancel-text
=
“
n
“
ok-text
=
“
可以
“
>
<
离子选择 - 选项
价值
=
“
熏肉
“
>
培根
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
橄榄
“
>
黑橄榄
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
xcheese.
“
>
额外的奶酪
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
辣椒
“
>
青椒
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
蘑菇
“
>
蘑菇
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
洋葱
“
>
洋葱
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
意大利辣香肠
“
>
意大利辣香肠
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
菠萝
“
>
菠萝
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
香肠
“
>
香肠
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
菠菜
“
>
菠菜
离子选择 - 选项
>
ion-select
>
离子项目
>
<
离子项目
>
<
离子标签
>
宠物
离子标签
>
<
ion-select
ID
=
“
多
“
多
=
“
真正的
“
>
<
离子选择 - 选项
价值
=
“
鸟
“
>
鸟
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
猫
“
>
猫
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
狗
“
>
狗
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
蜜獾
“
>
蜜獾
离子选择 - 选项
>
ion-select
>
离子项目
>
ion-list
>
常量
选择
=
文档
.
querySelector
(
'多'
的)
;
选择
.
价值
=
[
“鸟”
那
'狗'
]
;
对象作为值
<
ion-list
>
<
离子列表头
>
<
离子标签
>
对象作为值(与值进行比较)
离子标签
>
离子列表头
>
<
离子项目
>
<
离子标签
>
用户
离子标签
>
<
ion-select
ID
=
“
objectSelectCompareWith
“
>
ion-select
>
离子项目
>
ion-list
>
让
对象选项
=
[
{
ID
:
1
那
第一
:
'爱丽丝'
那
去年
:
'史密斯'
那
}
那
{
ID
:
2
那
第一
:
“鲍勃”
那
去年
:
“戴维斯”
那
}
那
{
ID
:
3.
那
第一
:
“查理”
那
去年
:
“Rosenburg”
那
}
]
;
让
comparewithfn.
=
(
o1群
那
o2
的)
=>
{
返回
o1群
&&
o2
还
o1群
.
ID
===.
o2
.
ID
:
o1群
===.
o2
;
}
;
让
ObjectSelecteLeent.
=
文档
.
getElementById
(
'ObjectSelectCompareWith'
的)
;
ObjectSelecteLeent.
.
与之比较
=
comparewithfn.
;
对象选项
.
forEach
(
(
选项
那
一世
的)
=>
{
让
selectOption
=
文档
.
牧马赛
(
'ion-select-option'
的)
;
selectOption
.
价值
=
选项
;
selectOption
.
TextContent.
=
选项
.
第一
+
' '
+
选项
.
去年
;
ObjectSelecteLeent.
.
阑尾
(
selectOption
的)
}
的)
;
ObjectSelecteLeent.
.
价值
=
对象选项
[
0.
]
;
}
接口选项
<
ion-list
>
<
离子列表头
>
<
离子标签
>
接口选项
离子标签
>
离子列表头
>
<
离子项目
>
<
离子标签
>
警报
离子标签
>
<
ion-select
ID
=
“
自定义警报选择
“
界面
=
“
警报
“
多
=
“
真正的
“
占位符
=
“
选择一个
“
>
<
离子选择 - 选项
价值
=
“
熏肉
“
>
培根
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
橄榄
“
>
黑橄榄
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
xcheese.
“
>
额外的奶酪
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
辣椒
“
>
青椒
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
蘑菇
“
>
蘑菇
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
洋葱
“
>
洋葱
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
意大利辣香肠
“
>
意大利辣香肠
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
菠萝
“
>
菠萝
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
香肠
“
>
香肠
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
菠菜
“
>
菠菜
离子选择 - 选项
>
ion-select
>
离子项目
>
<
离子项目
>
<
离子标签
>
弹出组
离子标签
>
<
ion-select
ID
=
“
自定义弹出选择
“
界面
=
“
弹出窗口
“
占位符
=
“
选择一个
“
>
<
离子选择 - 选项
价值
=
“
棕色的
“
>
棕色(的)
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
金发女郎
“
>
金发女郎
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
黑色的
“
>
黑色的
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
红色的
“
>
红色的
离子选择 - 选项
>
ion-select
>
离子项目
>
<
离子项目
>
<
离子标签
>
行动表
离子标签
>
<
ion-select
ID
=
“
定制查阅
“
界面
=
“
行动单
“
占位符
=
“
选择一个
“
>
<
离子选择 - 选项
价值
=
“
红色的
“
>
红色的
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
紫色的
“
>
紫色的
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
黄色
“
>
黄色
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
橙色
“
>
橙色
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
绿色
“
>
绿色
离子选择 - 选项
>
ion-select
>
离子项目
>
ion-list
>
var
自定义警报选择
=
文档
.
getElementById
(
“customAlertSelect”
的)
;
var
customAlertOptions
=
{
头
:
“比萨饼浇头”
那
小标题
:
'选择你的浇头'
那
信息
:
每超过1.00美元的
那
半透明
:
真正的
}
;
自定义警报选择
.
interfaceOptions.
=
customAlertOptions
;
var
自定义弹出选择
=
文档
.
getElementById
(
“customPopoverSelect”
的)
;
var
习惯性选项
=
{
头
:
的头发的颜色
那
小标题
:
“选择您的头发颜色”
那
信息
:
'只选择你的主导头发颜色'
}
;
自定义弹出选择
.
interfaceOptions.
=
习惯性选项
;
var
定制查阅
=
文档
.
getElementById
(
'SUITOMATSIONSHEETSELECT'
的)
;
var
定制休闲选项
=
{
头
:
“颜色”
那
小标题
:
'选择你最喜欢的颜色'
}
;
定制查阅
.
interfaceOptions.
=
定制休闲选项
;
单一的选择
进口
反应
那
{
useestate.
}
从…起
“反应”
;
进口
{
IonContent
那
IonItem
那
Ionlabel.
那
IonList
那
IonListHeader
那
IonSelect
那
离子选择权
那
伊恩佩奇
那
离子项分配器
}
从…起
“@betway东盟体育appionic /反应”
;
出口
常量
单选
:
反应
.
FC.
=
(
的)
=>
{
常量
[
性别
那
塞
]
=
useestate.
<
字符串
>
();const [hairColor, setHairColor] = useState . / /发色
<
字符串
>
(‘棕色’);返回(
<
伊恩佩奇
>
<
IonContent
>
<
IonList
>
<
IonListHeader
>
<
Ionlabel.
>
单一的选择
Ionlabel.
>
IonListHeader
>
<
IonItem
>
<
Ionlabel.
>
性别
Ionlabel.
>
<
IonSelect
价值
=
{
性别
}
占位符
=
“
选择一个
“
onIonChange
=
{
E.
=>
塞
(
E.
.
细节
.
价值
的)
}
>
<
离子选择权
价值
=
“
女性
“
>
女
离子选择权
>
<
离子选择权
价值
=
“
男性
“
>
男性
离子选择权
>
IonSelect
>
IonItem
>
<
IonItem
>
<
Ionlabel.
>
头发的颜色
Ionlabel.
>
<
IonSelect
价值
=
{
发色
}
okText
=
“
好吧
“
cancelText
=
“
解雇
“
onIonChange
=
{
E.
=>
setHairColor
(
E.
.
细节
.
价值
的)
}
>
<
离子选择权
价值
=
“
棕色的
“
>
棕色(的)
离子选择权
>
<
离子选择权
价值
=
“
金发女郎
“
>
金发女郎
离子选择权
>
<
离子选择权
价值
=
“
黑色的
“
>
黑色的
离子选择权
>
<
离子选择权
价值
=
“
红色的
“
>
红色的
离子选择权
>
IonSelect
>
IonItem
>
<
离子项分配器
>
您的选择
离子项分配器
>
<
IonItem
>
性别:
{
性别
??
'(未选择)'
}
IonItem
>
<
IonItem
>
发色:
{
发色
}
IonItem
>
IonList
>
IonContent
>
伊恩佩奇
>
);};
多重选择
进口
反应
那
{
useestate.
}
从…起
“反应”
;
进口
{
IonContent
那
IonItem
那
Ionlabel.
那
IonList
那
IonListHeader
那
IonSelect
那
离子选择权
那
伊恩佩奇
那
离子项分配器
}
从…起
“@betway东盟体育appionic /反应”
;
出口
常量
MultipleSelection
:
反应
.
FC.
=
(
的)
=>
{
常量
[
配料
那
setToppings
]
=
useestate.
<
字符串
[
]
>
(
[
]
的)
;
常量
[
宠物
那
setpets.
]
=
useestate.
<
字符串
[
]
>
(
[
“鸟”
那
'狗'
]
的)
;
返回
(
<
伊恩佩奇
>
<
IonContent
>
<
IonList
>
<
IonListHeader
>
<
Ionlabel.
>
多重选择
Ionlabel.
>
IonListHeader
>
<
IonItem
>
<
Ionlabel.
>
配料
Ionlabel.
>
<
IonSelect
价值
=
{
配料
}
多
=
{
真正的
}
cancelText
=
“
n
“
okText
=
“
可以
“
onIonChange
=
{
E.
=>
setToppings
(
E.
.
细节
.
价值
的)
}
>
<
离子选择权
价值
=
“
熏肉
“
>
培根
离子选择权
>
<
离子选择权
价值
=
“
橄榄
“
>
黑橄榄
离子选择权
>
<
离子选择权
价值
=
“
xcheese.
“
>
额外的奶酪
离子选择权
>
<
离子选择权
价值
=
“
辣椒
“
>
青椒
离子选择权
>
<
离子选择权
价值
=
“
蘑菇
“
>
蘑菇
离子选择权
>
<
离子选择权
价值
=
“
洋葱
“
>
洋葱
离子选择权
>
<
离子选择权
价值
=
“
意大利辣香肠
“
>
意大利辣香肠
离子选择权
>
<
离子选择权
价值
=
“
菠萝
“
>
菠萝
离子选择权
>
<
离子选择权
价值
=
“
香肠
“
>
香肠
离子选择权
>
<
离子选择权
价值
=
“
菠菜
“
>
菠菜
离子选择权
>
IonSelect
>
IonItem
>
<
IonItem
>
<
Ionlabel.
>
宠物
Ionlabel.
>
<
IonSelect
多
=
{
真正的
}
价值
=
{
宠物
}
onIonChange
=
{
E.
=>
setpets.
(
E.
.
细节
.
价值
的)
}
>
<
离子选择权
价值
=
“
鸟
“
>
鸟
离子选择权
>
<
离子选择权
价值
=
“
猫
“
>
猫
离子选择权
>
<
离子选择权
价值
=
“
狗
“
>
狗
离子选择权
>
<
离子选择权
价值
=
“
蜜獾
“
>
蜜獾
离子选择权
>
IonSelect
>
IonItem
>
<
离子项分配器
>
您的选择
离子项分配器
>
<
IonItem
>
配料:
{
配料
.
长度
还
配料
.
降低
(
(
咕咕叫
那
上一页
的)
=>
上一页
+
', '
+
咕咕叫
那
''
的)
:
'(未选择)'
}
IonItem
>
<
IonItem
>
宠物:
{
宠物
.
长度
还
宠物
.
降低
(
(
咕咕叫
那
上一页
的)
=>
上一页
+
', '
+
咕咕叫
那
''
的)
:
'(未选择)'
}
IonItem
>
IonList
>
IonContent
>
伊恩佩奇
>
的)
;
}
;
对象作为值
进口
反应
那
{
useestate.
}
从…起
“反应”
;
进口
{
IonContent
那
IonItem
那
Ionlabel.
那
IonList
那
IonListHeader
那
IonSelect
那
离子选择权
那
伊恩佩奇
那
离子项分配器
}
从…起
“@betway东盟体育appionic /反应”
;
常量
用户
=
[
{
ID
:
1
那
第一
:
'爱丽丝'
那
去年
:
'史密斯'
}
那
{
ID
:
2
那
第一
:
“鲍勃”
那
去年
:
“戴维斯”
}
那
{
ID
:
3.
那
第一
:
“查理”
那
去年
:
“Rosenburg”
那
}
]
;
类型
使用者
=
typeof
用户
[
数字
]
;
常量
与之比较
=
(
o1群
:
使用者
那
o2
:
使用者
的)
=>
{
返回
o1群
&&
o2
还
o1群
.
ID
===.
o2
.
ID
:
o1群
===.
o2
;
}
;
出口
常量
ObjectSelection
:
反应
.
FC.
=
(
的)
=>
{
常量
[
selectedUsers
那
setSelectedUsers.
]
=
useestate.
<
使用者
[
]
>
(
[
]
的)
;
返回
(
<
伊恩佩奇
>
<
IonContent
>
<
IonList
>
<
IonListHeader
>
<
Ionlabel.
>
对象作为值(与值进行比较)
Ionlabel.
>
IonListHeader
>
<
IonItem
>
<
Ionlabel.
>
用户
Ionlabel.
>
<
IonSelect
与之比较
=
{
与之比较
}
价值
=
{
selectedUsers
}
多
onIonChange
=
{
E.
=>
setSelectedUsers.
(
E.
.
细节
.
价值
的)
}
>
{
用户
.
地图
(
使用者
=>
(
<
离子选择权
关键
=
{
使用者
.
ID
}
价值
=
{
使用者
}
>
{
使用者
.
第一
}
{
使用者
.
去年
}
离子选择权
>
的)
的)
}
IonSelect
>
IonItem
>
<
离子项分配器
>
选定的用户
离子项分配器
>
{
selectedUsers
.
长度
还
selectedUsers
.
地图
(
使用者
=>
<
IonItem
关键
=
{
使用者
.
ID
}
>
{
使用者
.
第一
}
{
使用者
.
去年
}
IonItem
>
的)
:
<
IonItem
>
(没有选择)
IonItem
>
}
IonList
>
IonContent
>
伊恩佩奇
>
的)
;
}
;
接口选项
进口
反应
那
{
useestate.
}
从…起
“反应”
;
进口
{
IonContent
那
IonItem
那
Ionlabel.
那
IonList
那
IonListHeader
那
IonSelect
那
离子选择权
那
伊恩佩奇
那
离子项分配器
}
从…起
“@betway东盟体育appionic /反应”
;
常量
customAlertOptions
=
{
头
:
“比萨饼浇头”
那
小标题
:
'选择你的浇头'
那
信息
:
每超过1.00美元的
那
半透明
:
真正的
}
;
常量
习惯性选项
=
{
头
:
的头发的颜色
那
小标题
:
“选择您的头发颜色”
那
信息
:
'只选择你的主导头发颜色'
}
;
常量
定制休闲选项
=
{
头
:
“颜色”
那
小标题
:
'选择你最喜欢的颜色'
}
;
出口
常量
InterfaceOptionsSelection
:
反应
.
FC.
=
(
的)
=>
{
常量
[
配料
那
setToppings
]
=
useestate.
<
字符串
[
]
>
(
[
]
的)
;
常量
[
发色
那
setHairColor
]
=
useestate.
<
字符串
>
(棕色的);const [color, setColor] = useState . / /设置属性
<
字符串
>
();返回 (
<
伊恩佩奇
>
<
IonContent
>
<
IonList
>
<
IonListHeader
>
<
Ionlabel.
>
接口选项
Ionlabel.
>
IonListHeader
>
<
IonItem
>
<
Ionlabel.
>
警报
Ionlabel.
>
<
IonSelect
interfaceOptions.
=
{
customAlertOptions
}
界面
=
“
警报
“
多
=
{
真正的
}
占位符
=
“
选择一个
“
onIonChange
=
{
E.
=>
setToppings
(
E.
.
细节
.
价值
的)
}
价值
=
{
配料
}
>
<
离子选择权
价值
=
“
熏肉
“
>
培根
离子选择权
>
<
离子选择权
价值
=
“
橄榄
“
>
黑橄榄
离子选择权
>
<
离子选择权
价值
=
“
xcheese.
“
>
额外的奶酪
离子选择权
>
<
离子选择权
价值
=
“
辣椒
“
>
青椒
离子选择权
>
<
离子选择权
价值
=
“
蘑菇
“
>
蘑菇
离子选择权
>
<
离子选择权
价值
=
“
洋葱
“
>
洋葱
离子选择权
>
<
离子选择权
价值
=
“
意大利辣香肠
“
>
意大利辣香肠
离子选择权
>
<
离子选择权
价值
=
“
菠萝
“
>
菠萝
离子选择权
>
<
离子选择权
价值
=
“
香肠
“
>
香肠
离子选择权
>
<
离子选择权
价值
=
“
菠菜
“
>
菠菜
离子选择权
>
IonSelect
>
IonItem
>
<
IonItem
>
<
Ionlabel.
>
弹出组
Ionlabel.
>
<
IonSelect
interfaceOptions.
=
{
习惯性选项
}
界面
=
“
弹出窗口
“
占位符
=
“
选择一个
“
onIonChange
=
{
E.
=>
setHairColor
(
E.
.
细节
.
价值
的)
}
价值
=
{
发色
}
>
<
离子选择权
价值
=
“
棕色的
“
>
棕色(的)
离子选择权
>
<
离子选择权
价值
=
“
金发女郎
“
>
金发女郎
离子选择权
>
<
离子选择权
价值
=
“
黑色的
“
>
黑色的
离子选择权
>
<
离子选择权
价值
=
“
红色的
“
>
红色的
离子选择权
>
IonSelect
>
IonItem
>
<
IonItem
>
<
Ionlabel.
>
行动表
Ionlabel.
>
<
IonSelect
interfaceOptions.
=
{
定制休闲选项
}
界面
=
“
行动单
“
占位符
=
“
选择一个
“
onIonChange
=
{
E.
=>
改变颜色
(
E.
.
细节
.
价值
的)
}
价值
=
{
颜色
}
>
<
离子选择权
价值
=
“
红色的
“
>
红色的
离子选择权
>
<
离子选择权
价值
=
“
紫色的
“
>
紫色的
离子选择权
>
<
离子选择权
价值
=
“
黄色
“
>
黄色
离子选择权
>
<
离子选择权
价值
=
“
橙色
“
>
橙色
离子选择权
>
<
离子选择权
价值
=
“
绿色
“
>
绿色
离子选择权
>
IonSelect
>
IonItem
>
<
离子项分配器
>
您的选择
离子项分配器
>
<
IonItem
>
配料:
{
配料
.
长度
还
配料
.
降低
(
(
咕咕叫
那
上一页
的)
=>
上一页
+
', '
+
咕咕叫
那
''
的)
:
'(未选择)'
}
IonItem
>
<
IonItem
>
发色:
{
发色
}
IonItem
>
<
IonItem
>
颜色:
{
颜色
??
'(未选择)'
}
IonItem
>
IonList
>
IonContent
>
伊恩佩奇
>
);};
单一的选择
进口
{
成分
那
H
}
从…起
“@stencil /核心”
;
@
成分
(
{
标签
:
“select-example”
那
styleUrl
:
'select-example.css'
}
的)
出口
班级
SelectExample
{
渲染
(
的)
{
返回
[
<
ion-list
>
<
离子列表头
>
<
离子标签
>
单一的选择
离子标签
>
离子列表头
>
<
离子项目
>
<
离子标签
>
性别
离子标签
>
<
ion-select
占位符
=
“
选择一个
“
>
<
离子选择 - 选项
价值
=
“
F
“
>
女
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
M.
“
>
男性
离子选择 - 选项
>
ion-select
>
离子项目
>
<
离子项目
>
<
离子标签
>
头发的颜色
离子标签
>
<
ion-select
价值
=
“
棕色的
“
okText
=
“
好吧
“
cancelText
=
“
解雇
“
>
<
离子选择 - 选项
价值
=
“
棕色的
“
>
棕色(的)
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
金发女郎
“
>
金发女郎
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
黑色的
“
>
黑色的
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
红色的
“
>
红色的
离子选择 - 选项
>
ion-select
>
离子项目
>
ion-list
>
]
;
}
}
多重选择
进口
{
成分
那
H
}
从…起
“@stencil /核心”
;
@
成分
(
{
标签
:
“select-example”
那
styleUrl
:
'select-example.css'
}
的)
出口
班级
SelectExample
{
渲染
(
的)
{
返回
[
<
ion-list
>
<
离子列表头
>
<
离子标签
>
多重选择
离子标签
>
离子列表头
>
<
离子项目
>
<
离子标签
>
配料
离子标签
>
<
ion-select
多
=
{
真正的
}
cancelText
=
“
n
“
okText
=
“
可以
“
>
<
离子选择 - 选项
价值
=
“
熏肉
“
>
培根
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
橄榄
“
>
黑橄榄
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
xcheese.
“
>
额外的奶酪
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
辣椒
“
>
青椒
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
蘑菇
“
>
蘑菇
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
洋葱
“
>
洋葱
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
意大利辣香肠
“
>
意大利辣香肠
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
菠萝
“
>
菠萝
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
香肠
“
>
香肠
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
菠菜
“
>
菠菜
离子选择 - 选项
>
ion-select
>
离子项目
>
<
离子项目
>
<
离子标签
>
宠物
离子标签
>
<
ion-select
多
=
{
真正的
}
价值
=
{
[
“鸟”
那
'狗'
]
}
>
<
离子选择 - 选项
价值
=
“
鸟
“
>
鸟
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
猫
“
>
猫
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
狗
“
>
狗
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
蜜獾
“
>
蜜獾
离子选择 - 选项
>
ion-select
>
离子项目
>
ion-list
>
]
;
}
}
对象作为值
进口
{
成分
那
H
}
从…起
“@stencil /核心”
;
@
成分
(
{
标签
:
“select-example”
那
styleUrl
:
'select-example.css'
}
的)
出口
班级
SelectExample
{
私人的
用户
:
任何
[
]
=
[
{
ID
:
1
那
第一
:
'爱丽丝'
那
去年
:
'史密斯'
那
}
那
{
ID
:
2
那
第一
:
“鲍勃”
那
去年
:
“戴维斯”
那
}
那
{
ID
:
3.
那
第一
:
“查理”
那
去年
:
“Rosenburg”
那
}
]
;
与之比较
=
(
o1群
那
o2
的)
=>
{
返回
o1群
&&
o2
还
o1群
.
ID
===.
o2
.
ID
:
o1群
===.
o2
;
}
;
渲染
(
的)
{
返回
[
<
ion-list
>
<
离子列表头
>
<
离子标签
>
对象作为值(与值进行比较)
离子标签
>
离子列表头
>
<
离子项目
>
<
离子标签
>
用户
离子标签
>
<
ion-select
与之比较
=
{
这
.
与之比较
}
>
{
这
.
用户
.
地图
(
使用者
=>
<
离子选择 - 选项
价值
=
{
使用者
}
>
{
使用者
.
第一
+
' '
+
使用者
.
去年
}
离子选择 - 选项
>
的)
}
ion-select
>
离子项目
>
ion-list
>
]
;
}
}
接口选项
进口
{
成分
那
H
}
从…起
“@stencil /核心”
;
@
成分
(
{
标签
:
“select-example”
那
styleUrl
:
'select-example.css'
}
的)
出口
班级
SelectExample
{
私人的
customAlertOptions
:
任何
=
{
头
:
“比萨饼浇头”
那
小标题
:
'选择你的浇头'
那
信息
:
每超过1.00美元的
那
半透明
:
真正的
}
;
私人的
习惯性选项
:
任何
=
{
头
:
的头发的颜色
那
小标题
:
“选择您的头发颜色”
那
信息
:
'只选择你的主导头发颜色'
}
;
私人的
定制休闲选项
:
任何
=
{
头
:
“颜色”
那
小标题
:
'选择你最喜欢的颜色'
}
;
渲染
(
的)
{
返回
[
<
ion-list
>
<
离子列表头
>
<
离子标签
>
接口选项
离子标签
>
离子列表头
>
<
离子项目
>
<
离子标签
>
警报
离子标签
>
<
ion-select
interfaceOptions.
=
{
这
.
customAlertOptions
}
界面
=
“
警报
“
多
=
{
真正的
}
占位符
=
“
选择一个
“
>
<
离子选择 - 选项
价值
=
“
熏肉
“
>
培根
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
橄榄
“
>
黑橄榄
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
xcheese.
“
>
额外的奶酪
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
辣椒
“
>
青椒
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
蘑菇
“
>
蘑菇
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
洋葱
“
>
洋葱
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
意大利辣香肠
“
>
意大利辣香肠
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
菠萝
“
>
菠萝
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
香肠
“
>
香肠
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
菠菜
“
>
菠菜
离子选择 - 选项
>
ion-select
>
离子项目
>
<
离子项目
>
<
离子标签
>
弹出组
离子标签
>
<
ion-select
interfaceOptions.
=
{
这
.
习惯性选项
}
界面
=
“
弹出窗口
“
占位符
=
“
选择一个
“
>
<
离子选择 - 选项
价值
=
“
棕色的
“
>
棕色(的)
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
金发女郎
“
>
金发女郎
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
黑色的
“
>
黑色的
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
红色的
“
>
红色的
离子选择 - 选项
>
ion-select
>
离子项目
>
<
离子项目
>
<
离子标签
>
行动表
离子标签
>
<
ion-select
interfaceOptions.
=
{
这
.
定制休闲选项
}
界面
=
“
行动单
“
占位符
=
“
选择一个
“
>
<
离子选择 - 选项
价值
=
“
红色的
“
>
红色的
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
紫色的
“
>
紫色的
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
黄色
“
>
黄色
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
橙色
“
>
橙色
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
绿色
“
>
绿色
离子选择 - 选项
>
ion-select
>
离子项目
>
ion-list
>
]
;
}
}
单一的选择
<
模板
>
<
ion-list
>
<
离子列表头
>
<
离子标签
>
单一的选择
离子标签
>
离子列表头
>
<
离子项目
>
<
离子标签
>
性别
离子标签
>
<
ion-select
占位符
=
“
选择一个
“
>
<
离子选择 - 选项
价值
=
“
F
“
>
女
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
M.
“
>
男性
离子选择 - 选项
>
ion-select
>
离子项目
>
<
离子项目
>
<
离子标签
>
头发的颜色
离子标签
>
<
ion-select
价值
=
“
棕色的
“
ok-text
=
“
好吧
“
cancel-text
=
“
解雇
“
>
<
离子选择 - 选项
价值
=
“
棕色的
“
>
棕色(的)
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
金发女郎
“
>
金发女郎
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
黑色的
“
>
黑色的
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
红色的
“
>
红色的
离子选择 - 选项
>
ion-select
>
离子项目
>
ion-list
>
模板
>
<
脚本
>
进口
{
IonItem
那
Ionlabel.
那
IonList
那
IonListHeader
那
IonSelect
那
离子选择权
}
从…起
“@betway东盟体育appionic / vue”
;
进口
{
绝缘组分
}
从…起
“vue”
;
出口
默认的
绝缘组分
(
{
组件
:
{
IonItem
那
Ionlabel.
那
IonList
那
IonListHeader
那
IonSelect
那
离子选择权
}
}
的)
;
脚本
>
多重选择
<
模板
>
<
ion-list
>
<
离子列表头
>
<
离子标签
>
多重选择
离子标签
>
离子列表头
>
<
离子项目
>
<
离子标签
>
配料
离子标签
>
<
ion-select
多
=
“
真正的
“
cancel-text
=
“
n
“
ok-text
=
“
可以
“
>
<
离子选择 - 选项
价值
=
“
熏肉
“
>
培根
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
橄榄
“
>
黑橄榄
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
xcheese.
“
>
额外的奶酪
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
辣椒
“
>
青椒
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
蘑菇
“
>
蘑菇
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
洋葱
“
>
洋葱
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
意大利辣香肠
“
>
意大利辣香肠
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
菠萝
“
>
菠萝
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
香肠
“
>
香肠
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
菠菜
“
>
菠菜
离子选择 - 选项
>
ion-select
>
离子项目
>
<
离子项目
>
<
离子标签
>
宠物
离子标签
>
<
离子选择 - 选项
价值
=
“
鸟
“
>
鸟
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
猫
“
>
猫
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
狗
“
>
狗
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
蜜獾
“
>
蜜獾
离子选择 - 选项
>
ion-select
>
离子项目
>
ion-list
>
模板
>
<
脚本
>
进口
{
IonItem
那
Ionlabel.
那
IonList
那
IonListHeader
那
IonSelect
那
离子选择权
}
从…起
“@betway东盟体育appionic / vue”
;
进口
{
绝缘组分
}
从…起
“vue”
;
出口
默认的
绝缘组分
(
{
组件
:
{
IonItem
那
Ionlabel.
那
IonList
那
IonListHeader
那
IonSelect
那
离子选择权
}
}
的)
;
脚本
>
接口选项
<
模板
>
<
ion-list
>
<
离子列表头
>
<
离子标签
>
接口选项
离子标签
>
离子列表头
>
<
离子项目
>
<
离子标签
>
警报
离子标签
>
<
ion-select
:界面选项
=
“
customAlertOptions
“
界面
=
“
警报
“
多
=
“
真正的
“
占位符
=
“
选择一个
“
>
<
离子选择 - 选项
价值
=
“
熏肉
“
>
培根
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
橄榄
“
>
黑橄榄
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
xcheese.
“
>
额外的奶酪
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
辣椒
“
>
青椒
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
蘑菇
“
>
蘑菇
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
洋葱
“
>
洋葱
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
意大利辣香肠
“
>
意大利辣香肠
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
菠萝
“
>
菠萝
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
香肠
“
>
香肠
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
菠菜
“
>
菠菜
离子选择 - 选项
>
ion-select
>
离子项目
>
<
离子项目
>
<
离子标签
>
弹出组
离子标签
>
<
ion-select
:界面选项
=
“
习惯性选项
“
界面
=
“
弹出窗口
“
占位符
=
“
选择一个
“
>
<
离子选择 - 选项
价值
=
“
棕色的
“
>
棕色(的)
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
金发女郎
“
>
金发女郎
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
黑色的
“
>
黑色的
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
红色的
“
>
红色的
离子选择 - 选项
>
ion-select
>
离子项目
>
<
离子项目
>
<
离子标签
>
行动表
离子标签
>
<
ion-select
:界面选项
=
“
定制休闲选项
“
界面
=
“
行动单
“
占位符
=
“
选择一个
“
>
<
离子选择 - 选项
价值
=
“
红色的
“
>
红色的
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
紫色的
“
>
紫色的
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
黄色
“
>
黄色
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
橙色
“
>
橙色
离子选择 - 选项
>
<
离子选择 - 选项
价值
=
“
绿色
“
>
绿色
离子选择 - 选项
>
ion-select
>
离子项目
>
ion-list
>
模板
>
<
脚本
>
进口
{
IonItem
那
Ionlabel.
那
IonList
那
IonListHeader
那
IonSelect
那
离子选择权
}
从…起
“@betway东盟体育appionic / vue”
;
进口
{
绝缘组分
}
从…起
“vue”
;
出口
默认的
绝缘组分
(
{
组件
:
{
IonItem
那
Ionlabel.
那
IonList
那
IonListHeader
那
IonSelect
那
离子选择权
}
那
设置
(
的)
{
常量
customAlertOptions
:
任何
=
{
头
:
“比萨饼浇头”
那
小标题
:
'选择你的浇头'
那
信息
:
每超过1.00美元的
那
半透明
:
真正的
}
;
常量
习惯性选项
:
任何
=
{
头
:
的头发的颜色
那
小标题
:
“选择您的头发颜色”
那
信息
:
'只选择你的主导头发颜色'
}
;
常量
定制休闲选项
:
任何
=
{
头
:
“颜色”
那
小标题
:
'选择你最喜欢的颜色'
}
;
返回
{
customAlertOptions
那
习惯性选项
那
定制休闲选项
}
}
}
的)
;
脚本
>
属性
cancelText |
|
---|---|
描述 |
在取消按钮上显示的文本。 |
属性 |
cancel-text |
类型 |
字符串 |
默认 |
“取消” |
与之比较 |
|
描述 |
用于比较对象值的属性名或函数 |
属性 |
与 |
类型 |
((currentValue: any, compareValue: any) => boolean) | null | string | undefined |
禁用 |
|
描述 |
如果 |
属性 |
禁用 |
类型 |
布尔值 |
默认 |
错误的 |
界面 |
|
描述 |
选区选定应使用: |
属性 |
界面 |
类型 |
动作表单|警报|弹出窗口 |
默认 |
“警惕” |
interfaceOptions. |
|
描述 |
任何其他选项 注意: |
属性 |
界面选项 |
类型 |
任何 |
默认 |
{} |
模式 |
|
描述 |
模式决定使用哪种平台样式。 |
属性 |
模式 |
类型 |
“ios”|“医学博士” |
多 |
|
描述 |
如果 |
属性 |
多 |
类型 |
布尔值 |
默认 |
错误的 |
的名字 |
|
描述 |
控件的名称,它提交了表单数据。 |
属性 |
的名字 |
类型 |
字符串 |
默认 |
this.inputId |
okText |
|
描述 |
在确定按钮上显示的文本。 |
属性 |
ok-text |
类型 |
字符串 |
默认 |
'好的' |
占位符 |
|
描述 |
当选择为空时显示的文本。 |
属性 |
占位符 |
类型 |
Null | string | undefined |
选择提取 |
|
描述 |
要显示的文本而不是所选选项的值。 |
属性 |
选定的文本 |
类型 |
Null | string | undefined |
价值 |
|
描述 |
选择的值。 |
属性 |
价值 |
类型 |
任何 |
事件
的名字 | 描述 |
---|---|
ionBlur |
当选择失去焦点时发出。 |
Ioncancel. |
取消选择时发出。 |
IonChange. |
值更改时发出。 |
ionFocus |
选择焦点时发出。 |
方法
开放 |
|
---|---|
描述 |
打开“选择覆盖”。覆盖是警报、操作表或弹出框,具体取决于 |
签名 |
打开(事件?:Uievent |未定义)=> promise |
CSS阴影部分
的名字 | 描述 |
---|---|
图标 |
选择图标容器。 |
占位符 |
没有值时在选择项中显示的文本。 |
文本 |
选择的显示值。 |
CSS自定义属性
的名字 | 描述 |
---|---|
--垫底 |
选择框的底部填充 |
——padding-end |
右填充如果方向是左右的,则留下填充如果方向是右到左侧的选择 |
——padding-start |
如果方向是左右方向,则左侧填充,如果方向是左右选择的右填充 |
——padding-top |
选择选择的填充 |
- 墙壁 - 颜色 |
选择占位符文本的颜色 |
- 持场持有者 - 不透明度 |
选择占位符文本的不透明度 |