如何使离子

下拉菜单或选择框可以请你告诉我如何从here下拉秀如在图像。我现在用的离子框架我使用下拉如何使离子

这里是我的code

我想要像这样做，因为显示给定的图像http://ionicframework.com/docs/components/#select

我想只使下拉如图所示（左侧的默认文本）。我想减少文档中的下拉宽度（因为它正在采取整体宽度）。其次，我不想显示dr的任何文本运下来

这里是我的代码

<!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>

来源

2015-07-12 user944513

您可以通过使标签的空白，并与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; 
}

来源

2015-07-12 16:31:24 user1234

有一个“钥匙卡最多”类搅得用户点击该广告时，它的UI，你知道如何抑制呢？ – Martian2049

这个效果非常好，如果你愿意的话，通过使用“margin-left：auto”和“margin-right：auto”，你甚至可以很容易地将下拉框居中在你的表格中： item-select {width = 75％ ;/*或者任何你想要的宽度*/ //中心下拉菜单： margin-left：auto; margin-right：auto; } – leo

有没有任何方式显示离子下降作为本机下拉？就像第一张图片所示：http://baymard.com/blog/mobile-dropdown-navigation – TechTurtle

<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>

来源

2015-08-12 13:16:28

这是最好的答案，因为它默认使用离子键，只需复制并粘贴Lol –

这为我工作：

模板：

<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%; 
}

来源

2015-12-01 08:06:25

.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>

来源

2016-06-07 11:20:46 Aley

回答

相关问题