개발/ionic14 ionic status bar 상태바 추가 STEP1 플러그인 설치 ionic cordova plugin add cordova-plugin-statusbar npm install @ionic-native/status-bar STEP2 app.module.ts 모듈에 사용할 플러그인 기재 import { StatusBar } from '@ionic-native/status-bar/ngx'; providers: [ StatusBar, ] STEP3 app.component.ts 모든 페이지에 적용해야하니 app.components에서 소스 적용 import { StatusBar } from '@ionic-native/status-bar/ngx'; constructor( private statusBar: StatusBar ) { this.initial.. 2021. 1. 4. ionic 팝업창 글 순서 정렬하기 actionSheet 우측 상단 버튼을 눌러 액션 시트를 열고 요소를 클릭할시 정렬되어 글 리스트가 다시 표출되는 기능을 만들어 보겠습니다. 1.먼저 아이오닉 앵귤러에서 제공하는 액션 시트를 import 해줍니다. import { ActionSheetController } from '@ionic/angular'; 2. 생성자 constructor에 변수를 생성합니다. constructor( public actionSheetCtrl:ActionSheetController, ) 3. 아래와 같이 함수를 생성합니다. async showOrderByType(){ const actionSheet = await this.actionSheetCtrl.create({ header: '정렬기준을 체크하세요', buttons:[ { text:.. 2021. 1. 4. ionic 아래로 스크롤시 새로 고침 ion-refresher example 예제 인스타그램을 보면 앱을 아래로 당길시 새로고침이 되는 기능이 있다. ionic에서 ion-refresher라는 기능을 제공함으로 HTML과 TS 처리만 해주면 사용할 수 있다. 예제는 아래와 같다. HTML TS ReloadData(event){ setTimeout(()=>{ // console.log(this.scrollPageNum); this.scrollPageNum=1; //페이지 초기화 this.review_list = []; // 데이터 초기화 this.loadPickData(true); //데이터 가져옴 event.target.complete(); },700); } 결과화면 2020. 12. 30. ionic card 카드 디자인 퍼블리싱 예제 css 홀수 짝수 적용 다음과 같이 처리를 해준다. 1. content 백그라운드 회색배경 2. 공용 div scss 처리 3. 홀수 div 처리 짝수 div 처리 html dd ss css ion-content{ --ion-background-color:#f3f3f3; } .card_div{ float:left; width: calc(50% - 21px); background: white; height: 180px; } .card_div:nth-child(even) { margin-right: 14px;margin-left: 7px; } .card_div:nth-child(odd) { margin-left:14px;margin-right:7px; } 결과 화면 2020. 12. 29. ionic ion-content background-color 예제 example scss ion-content{ --ion-background-color:#f3f3f3; } 2020. 12. 29. ionic spinner 예제 example ionic spinner를 통하여 데이터 리스트를 통신하는 동안 페이지에서 데이터를 가져오고 있다고 표시할 수 있다. 이를 위하여 4가지 처리를 해주어야 한다. 1. 노출 처리를 위한 변수 생성 2. 생성자에 setTimeout으로 변수 값 변환처리 3. html에 ion-spinner 삽입 4. *ngIf 사용 알고리즘은 아래와 같다. ngif문을 사용하여 노출처리 변수값에 따라 내용은 비노출 ion-spinner은 노출한다. HTML 1.5초후 표출될 내용 TS //초기 변수 private isShow =true; //생성자 constructor() { //1.5초 후 false로 변경 처리 setTimeout(()=>{ this.isShow =false; },1500) } 2020. 12. 29. ionic 안드로이드 기기로 프로그램 실행하기 STEP1 휴대폰 잭연결 STEP2 device 인식 프로그램 필요하면 설치 STEP3 설정 -> 개발자 모드 -> usb 디버깅 on STEP4 명령어 입력 연결 가능 기기 목록 보기 adb devices => R3CN4034DDD 이런식으로 기기 내역 나온다면 정상 연길 기기로 실행 ionic cordova run android --target="R3CN4034DDD" 2020. 12. 23. ionic 이미지 미리보기 css input 감춤처리 파일 선택시 업로드 전에 이미지를 미리보는 기능 HTML Upload SCSS #myFileInput{ position: absolute; opacity: 0; } .myFakeUploadButton{ /* Whatever you want */ } HTML 위와 같은 방식으로 적용을 하면 된다. 실제 적용 소스 예제는 아래와 같다. HTML SCSS #myFileInput{ position: absolute; opacity: 0; } .myFakeUploadButton{ /* Whatever you want */ } TS //이미지 선택시 실행 selectedFile(event){ this.photo=event.target.files[0]; console.log(this.photo); this.proj.. 2020. 12. 21. [아이오닉 설치 및 환경설정#3] visualstudio 터미널 사용법 powerShell 관리자 권한 부여 개발 꿀팁 지난 글에서 아이오닉의 개발툴중 하나인 visualstudio를 설치하고 디렉토리 링크를 걸었다. enjoyk.tistory.com/14 [아이오닉 설치 및 환경설정#2] 개발 툴 visualstudio.com 설치 디렉토리 링크 지난 글에서 - 아이오닉 기반 언어인 node.js를 설치했고 - ionic 프로그램을 설치하여 예제를 만들고 실행해보았다. enjoyk.tistory.com/13 [아이오닉 설치 및 환경설정 #1] node 설치, ionic 설치 예제실행 반 enjoyk.tistory.com 이번에는 visualstudio의 강점인 terminal 기능에 대하여 소개하고 사용방법을 기록하도록 하겠다. 깃허브를 이용하거나 각종 라이브러리를 이용할시 아래 이미지들과 같이 cmd나 gitbash를.. 2020. 12. 14. [아이오닉 설치 및 환경설정#2] 개발 툴 visualstudio.com 설치 디렉토리 링크 지난 글에서 - 아이오닉 기반 언어인 node.js를 설치했고 - ionic 프로그램을 설치하여 예제를 만들고 실행해보았다. enjoyk.tistory.com/13 [아이오닉 설치 및 환경설정 #1] node 설치, ionic 설치 예제실행 반복되는 아이오닉 설치와 환경 설정작업을 효율적으로 진행하고자 절차를 기록해둔다. 참고하는 사람이 있다면 도움이 되길 바란다. node 기반 언어이기 때문에 node를 가장먼저 설치해야한다. enjoyk.tistory.com 이번에는 개발 툴인 visualstudio를 설치하고 지난번 생성한 프로젝트를 연결하는 방법을 기록한다. STEP1 먼저 아래 링크를 통하여 개발 툴을 다운로드 받는다. 다운 링크 https://code.visualstudio.com/ STEP2.. 2020. 12. 14. [아이오닉 설치 및 환경설정 #1] node 설치, ionic 설치 예제실행 지인에게 아이오닉 앱 개발을 교육할 일이 생겼다. 반복되는 아이오닉 설치와 환경 설정작업을 효율적으로 진행하고자 절차를 기록해둔다. 참고하는 사람이 있다면 도움이 되길 바란다. node 기반 언어이기 때문에 node를 가장먼저 설치해야한다. 아래 링크를 통해 다운 받을 수 있다. 1.node 설치! https://nodejs.org/ko/ 프로그램을 다운 받았다면 cmd에 접속하여 설치 할 수 있다. 2.cmd 접속! s3.udo npm install -g ionic 기본 예제를 생성해서 프로그램 설치를 확인해보자 3.기본앱 만들기 사이드메뉴 사용시 ionic start firstApp sidemenu 탭메뉴 사용시 ionic start myApp tabs 진행 1) 앵귤러JS 리엑트중에 1택 하라.. 2020. 12. 14. ionic ionic inappbrowser err unknown url scheme kakao link java script로 셋팅한 상황. 카카오 링크 인앱브라우저로 실행 err unknown url scheme 뜸 intent 예외처리하는 부분 작업하다 실패 sdk ionic4 있다는 소문듣고 시도하다 실패 빌드에 해시키에 서명에 별의 별 똥꼬쇼 도중 20시간정도 삽질하다가 간단한 방법 알게됨 create 인앱 명령어에 _blank 가 아니라 _system 으로 처리하면된다는것 //kakaoLogin kakaoAddFriend(){ const browser = this.iab.create('열려는 url 주소','_system',this.options); browser.on('loadstart').subscribe(event => { }); } https://community.adobe.. 2020. 12. 11. 이전 1 2 다음
