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

[Ionic 5] Light/Dark Theme 적용하기

# 개요Ionic 상에서는 prefers-color-scheme 미디어 속성(쿼리) 라는 표준으로, 사용자 App의 Light/Dark 여부를 판별하여, Theme를 적용한다. Q. prefers-color-scheme 미디어 속성이란?prefers-color-scheme CSS 미디어 특성은 사용자의 시스템(크롬, 파이어폭스, 안드로이드 웹뷰, 아이폰 웹뷰)이 App이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다. - prefers-color-scheme 미디어쿼리의 가능 속성no-preference : 사용자가 시스템에 선호하는 테마를 알리지 않았음을 나타냅니다. 이 키워드는 boolean context에서 false로 판정됩니다.(특정 브라우저에서는 light로 기본으로 지정됨)l..

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

[Ionic 5] Main Color 색상 정의하기

# 개요Ionic 상에서는 css에 색상을 지정해도 좋지만, primary, secondary, dark, success 와 같은 색상을 global로 지정한 후에, ionic 태그에 간편하게 color="(색상값)" 형식으로 사용한다. When there is no color set on the button it uses the primary color by default.어떠한 색상도 버튼에 대해 설정이 되어 있지 않으면, 기본적으로 primary color로 지정된 값에 따라 스타일링 되게 된다. # 실제 ionic 태그상에서 사용 예제 DefaultPrimarySecondaryTertiarySuccessWarningDangerLightMediumDark # 기본 색상 변경하기 Each color ..

2020. 8. 13. 23:55
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

[Ionic 5] Ionic Infinite Slide

# 개요fullcalendar library가 기본적으로, swipe를 제공하지 않는 관계로, 여러가지 hammer.js 라이브러리 등을 시도해본 결과, 결국은 ionic slides를 사용하는 것이 가장 안정적인 방법으로 결론이 났다. 많은 검색을 해보았지만... 아래 방법이 지금까지는 최선인 듯하다. Best Practice를 구하고 싶었으나, 세상은 그렇게 호락호락하지 않았다. # 요건- 성능 저하를 최소화할 것- swipe 모션이 정확하면서, 기타 기능을 저해하지 않을 것 # 수정사항- mousedown 이벤트는 브라우저에만 해당하므로, pointerdown이라는 이벤트 함수로 변경(touch screen이나 mouse에서 동시에 작동함) # component.html swipetest2 {{nu..

2020. 8. 13. 17:11
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

Ionic 성능개선하기 - Slide 최적화

# 개요 slider 사용시, 성능이 급격하게 나빠지는 현상 발생 # 해결책 onSlideChanged 이벤트 발생시, 꼭 필요한 경우에만 호출하도록 조치한다.import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; @Component({ selector: 'page-my', templateUrl: 'my-page.html', changeDetection: ChangeDetectionStrategy.OnPush }) export class MyPage implements OnInit { slides: number[] = []; methodCounter: number = 0; ngOnInit() { let n..

2020. 8. 12. 10:33
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

Ionic 기본 - 투명 아이콘 버튼

# Ionic ver 5 용 버튼 선언 방법 # 주의 사항Style은 제외하고, 위와 같이 선언할 경우, 투명 배경에 아이콘을 클릭할 수 있도록 구성이 가능하다.다만, 선택 후 focus 상태로 이전에 선택 되었음을 표시해준다.(거슬리기는 하지만, 괜찮음) 만약 ion-item 안쪽에 구성하게 될 경우, ion-item 클릭효과 때문에, 쭉 focus 상태로 표시될 수 있으므로, 반드시 Onclick 작업 이후, $event.stopPropagation(); 함수를 호출해주도록 한다.그리고, ion-item 사용시, click이 block 될수도 있는데, style="z-index:1000"으로 지정할 경우, 해결 가능하다. # 스타일 수정기본으로 생기는 padding을 제거할 수 있다.ion-butto..

2020. 8. 12. 01:24
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

Ionic Drag & Drop 적용하기(dragula 라이브러리)

# 개요Ionic 프레임워크 상에서 Drag & Drop 을 통한 Sortable한 리스트를 구현하는 방법은, 크게 두가지가 존재한다.Ionic 기본 제공 : , 태그를 사용하여, 간편하게 구현ng2-dragula : node angular 패키지를 설치하여, 구현기본 제공되는 태그로 손쉽게, 아이콘 문제까지 해결할 수 있으나, 더 고차원적인 drag and drop이 필요한 관계로, 기본 기능을 쓰되, 고차원 기능은 3rd party 라이브러리를 사용하게 되었다. # ng2-dragula 설치npm install ng2-dragula —save # dragula 모듈 global importapp/app.module.ts 중...Import { DragulaModule } from ‘ng2-dragul..

2020. 8. 9. 23:17