web-dev-qa-db-fra.com

contenu ionique: rembourrage ou pas de rembourrage?

J'essaie de recréer quelque chose de similaire à this .J'ai remarqué que les champs de saisie ne peuvent pas être à l'intérieur de <ion-content class="padding"> car ils obtiennent un vilain remplissage. Le bouton, en revanche, a besoin de ce rembourrage, car sinon il colle sur le côté sans aucun rembourrage.

Le code suivant n'a pas fonctionné, car cela place le bouton au-dessus des champs de saisie:

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

METTRE À JOUR:

Cette disposition est ce que je veux (remarquez qu'il n'y a pas de remplissage dans les champs de saisie, mais il y a du remplissage sur le bouton):  enter image description here

C’est ce que j’obtiens lorsque j’utilise <ion-content class="padding"> (remarquez le remplissage dans les champs de saisie):  enter image description here

Cette disposition est ce que je reçois lorsque j'utilise <ion-content> (remarquez qu'il n'y a pas de bourrage sur le bouton):  enter image description here

htmlcssionic-framework
6
binoculars

Vous devriez l'utiliser comme ça:

<ion-content padding="true">

Vous pouvez voir l'exemple de exemple officiel d'Ionic

5
Nikola

Selon la documentation, vous devez utiliser un bouton de blocage de largeur totale:

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

Et aussi votre directive de contenu ne doit pas avoir l’attribut padding.

J'espère que ça aide.

0
AndreiMosso

J'ai créé un exemple de travail ici: http://play.ionic.io/app/1662da9d9b7d
Pour obtenir l'effet souhaité, placez tous vos champs de formulaire texte dans un élément sans remplissage horizontal, de manière à ce que les formulaires atteignent le bord de l'écran, puis placez le bouton dans un div imbriqué avec remplissage, comme suit: 

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

Voir la sortie ci-dessous.
 Example output

J'ai uniquement appliqué un remplissage horizontal, car j'estimais que le remplissage vertical, ajouté par défaut par la classe padding [0], entraînait un excès de blanc. 

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

0
Garrett Grimsley

Vous pouvez essayer de supprimer le remplissage de ion-padding et ajouter padding-top="" dans une classe div.

<ion-view view-title="Settings">
    <div ng-controller="ClickedCtrl">
        <ion-content>
            <div class="list" padding-top="">
                <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>

J'espère que cela t'aides.

0
Dismi Paul