Ionic 2 모바일 앱의 스타일을 지정하는 방법에 대한 초보자 안내서

얘들 아! 이 게시물에서는 SCSS를 사용하여 Ionic 2 애플리케이션을 스타일링하는 방법에 대한 극단적 인 기본 사항을 단계별로 안내합니다.

이 연습을 최대한 활용하려면 CSS와 Ionic에 대한 사전 지식이 있으면 좋지만 반드시 그럴 필요는 없습니다. Ionic 2 프레임 워크에 익숙하지 않은 경우 Ionic 2 설명서를 확인하십시오.

연습

Ionic 2는 테이블에 많은 재료를 가져옵니다 (완전히 비어있는 비계에서 시작하지 않는 경우). 당신은 응용 프로그램을 얻을, 그것은 거의 이미 스타일입니다. 그러나 변경하고 싶다면 초보자라면 조금 까다로워집니다.

필요한 플러그인을 설치하려면 Ionic으로 작업을 시작해야하며 NodeJS를 다운로드하여 설치해야합니다. 그런 다음이 명령을 실행하여 터미널에서 Cordova 및 Ionic을 설치할 수 있습니다.

$ npm install -g 이온 성 코르도바

또한 Ionic 2에 내장 된 언어 인 Typescript를 설치해야합니다. 이 명령을 실행하십시오 :

$ npm install -g typescript

이 연습을 주로 스타일링에 초점을 맞추기 위해 기본 디자인의 사전 제작 된 응용 프로그램을 사용합니다.

터미널에서이 명령을 실행하여 Ionic 2 탭 응용 프로그램을 비계하십시오.

$ 이온 시작 myTabs 탭 --v2

탭이있는 응용 프로그램이 제공되므로 다른보기를 탐색 할 수 있습니다. 터미널에 이것을 입력하여 브라우저에서 테스트 할 수 있습니다!

이온 성 서브
보시다시피, Ionic은 각 플랫폼마다 다른 구성 요소를 사용자 정의합니다. 아래에서는 플랫폼 별 디자인을 수행하는 방법에 대해 자세히 설명합니다. 또한 표준 테마 색상 세트를 얻을 수 있으며 꽤 일반적으로 보입니다.

$ colors로 색상 테마 변경

텍스트 편집기에서 앱을 엽니 다. (Jetbrains btw의 WebStorm IDE를 사용합니다)

그런 다음이 파일로 이동하여 시작하십시오.

src / theme / variables.scss

여기에서 앱의 색상 테마가 $ colors라는 변수에 설정되어 있음을 알 수 있습니다. 이러한 키 / 값은 원하는만큼 편집 할 수 있으며 새로운 색상을 추가 할 수도 있습니다.

작동 방식을 보여 주려면 기본의 16 진수 색상을 "빨간색"으로 바꾸십시오.

결과는 다음과 같습니다.

기본 색상을 사용하는 모든 구성 요소가 기본 색상 (빨간색)으로 설정되었습니다.

모든 구성 요소에서 이러한 색상을 쉽게 사용할 수 있습니다. 이제 어떻게 할 수 있는지 보여 드리겠습니다!

이 파일로 이동하십시오 :

src / pages / home / home.scss

이 파일에서는 페이지 특정 SCSS를 추가합니다. 여기서 추가 한 스타일은 홈 페이지에만 적용됩니다.

h2 텍스트“Welcome to Ionic!”의 색상을 기본 색상 (빨간색)으로 변경하겠습니다. 그렇게하려면 h2 태그를 page-home에 추가하고 색상을 map-get ($ colors, primary)로 재정의해야합니다. 변수 $ colors와 키 "primary"의 값을 가져옵니다.

그 결과는 다음과 같습니다.

h2 색상도 이제 빨간색입니다! 임무 성공!

이제 알아 낸 것처럼 $ colors 변수의 키를 사용할 수도 있습니다. 조금 가지고 놀아보고 새로운 것을 추가하십시오!

$ colors를 사용하면 앱의 모든 색상을 추적 할 수 있습니다. 거대한 요소 덩어리의 색상을 동시에 쉽게 변경할 수 있습니다. SCSS를 사용하지 않으면 다른 모든 구성 요소를 확대하고 수동으로 색상을 변경하지 않아도됩니다.

이온 변수 재정의

