2016-04-11 11 views
-1

Bu örnekte, ion-pullup.js kullanılmıştır, ancak bu örnek iyi çalışır, ancak altbilgi tüm pencereyi kaplar. Çekme altbilgisinin pencere yüksekliğinin yarısı olmasını istiyorum. Bunu nasıl yapabilirim? Aşağıdaİyonik'teki yukarı kalkma yüksekliğini nasıl özelleştirebilirim?

Kontrol kodları:

HTML:

<html ng-app="ionicApp"> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Ionic Template</title> 

    <link href="http://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet"> 
    <script src="http://code.ionicframework.com/1.3.0/js/ionic.bundle.min.js"></script> 
    <script src="https://rawgit.com/arielfaur/ionic-pullup/master/dist/ion-pullup.js"></script> 
</head> 

<body ng-controller="MyCtrl"> 

    <ion-header-bar> 
    <h1 class="title">Ionic Pullup sample 3</h1> 
    </ion-header-bar> 

    <ion-view class="has-header" padding="true"> 
    <ion-content> 
     <div class="list card"> 
     <div class="item item-divider">Upcoming</div> 
     <div class="item item-body item-stable"> 
      <div> 
      You have <b>229</b> meetings on your calendar tomorrow. 
      </div> 
     </div> 
     </div> 
    </ion-content> 
    <ion-pull-up-footer class="bar-calm"> 
     <div class="title" ion-pull-up-trigger>Tap me or drag me</div> 
     <ion-pull-up-handle width="120" height="15" icon-expand="ion-chevron-up" icon-collapse="ion-chevron-down" style="border-radius: 5px 5px 0 0"> 
     </ion-pull-up-handle> 
     <ion-pull-up-content scroll="false"> 
     <div class="list card"> 
     <div class="item item-divider">Other Updates</div> 
     <div class="item item-body"> 
      <div> 
      There was a fire in <b>sector 13</b> 
      </div> 
     </div> 
     </div> </ion-pull-up-content> 
     </ion-pull-up-footer> 
    </ion-view> 
</body> 

</html> 

JS:

angular.module('ionicApp', ['ionic', 'ionic-pullup']) 

.controller('MyCtrl', function($scope) { 

}); 
+1

Lütfen gerçek metin kodunu sağlayın ve kod bağlantılarını belirtin. Çoğu kullanıcı, başka bir site üzerinden verilen tıklama koduna veya hatta düzeltme koduna zarar vermez. – Bloodied

+0

Lütfen kodunuzu eklemek için gönderinizi düzenleyin. Yararlı olabilecek dış bağlantılar/demolar, postadaki kodun yerini tutamaz. – ryanyuyu

+0

Şimdi kodları ekledim teşekkürler. –

cevap

1

Sen altbilgi tof maxmial yüksekliğini ayarlamak için max-height kullanabilirsiniz.

<ion-pull-up-footer max-height="200" class="bar-calm"> 

Bu değeri dinamik olarak değiştirmek isterseniz, size yardımcı olamam. Ama bunun mümkün olabileceğini düşünüyorum. Ancak gereksinimleriniz için bir sabit değer yeterlidir. Bu arada, bir runing plunker veya codepen örneğinin olması gerçekten yararlıdır!

+1

Yeterli! harika çalışıyor. Teşekkürler –

İlgili konular