ionic-framework
Rozszerzenia Ionic AngularJS

Uwagi

Formularze wejściowe

Wejścia jonowe nie różnią się od zwykłych danych HTML, ale są inaczej stylizowane i używane jako dyrektywa. Możesz także używać normalnych danych HTML w aplikacjach Ionic. Oto kilka podstawowych przykładów, które Ionic oferuje gotowe.

Pole wyboru:

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

Przycisk radiowy:

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

Przełącznik:

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

Okna modalne

Ionic ma własne rozszerzenie do wyświetlania okna modalnego. Moduły można tworzyć, wstawiając szablon bezpośrednio do widoku za pomocą <script> lub używając osobnego pliku szablonu. W tym przykładzie zakładamy, że masz plik HTML o nazwie modal-template.html w folderze o nazwie templates . Ścieżkę szablonu ustawiasz w modalnej funkcji inicjalizacji za pomocą fromTemplateUrl .

Tworzenie obiektu modalnego w zakresie

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> 

Kontroler

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

Kontroluj modal

Następnie możesz sterować modułem za pomocą następujących poleceń.

Otwórz modalne

$scope.modal.show();

Zamknij modalne

$scope.modal.hide();

Usuń modal

$scope.modal.remove();

Wydarzenia modalne

Możesz słuchać zdarzeń modalnych za pomocą następujących funkcji.

Modal jest ukryty

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

Modal został usunięty

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