iyonik

6

yılında açılan veya seçme kutusu yapmak nasıl nasıl açılaniyonik

burada

kullanıyorum here dan .Ben iyonik çerçeve kullanıyorum görüntüde gösterisi olarak açılan yapmak söyler misiniz benim code

olduğunu

Resimde gösterildiği gibi yapmak istiyorum http://ionicframework.com/docs/components/#select

Sadece resimde gösterildiği gibi (sadece soldaki varsayılan metin) aşağı açılır. Belgedeki açılan genişliğini azaltmak istiyorum. genişlik) .Sıken dr herhangi bir metin görüntülemek istemiyorum op aşağı

burada benim kod

Sen etiketi boş verme ve CSS ile select stilleri geçersiz kılarak bu yapabileceğini
<!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> 

cevap

9

olduğunu.

this gibi bir şey deneyin.

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; 
} 
+0

bunu bastırmak için nasıl anlarım tıklandığında UI kızdırdı bir "yukarı tuşu pansiyon" sınıfı, yok mu? – Martian2049

+1

Bu gerçekten iyi çalışıyor, isterseniz "margin-left: auto" ve "margin-right: auto" komutlarını kullanarak formunuzdaki açılır menüyü ortalamak bile kolay: item-select { width: 75% ;/* Ya da genişliğin ne olmasını istersin */ // Açılır pencerenin ortası: margin-left: auto; margin-right: auto; } – leo

+0

İyonik düşürmeyi yerel açılan menü olarak göstermenin bir yolu var mı? İlk resimde gösterildiği gibi: http://baymard.com/blog/mobile-dropdown-navigation – TechTurtle

4
<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> 
+0

Bu en iyi cevaptır çünkü varsayılan olarak iyonik claslar kullanır, sadece kopyalayıp yapıştırın Lol –

1
Bu benim için çalıştı

:

Şablon:

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