inserto di ingresso ionico con interruttore ionico invece del pulsante

Mi piacerebbe molto combinare uno item-input-inset con un ion-toggle anziché il pulsante - in modo che l'utente possa scegliere di disabilitare il campo di input.inserto di ingresso ionico con interruttore ionico invece del pulsante

Quello che voglio è qualcosa di simile:

che faccio desiderare di collegare l'ingresso di testo a un modello così ho sempre una variabile che è Not Applicable o qualche altra stringa che l'utente ha inserito (o vuoto).

Ma i miei primi problemi sono stati il layout che sembra rovinare. Questo è quanto ho ottenuto:

<div class="item item-input-inset"> 
     <label class="item-input-wrapper"> 
      <input type="text" placeholder="Text input"> 
     </label> 
     <ion-toggle> 
     </ion-toggle> 
     </div> 
    </div>

ha pronunciato la seguente incasinato il layout

fonte

2016-07-10 Norfeldt

Plunker? o codice css per item-input-wrapper? –

Ci sono già alcune risposte, dai un'occhiata a @Norfeldt – trungk18

@Norfeldt: Si prega di verificare lo snippet qui sotto e fammi sapere cosa ne pensi. Spero che funzioni come le tue aspettative.

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

 
.controller('MainCtrl', function($scope) { 
 
    //INIT checked false 
 
    $scope.toggleInput = { 
 
    checked: false 
 
    }; 
 
    $scope.toggleInputChange = function() { 
 
    //TO DO 
 
    }; 
 
});

body { 
 
    cursor: url('http://ionicframework.com/img/finger.png'), auto; 
 
} 
 
.item-toggle .toggle { 
 
    top: 18px !important; 
 
} 
 
.item-toggle input[type='text'] { 
 
    pointer-events: all; 
 
    padding-left: 10px; 
 
    width: 100%; 
 
    color: #000; 
 
    font-weight: 500; 
 
} 
 
.item-toggle input[type="text"]:disabled { 
 
    font-weight: 100; 
 
    background: #fff; 
 
}

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
 
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
 

 
<body ng-app="ionicApp"> 
 
    <div ng-controller="MainCtrl"> 
 
    <ion-content> 
 
     <ion-toggle ng-model="toggleInput.checked" ng-change="toggleInputChange()"> 
 
     <input ng-disabled="!toggleInput.checked" type="text" ng-model="userInput.value" placeholder="{{toggleInput.checked ? 'This is the user input...' : 'Not Applicable' }}"> 
 
     </ion-toggle> 
 
    </ion-content> 
 
    </div> 
 
</body>

fonte

2016-07-13 11:04:20 trungk18

Questa è davvero una buona risposta .. Grazie. Sembra buono su StackOverflow. Basta provarlo con ionico – Norfeldt

Come va questa applicazione mobile? Sono appena tornato dalle vacanze: D – trungk18

ho dovuto modificare un po 'il codice per ottenere ciò che volevo, ma mi hai aiutato a archiviare l'obiettivo. Grazie per il tuo aiuto e il tuo tempo. – Norfeldt

vi consiglio di applicare il seguente CSS:

.item-toggle { 
    padding: 0; 
    border-width: 0; 
} 

.item-toggle .toggle { 
    position: inherit; 
    top: inherit; 
    right: inherit; 
}

Vedi http://play.ionic.io/app/8a0cf8a27f4e.

fonte

2016-07-12 17:47:30

Spero che ti possa aiutare.

richiesto CSS

.item-toggle input[type='text'] { 
    pointer-events: all; 
}

Codice Template:

<ion-content> 
    <ion-toggle ng-model="pushNotification.checked" 
       ng-change="pushNotificationChange()"> 
    <input ng-disabled="!pushNotification.checked" type="text" ng-model="userInput.value" placeholder="{{placeholder}}"> 
    </ion-toggle> 

</ion-content>

Codice controller

var temp = ''; 
$scope.placeholder = 'Not Applicable'; 
$scope.pushNotificationChange = function() { 

    if($scope.pushNotification.checked) { 
     $scope.userInput.value = temp; 
    } 
    else { 
    temp = $scope.userInput.value; 
    $scope.userInput.value = ''; 
    } 
}; 

$scope.pushNotification = { checked: false }; 
$scope.userInput = {value:''};

Selezionare questa pl unker http://codepen.io/anon/pen/XKzaBo

fonte

2016-07-12 18:52:06 Samir

inserto di ingresso ionico con interruttore ionico invece del pulsante

risposta

Problemi correlati