如何在离子中制作下拉菜单或选择框
Posted
技术标签:
【中文标题】如何在离子中制作下拉菜单或选择框【英文标题】：how to make dropdown or select box in ionic 【发布时间】：2015-09-30 21:47:13 【问题描述】：你能告诉我如何制作如图所示的下拉菜单吗？我正在使用离子框架 来自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>
【问题讨论】：
【参考方案1】：您可以通过将标签设为空白并使用 CSS 覆盖 select 样式来做到这一点。
试试this。
HTML：
<label class="item item-input item-select">
<div class="input-label">
</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;
【讨论】：
有一个“键盘向上”类，当它被点击时会扰乱 UI，你知道如何抑制它吗？ 这很好用，如果你愿意的话，甚至可以很容易地在表单中将下拉菜单居中，通过使用 "margin-left: auto" 和 "margin-right: auto": item-select 宽度：75%； /* 或者任何你想要的宽度 */ // 将下拉菜单居中：margin-left: auto;边距右：自动； 有没有办法将离子下拉显示为原生下拉？就像第一张图片中显示的那样：baymard.com/blog/mobile-dropdown-navigation【参考方案2】：<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Lightsaber
</div>
<select>
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
</label>
</div>
【讨论】：
这是最好的答案，因为它默认使用离子类，只需复制并粘贴 Lol【参考方案3】：这对我有用：
模板：
<ion-item class="item-input item-select">
<div class="input-label">
Select Label
</div>
<select>
<option selected>Option 1</option>
<option>Option 2</option>
</select>
</ion-item>
CSS：
.item-select select, .item-select select option
left: 75%;
【讨论】：
【参考方案4】：.item-select
height: 40px;
.item-select select
max-width: 100%;
width: 100%;
<div class="list">
<label class="item item-input item-select">
<select>
<option selected>Default</option>
<option>Green</option>
<option>Red</option>
</select>
</label>
</div>
【讨论】：
以上是关于如何在离子中制作下拉菜单或选择框的主要内容，如果未能解决你的问题，请参考以下文章