[DEV] App Dev ∕ Mobile 검색 결과
26 개의 검색 결과가 있습니다.
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

[ionic 5] Push Notifications 추가하기

1. sudo ionic cordova plugin add cordova-plugin-local-notification2.npm install @ionic-native/local-notifications 3. app.module.ts 상에 서비스 선언//LocalNotifications(ngx로 import 해야함) 추가import { LocalNotifications } from '@ionic-native/local-notifications/ngx'...providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, LocalNotifications ],...

2020. 9. 30. 01:15
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

[Ionic 5] Ion-컴포넌트 광역 기본 스타일 적용

# 개요 프로젝트에 걸쳐, 특정 ionic component에 일괄적인 스타일을 적용하고 싶거나, 기본 속성이 비슷하다면, 예를 들어 버튼은 투명 배경에서 주로 사용된다면, 글로벌 스타일시트에 ionic component 별 기본 스타일을 적용해두는 것이 바람직하다. # 적용하기 theme/variable.scss 상에서 :root{} 태그 안에 넣어주면, Application에 전체적으로 적용된다. /* Set the color on all ion-button elements */ ion-button { --color: #222; } //ion-button이 내부적으로 var(--color) 형식으로 적용되기 때문에, --color 라는 미리 지정된 예약어에 값을 할당해주어야 한다. /* Set the..

2020. 8. 14. 02:27
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

[Ionic 5] 플랫폼 관련 작업

# 개요 Ionic 은 다양한 플랫폼을 지원하는 만큼 기본적으로, md, ios, core 모드를 제공한다. 각각의 플랫폼(ios, android 웹뷰, chrome 등)은 기본값을 가진다. # 플랫폼 모드 글로벌 적용하기 특정 정의가 없다면, 플랫폼 별로 다른 Style들이 적용된다.(ionic component 내에 mode별로 정의됨) 같은 ionic-component라도, mode 속성을 따로 강제하지 않는다면, 플랫폼별에 맞은 스타일로 변경되어 렌더링 된다. app.module.ts 中 import { IonicModule , isPlatform} from '@ionic/angular'; @NgModule({ ... imports: [ BrowserModule, IonicModule.forRoo..

2020. 8. 14. 02:14
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

[Ionic 5] 키보드 조작하기

# 개요 어플리케이션을 개발하다 보면, 키보드를 input 컴포넌트에 따라 다르게 보여줘야된다거나, 키보드가 보여질 때 특정 작업을 수행해야할 경우가 생긴다. ionic은 아래와 같은 네이티브 키보드 기능들을 제공한다. # 키보드 숫자만 보여주기 # 키보드 엔터입력시, 이벤트 처리 # 키보드 열림/닫힘 시 이벤트 처리 # 출처 - https://ionicframework.com/docs/developing/keyboard

2020. 8. 14. 02:01
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

[Ionic 5] Shadow Dom 이란?

# Shadow Dom이란?Ionic이 제공하는 Ui Component는 기본적으로, 외부에서 Style 에 접근 할 수 없도록, encapsulation이 되어 있고, 그것은 shadow dom으로 덮어씌워지는 형태로 이루어진다. //컴포넌트 내부에 .button 클래스가 존재하지만, 접근해서 수정이 불가능하다. #shadow-root //보이지 않지만, 태그 존재 /* Does NOT work */ //적용되지 않는다.ion-select .select-placeholder { color: blue;} # Shadow Parts란?Shadow parts allow developers to style inside a shadow tree, from outside of that shadow tree. In..

2020. 8. 14. 01:57
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

[Ionic 5] Global 전체배경,글자 기본색상값 적용하기

# 개요 무엇이든지, 공통적인 값들은 global로 적용한 뒤에 작업하는 것이 중복 작업을 줄일 수 있을 것이다. 기본적으로, primary~light 값이나 custom 색상을 적용했다면, 별다른 적용 필요는 없다. segment, toolbar 처럼 완전 고정인 색상은 global로 지정하고, 나머지는 다르게 적용한다. background-color 나 ion-text-color는 전체적으로 영향을 주므로, 단순 색상이 아닌 step color를 사용하여, dark theme 시에도 영향이 없게 하여야한다. 앱의 전체적인 배경색(하얀색 속성값), 앱의 전체적인 글자색(검정색 속성값)을 지정하는 용도로 사용되는 것이 대부분이다. # 배경 색상 & 글자 색상 --ion-background-color Ba..

2020. 8. 14. 01:31