# 개요
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.forRoot({
rippleEffect: false,
mode: 'md', //Material Mode 강제
backButtonText: 'Go Back' //뒤로가기 버튼 글씨 일괄적용, 비추천(개별 변경이 불가능)
animated: !isPlatform('mobileweb') //Mobile 웹이 아닐 경우, animated 속성 false
}),
AppRoutingModule
],
...
})
Ionic Config is not reactive, so it is recommended to use a component's properties when you want to override its default behavior rather than set its config globally.
광역으로 ionic component의 기본값을 변경하는 것은 비추천한다. 일단 적용하면 변경하는 것이 어렵다.
기본 플랫폼 별로, 기본 ionic component의 기본값을 일괄 적용 가능(스타일 속성이 아닌 실질 Value)하다. 밑에서 더 자세하게 확인가능하다.
# 일괄 플랫폼 테마 적용하기
<html class="md">
<html> element will have class="md" added to it and all of the components will use Material Design styles:
해당 태그 밑으로 모두 md style을 적용, mode와 platform은 엄연히 다르지만, platform 에 따라 mode가 자동으로 결정되는 방식이다.
# 플랫폼별 기본 style 수정하기
주로 global 속성을 관리하는 파일에서 사용된다.
.ios ion-badge {
text-transform: uppercase;
}
.ios {
--ion-background-color: #222;
}
# 출처
'[DEV] App Dev ∕ Mobile > Framework ∕ Ionic' 카테고리의 다른 글
| [ionic 5] Push Notifications 추가하기 (0) | 2020.09.30 |
|---|---|
| [Ionic 5] Ion-컴포넌트 광역 기본 스타일 적용 (0) | 2020.08.14 |
| [Ionic 5] 키보드 조작하기 (0) | 2020.08.14 |
| [Ionic 5] Shadow Dom 이란? (0) | 2020.08.14 |
| [Ionic 5] Global 전체배경,글자 기본색상값 적용하기 (0) | 2020.08.14 |
최근댓글