U ovom ću blog postu pokazati kako koristiti Ionic Range komponentu koja korisnicima mobilne aplikacije omogućava odabir vrijednosti pomicanjem klizača po horizontalnoj liniji.
Kreiranje aplikacije
Za početak kreiram novu Ionic aplikaciju.
|
1 2 |
$ ionic start IonicRange blank $ cd IonicRange |
Korištenje komponente
U ovom slučaju nisam morao instalirati nikakav Ionic Native plugin. Dovoljno mi je bilo samo vidjeti što kaže dokumentacija.
Ako u aplikaciju ubacim sljedeći kod, iz dokumentacije, on neće raditi ništa osim što će stajati na ekranu i omogućiti pomicanje klizača.
|
1 2 3 4 5 6 |
<ion-item> <ion-range [(ngModel)]="brightness"> <ion-icon range-left small name="sunny"></ion-icon> <ion-icon range-right name="sunny"></ion-icon> </ion-range> </ion-item> |
Zato svakom </ion-range> elementu dodajem funkciju (ngModelChange)="prikazVrijednosti($event)" koja će omogućiti dohvaćanje vrijednosti klizača.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<ion-header> <ion-navbar> <ion-title> Ionic Range </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <ion-item> <ion-label>Standardni klizač</ion-label> <ion-range [(ngModel)]="vrijednost1" color="danger" pin="true" (ngModelChange)="prikazVrijednosti($event)"></ion-range> </ion-item> <ion-item> <ion-label>Min-Max klizač</ion-label> <ion-range min="-200" max="200" [(ngModel)]="vrijednost2" color="secondary" (ngModelChange)="prikazVrijednosti($event)"> <ion-label range-left>-200</ion-label> <ion-label range-right>200</ion-label> </ion-range> </ion-item> <ion-item> <ion-label>Min-Max klizač 2</ion-label> <ion-range min="20" max="80" step="2" [(ngModel)]="vrijednost3" (ngModelChange)="prikazVrijednosti($event)"> <ion-icon small range-left name="sunny"></ion-icon> <ion-icon range-right name="sunny"></ion-icon> </ion-range> </ion-item> <ion-item> <ion-label>Min-Max klizač s odabirom najbliže vrijednosti</ion-label> <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary" [(ngModel)]="vrijednost4" (ngModelChange)="prikazVrijednosti($event)"></ion-range> </ion-item> </ion-list> </ion-content> |
Funkcionalnost se sastoji od samo jedne funkcije.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { vrijednost1: number; vrijednost2: number; vrijednost3: number; vrijednost4: number; constructor(public navCtrl: NavController) {} prikazVrijednosti(a){ console.log(a); } } |
Što na kraju izgleda ovako:
Osim toga, mogu se napraviti i konkretnije stvari. Npr. klizač za izračun broja mjeseci otplate kredita pri čemu je 1 mjesec minimalna vrijednost, a 120 mjeseci tj. 10 godina maksimalna vrijednost.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ion-header> <ion-navbar> <ion-title> Ionic Range </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-item> <ion-label>Otplata kredita u mjesecima</ion-label> <ion-range min="1" max="120" [(ngModel)]="vrijednost1" color="secondary" pin="true" (ngModelChange)="prikazVrijednosti($event)"></ion-range> </ion-item> <div>Ukupno mjeseci za otplatu: {{vrijednost1}}</div> <div>Godina: {{godina}} Mjeseci: {{mjesec}}</div> </ion-content> |
Funkcionalnost sada izgleda malo drugačije
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { vrijednost1: number; godina:any; mjesec:any; constructor(public navCtrl: NavController) {} prikazVrijednosti(a){ this.godina = Math.floor(a / 12); this.mjesec = a % 12; console.log(a); console.log(this.godina); console.log(this.mjesec); } } |
Zaključak
S obzirom da je ova komponenta toliko jednostavna tu se nema što posebno za zaključiti osim da je pomoću ove komponente moguće poboljšati korisničko iskustvo korištenja Ionic aplikacije.
I za kraj, package.json datoteka
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
{ "name": "IonicRange", "version": "0.0.1", "author": "Tomislav Stanković", "homepage": "https://www.tomislavstankovic.com/", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/animations": "5.2.10", "@angular/common": "5.2.10", "@angular/compiler": "5.2.10", "@angular/compiler-cli": "5.2.10", "@angular/core": "5.2.10", "@angular/forms": "5.2.10", "@angular/http": "5.2.10", "@angular/platform-browser": "5.2.10", "@angular/platform-browser-dynamic": "5.2.10", "@ionic-native/core": "4.7.0", "@ionic-native/splash-screen": "4.7.0", "@ionic-native/status-bar": "4.7.0", "@ionic/storage": "2.1.3", "ionic-angular": "3.9.2", "ionicons": "3.0.0", "rxjs": "5.5.11", "sw-toolbox": "3.6.0", "zone.js": "0.8.26" }, "devDependencies": { "@ionic/app-scripts": "3.1.9", "typescript": "~2.6.2" }, "description": "Ionic Range komponenta" } |
