로메오의 블로그

ionic 차례 신규프로젝트 생성 $ ionic start material-demo --type=angular Angular Material 설치 $ ng add @angular/material Theme name: indigo-pink Hammerjs와 browser animations도 함께 설치합니다. src/app/app-module.ts .... import { MatButtonModule } from '@angular/material' @NgModule({ .... imports: [ .... MatButtonModule ], .... }) .... import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular..

ionic 차례 ngx-translate설치 $ npm install @ngx-translate/core --save $ npm install @ngx-translate/http-loader --save src/app.module.ts .... import {TranslateLoader, TranslateModule} from '@ngx-translate/core'; import {TranslateHttpLoader} from '@ngx-translate/http-loader'; import {HttpClient, HttpClientModule} from '@angular/common/http'; export function HttpLoaderFactory(http: HttpClient) { return..

ionic 차례 $ ionic g component popoverone src/app/header/header.component.ts import { Component, OnInit } from '@angular/core'; import { PopoverController } from '@ionic/angular' import { PopoveroneComponent } from '../popoverone/popoverone.component' @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.scss'], }) export class HeaderComponent..

ionic 차례 $ ionic g page auth/forget src/app/auth/forget/forget.page.html Submit src/app/auth/forget/forget.page.scss ion-content { } ion-content > ion-list { position: relative; top:30%; } .btn-center-align { text-align: center !important; } .btn-center-align ion-button { --color: white } ion-item { --background: white; color: blue($color: #000000); --min-height: 40%; } ion-list { background-col..

ionic 차례 src/assets 폴더에 slide 이미지 3개를 추가합니다. src/app/home/home.page.html Get Started Welcome to Ionic Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps. Resources Ionic Documentation Scaffold Out Your App Change Your App Layout Theme Your App src/app/home/home.page.ts import { Component } from '@ang..

ionic 차례 $ ionic cordova resources icon.png 파일과 splash.png 파일을 교체합니다. $ ionic cordova resources 다시 위 명령을 입력합니다. resources가 변경된것을 확인할 수 있습니다. $ ionic cordova build android $ ionic cordova build ios resource가 변경되었습니다. ionic 차례

ionic 차례 $ ionic g component header $ touch src/app/components.module.ts src/app/home/home.page.html HELLO home.page.html 상단의 위 코드를 cut해서 src/app/header/header.component.html 파일에 paste 합니다. src/app/components.module.ts import { NgModule } from '@angular/core' import { IonicModule } from '@ionic/angular' import { HeaderComponent } from './header/header.component' @NgModule({ declarations: [Header..

ionic 차례 $ ionic cordova build android $ ionic cordova build ios Android Studio로 App Build Xcode로 App Build ionic 차례