Ionic Framework 초기 템플릿의 LargeTitle 이해

최근 Ionic Framework는 영왕슈퍼마켓, 삼정주우은행, 여러분의 은행 등 대기업에서 잇따라 채용되어 이 일에 관한 이야기를 조금 들었다.
아이오닉 5는 2020년 2월에 발매됐기 때문에 지금껏 일이 좀 있었던 것 같고, 지금의 템플릿을 적용한 라지 타이틀에 대한 해설은 지금부터다.

이른바 Large Title

iOS 11의 인터페이스

Navigation Bar Titles - Human Interface Guidelines
실현된 특징은 다음과 같다.

스크롤 후 Large Title에서 일반 제목

으로 변경

변환을 누르면 변환 목적지에서 후퇴 버튼의 제목

으로 바뀝니다.
애니메이션을 보면 이해하기 쉽다.다음 제목은 Large Title입니다.

아이닉으로 어떻게 재현했는지.

Ionic은 로컬 UI를 충실히 재현하는 것으로 인정받고 있습니다.따라서 이 행위를 충실히 재현하기 위해 다음과 같은 실현이 이뤄지고 있다.이것은 이니시에이터 템플릿의 BLANK 것입니다.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>
</ion-content>

자세히 보면 ion-header 이하는 시작과 ion-content 바로 아래의 두 개다.처음ion-header 이하ion-title는 일반적인 제목이고, 바로 아래ion-content 이하ion-header는 Large Title이다.그런 다음 스크롤ion-title할 때 자동으로 전환됩니다.
LageTitle을 설치하는 주요 속성은 ion-content과 size="large" 두 가지입니다.collapse="condense" 제목만 확대size="large"합니다.font-size가 있으면 collapse="condense" 이하ion-header가 표시되지 않습니다.스크롤ion-title할 때 임계값에 따라 ion-content의 표시와 숨기기를 전환합니다.
또한 iOS Design에서만 사용할 수 있으며 Android 환경은 기본적으로 표시되지 않습니다.개발 시 iOS 설계 확인 방법 정보
https://www.asobou.co.jp/blog/web/gcd-check
참조해주세요.

더 깊이 이해하기 위해서.

ion-title을 없애보도록 하겠습니다.

  <ion-content [fullscreen]="true">
    <ion-header collapse="condense">
      <ion-toolbar>
-       <ion-title size="large">Blank</ion-title>
+       <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>

물론 Large Title는 작아진다.

그나저나 Lerge Title을 일본어로 바꾸면 윗부분이 미묘하게 끊어질 수 있으니 일본어 사이즈를 30px(초기치 44px)로 설정하는 것을 추천합니다.

ion-title[size="large"] {
  font-size: 30px;
}

"large"를 제거해 보십시오.

수중의 항목을 아래의 모양으로 바꾸어라.

  <ion-content [fullscreen]="true">
-   <ion-header collapse="condense">
+   <ion-header>

이렇게 되면 내부에collapse="condense"의 우선순위가 없기 때문에 다음과 같다.둘 다 나왔네.

LargeTitle을 사용하지 않는 경우

사용 시 초기 템플릿을 유지할 수 있지만 사용하지 않을 때는 ion-header를 눌러 삭제합니다.이렇게 되면 iOS 환경에서도 Large Title이 적용되지 않고 Ionic을 사용할 수 있다.
그럼 안녕히 계세요.