gpt4 book ai didi

javascript - 如何在 ionic 中制作下拉框或选择框

转载 作者:数据小太阳 更新时间:2023-10-29 05:01:05 24 4
gpt4 key购买 nike

你能告诉我如何制作如图所示的下拉菜单吗?我正在使用 ionic 框架来自 here我正在使用下拉菜单

这是我的 code

我想像给定的图像那样制作 http://ionicframework.com/docs/components/#select

我只想制作如图所示的下拉菜单(左侧的默认文本)。我想减少文档中下拉菜单的宽度(因为它占据了整个宽度)。其次我不想显示任何文本来自下拉

这是我的代码

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>

<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<div> View</div>
<div class="list">

<label class="item item-input item-select">
<div class="input-label">
Lightsaber
</div>
<select>
<option selected>Default</option>
<option >Green</option>
<option>Red</option>
</select>
</label>

</div>
</ion-content>
</ion-pane>
</body>

</html>

最佳答案

您可以通过将标签设为空白并使用 CSS 覆盖 select 样式来实现此目的。

试试像 this 这样的东西.

HTML:

<label class="item item-input item-select">
<div class="input-label">
&nbsp;
</div>
<select>
<option selected>Default</option>
<option >Green</option>
<option>Red</option>
</select>
</label>


CSS:

.item-select {
width: 75%; /* Or whatever you'd like the width to be */
}

.item-select select {
left: 0;
}

关于javascript - 如何在 ionic 中制作下拉框或选择框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31369652/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com