Ionic으로 계산기를 작성했으므로 되돌아 보는 (시작편)의 계속입니다.
이번은, 만든 계산기의 사양에 대해입니다.

앱 화면

1. 히스토리 부분
계산 결과의 기록이 표시됩니다. Component에서 작성하고 있습니다. 하단으로 표시합니다.


애니메이션. 표시에서 보았던 부분도 스크롤로 확인할 수 있습니다.

2. 메인 디스플레이
입력 중인 내용이 표시됩니다. 문자수가 많은 경우는 가변으로 문자가 작아집니다. 또한 3자리마다 쉼표가 자동으로 들어갑니다.


문자 수의 자동 조정에 Directive. 쉼표의 자동 삽입에 Pipe를 사용하고 있습니다.

3. 서브 디스플레이
계산중인 내용을 표시합니다.

4. 컨트롤러부
각 수치, 사칙 연산의 입력을 받아들입니다.
테이블 스타일 레이아웃에는 ion-grid를 사용합니다.
backspace는 ion-icon을 사용합니다.

사용, 디자인의 참고원

iPhone 계산기와 비슷하다고 합니다. 하지만, 참고로 한 것은 Xiaomi 계산기 응용 프로그램입니다.
iPhone의 계산기와 닮은 Xiaomi의 계산기 앱을 한층 더 참고로 한 느낌입니다.

iOS 버전과 안드로이드 버전이 모두 나와 있으므로 관심이 있다면보십시오.
· iOS
htps: //언제나 s. 아 ぇ. 이 m/jp/아니 p/아니 d1195791018? mt=8
· Android
htps : // p ぁ y. 오, ぇ. 이 m / s 취해 / 아 ps /에서 원하는 ls? 아니 d = m. 미우이. 카 쿠와 r & hl = 그럼

목차

・시작편(ionic, 목적, 작성한 소스 코드의 공개)
・사양편(어플의 사양 설명)
・Component편(상향식의 리스트 실현 방법, 변경 검지, 수수께끼의 setTimeout, 애니메이션)
・Directive편(문자 사이즈의 변경, 변경 검지, 수수께끼의 계산식)

-----여기에서 아래는 언젠가 쓴다----
・Pipe편(쉼표)
・테스트편(환경 구축, Provider의 테스트)
・그 외편(ion-icon은 기종마다 있거나 없거나로 표시되지 않네요)
・배포 주위편(platform 바로 아래의 파일에 대해서, netlify, PWA)