nội dung ion: đệm hoặc không có đệm?

Question

Tôi đang cố gắng tạo lại một cái gì đó tương tự như this. Tôi nhận thấy rằng các trường nhập không thể ở bên trong <ion-content class="padding"> vì sau đó chúng sẽ có một vùng đệm xấu xí. Các nút mặt khác, cần đệm này, bởi vì nếu không nó dính vào bên mà không có bất kỳ padding.

Các mã sau đây đã không làm việc, vì đó đặt nút trên đầu trang của các lĩnh vực đầu vào:

<ion-view view-title="Settings"> 
    <div ng-controller="ClickedCtrl"> 
     <ion-content> 
      <div class="list"> 
       <label class="item item-input item-floating-label"> 
        <span class="input-label">First Name</span> 
        <input type="text" placeholder="First Name" ng-mode="fname"> 
       </label> 
      </div> 
     </ion-content> 
     <ion-content class="padding"> 
      <button class="button button-positive" ng-click="clicked()"> 
       Save 
      </button> 
     </ion-content> 
    </div> 
</ion-view> 

UPDATE:

bố trí này là những gì tôi muốn (thông báo không có đệm trên lĩnh vực đầu vào, nhưng có đệm vào nút):

bố trí Đây là những gì tôi nhận được khi tôi sử dụng <ion-content class="padding"> (chú ý đệm trên các lĩnh vực đầu vào):

bố trí Đây là những gì tôi nhận được khi tôi sử dụng <ion-content> (thông báo không có đệm vào nút):

Answer 1

Bạn nên sử dụng nó như thế này:

<ion-content padding="true"> 

Bạn có thể xem ví dụ các từ số official Ionic example

Answer 2

Tôi đã tạo ví dụ làm việc tại đây: http://play.ionic.io/app/1662da9d9b7d
Để đạt được hiệu lực thi hành nơi SIRED tất cả các trường biểu mẫu văn bản của bạn trong một yếu tố không có đệm ngang, do đó các hình thức đạt được lợi thế cạnh của màn hình, sau đó đặt các nút trong một div lồng nhau với đệm, như vậy:

<ion-content> 
<div class="list"> 
    <label class="item item-input item-floating-label"> 
    <span class="input-label">Email Address</span> 
    <input type="email" placeholder="Email Address"> 
    </label> 
    <div class="padding-horizontal"> 
    <button class="button button-positive button-block" ng-click="clicked()"> 
     Create Account 
    </button> 
    </div> 
</div> 
</ion-content> 

Xem đầu ra bên dưới.

tôi chỉ áp dụng đệm ngang bởi vì tôi cảm thấy rằng đệm thẳng đứng, được bổ sung theo mặc định bởi lớp padding [0], dẫn đến quá nhiều màu trắng-không gian.

[0] http://ionicframework.com/docs/components/#padding

Answer 3

Theo tài liệu, bạn cần phải sử dụng một nút Full Width Block:

<button class="button button-full button-positive"> 
    Full Width Block Button 
</button> 

Và cũng chỉ thị nội dung của bạn phải không có thuộc tính padding.

Hy vọng điều đó sẽ hữu ích.