728x90 반응형 아이오닉15 [하이브리드앱 ionic]시작해보기 15 - ion-item 리스트 순서변경 가능하도록 만들기(reorder) page.html ion-reorder-group으로 묶어줍니다. {{item}} page.ts //items listItems = [ "비행기","숙소","식비","교통비" ]; //재정렬 onRenderItems(event) { console.log(`Moving item from ${event.detail.from} to ${event.detail.to}`); let draggedItem = this.listItems.splice(event.detail.from,1)[0]; this.listItems.splice(event.detail.to,0,draggedItem); event.detail.complete(); console.log(this.listItems); } 이렇게 코드를 추가하면 ion-.. 2019. 7. 23. [하이브리드앱 ionic]시작해보기 14 - 달력에서 선택하는 datepicker, 시작일과 종료일 설정하기 아이오닉 기본 컴포넌트로 ion-datetime 가 있지만 아래와 같이 달력이 아닌 select 형태로 선택하게 되어있어서 datepicker를 이용해서 달력을 만들어보자 달력에서 시작일과 종료일을 선택해 기간을 저장하도록 하는 달력을 만들고자 한다. npm install ion2-calendar moment --save 을 통해 ion2-calendar 를 설치한다. ion2-calendar는 총 3가지의 형태로 날짜선택을 할수있다. - 기본형(단일날짜선택) - 멀티선택(다중날짜선택) - 범위선택(시작일과 종료일 설정) 그중에서 시작일과 종료일을 설정할수 있도록 하려고 한다. module.ts . . . import { CalendarModule } from "ion2-calendar"; @NgModu.. 2019. 7. 16. [하이브리드앱 ionic]시작해보기 13 - ion-item 링크에 생기는 화살표 없애기 ion-item에 링크가 걸리면 자동으로 화살표가 생긴다. ios 버전에서.. ion-item 에 detail="false" 속성을 주면 사라진다.. 드디어해결 detail-none 계속 이것만 나와서 아무리 써도 안없어졌는데 드디어 해결했다.. 2019. 7. 15. [하이브리드앱 ionic]시작해보기 12 - 차트 그리기 Angular 와 typescript를 이용해 차트를 그려보자 page.html page.ts import { Component , OnInit , ElementRef , ViewChild} from '@angular/core'; import * as Chart from 'chart.js'; @Component({ . . . }) export class ReportPage implements OnInit{ @ViewChild("chart") public refChart: ElementRef; public chartData: any; constructor() { this.chartData = {}; } public ngOnInit() { this.chartData = { labels: ["비행기", "숙박.. 2019. 7. 15. 이전 1 2 3 4 다음 728x90 반응형