"src / theme / variables.scss"에서 많은 Ionics 사전 제작 디자인을 변경할 수 있습니다. 예를 들어, 이온이 우리를 위해 디자인 한 툴바의 색상을 변경하려고합니다. Ionic 2 설명서로 이동하여 "도구 모음"을 검색 할 수 있습니다. 조금 아래로 스크롤하면“도구 모음 배경”이 표시됩니다. 이것이 우리가 필요로하는 것입니다. 여기에서 기본 테마 색상이 "# f8f8f8"로 설정되어 있음을 알 수 있습니다.

이 툴바의 색상을 기본 색상으로 변경하겠습니다. “variables.scss”파일로 이동하여 다음을 추가하십시오.

$ 툴바 배경 : map-get ($ colors, primary);

그리고 voila, 앱의 모든 툴바 배경이 기본 색상이되고 이전에 빨간색으로 설정되었습니다!

흠,하지만 툴바가 너무 작다고 생각하면 어떻게 되나요? 그리고 높이를 높이고 싶습니까? 아주 비슷한 방식으로 그렇게 할 수 있습니다!

Ionic 2 설명서의 재정의 변수 페이지로 이동하여 도구 모음 높이를 검색하십시오.

하단에는 $ toolbar-ios-height, $ toolbar-md-height 및 $ toolbar-wp-height가 있습니다. 이것들은 당신이 개발하고있는 세 가지 플랫폼 모두를위한 다른 툴바입니다! ios = Iphone, md = Android 및 wp = Windows Phone 테스트하려면 iOS 툴바를 선택하여“variable.scss”에 배치하고 다음과 같이 새 값을 설정하십시오.

결과는 다음과 같습니다.

보시다시피, iOS의 툴바는 이제 커졌습니다. 자유롭게 실험하고 스타일을 재정의 할 수있는 더 많은 구성 요소를 찾으십시오. 찾고있는 구성 요소의 이름을 모르는 경우 브라우저에서 해당 구성 요소를 마우스 오른쪽 단추로 클릭하고 구성 요소의 클래스 이름을 찾은 다음 Ionic 2 설명서에서 검색에 사용할 수 있습니다!

또한 Ionic 2의 github 저장소에서 다른 구성 요소를 살펴보고 해당 변수가 어떤 변수인지 확인할 수 있습니다.

맞춤형 플랫폼 별 설계 활용

동시에 3 개의 플랫폼 용 응용 프로그램을 개발하고 있으므로 각 구성 요소와 각 구성 요소에 대해 개별적으로 구성 요소를 사용자 지정할 수 있어야합니다. iOS에서는 머티리얼 디자인이 제대로 작동하지 않습니다.

이를 증명하기 위해 iOS 플랫폼에서

텍스트의 색상을 변경합니다.

이 파일로 이동하십시오 :

src / app / app.scss

여기서 전역 SCSS 변수를 추가 할 수 있습니다. 여기에 넣은 스타일이 전체 앱에 적용된다는 의미입니다.

iOS에서“

”텍스트를 녹색으로 만들려면 해당 SCSS를 해당 파일에 추가하면됩니다.

.ios {
  p {
    색깔 : 녹색;
  }
}

결과는 이것입니다! :)

이것이 Ionic 2가 제공하는 가장 귀중한 스타일 기능 중 하나라고 생각합니다.

이 작업을 수행하는 방법에 대한 매우 간단한 예입니다. 그러나 당신이 가능성을 상상한다면! 기본적으로 하나의 응용 프로그램을 빌드하고 각 플랫폼마다 고유하고 다르게 보이도록 만들 수 있습니다. 각 플랫폼마다 버튼 애니메이션이 기본 애니메이션과 일치해야 할 수도 있습니다. 세 가지 기본 응용 프로그램을 개발하는 대신이 작업을 수행하여 시간을 얼마나 절약 할 수 있는지 이해하시기 바랍니다.

나는 여기서 연습을 끝내고 당신에게 맡길 것입니다! 최대한 많이 놀아보십시오. Ionic 2에 대해 배울 점이 많이 있습니다. 스타일링의 기본 사항을 다뤘습니다.

그러나이 모든 작업을 수행하는 방법을 이해하면 모든 것을 결합하여 정말 멋진 응용 프로그램을 만들 수 있습니다.

앞으로는 API, E2E 테스트 및 기타 재미있는 것들을 소비하는 방법과 같은 Ionic 2 프레임 워크의 다른 측면에 대해 비슷한 게시물을 작성합니다.

체크 아웃하려면이 연습의 결과를 내 Github에 푸시했습니다!

곧!겠습니다!