ionic-framework => Ionic AngularJS-tillägg

Anmärkningar

Ionic erbjuder en mängd Javascript AngularJS-tillägg som du kan använda. Dessa tillägg kan vara allt från inmatningar från normal form till modala fönster och gör att din grundläggande app blir mycket snabbare med dessa färdiga tillägg.

Forminmatningar

Ioniska ingångar skiljer sig inte från vanliga HTML-ingångar men de utformas annorlunda och används som ett direktiv. Du kan också använda vanliga HTML-ingångar i Ionic-appar. Här är några grundläggande exempel som Ionic erbjuder redo att gå.

Kryssruta:

<ion-checkbox ng-model="checkbox">Label</ion-checkbox>

Radio knapp:

<ion-radio ng-model="radio" ng-value="'radiovalue'">Value</ion-radio>

Växla:

<ion-toggle ng-model="toggle" toggle-class="toggle-calm">Toggle</ion-toggle>

Modala fönster

Ionic har en egen förlängning för att visa ett modalt fönster. Modaler kan skapas genom att infoga mallen rakt till vyn med en <script> -tagg eller med en separat mallfil. I det här exemplet antar vi att du har en html-fil med namnet modal-template.html i en mapp som heter templates . Du ställer in mallvägen i den modala initialiseringsfunktionen med fromTemplateUrl .

Skapa det modala objektet i omfattningen

html

<ion-modal-view>
  <ion-header-bar>
    <h1>Modal title</h1>
  </ion-header-bar>
  <ion-content>
    <p>Modal content</p>
  </ion-content>
</ion-modal-view>

Kontrollant

$ionicModal.fromTemplateUrl('/templates/modal-template.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
});

Kontrollera modalen

Du kan sedan styra modalen med följande kommandon.

Öppen modal

$scope.modal.show();

Stäng modal

$scope.modal.hide();

Ta bort modal

$scope.modal.remove();

Modala händelser

Du kan lyssna på modalhändelser med följande funktioner.

Modal är dold

$scope.$on('modal.hidden', function() {
  // Do something when modal is hidden
});

Modal tas bort

$scope.$on('modal.removed', function() {
  // Do something when modal is removed
});

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

ionic-framework
Ionic AngularJS-tillägg

Sök…