Ionic-헤더

그만큼 Ionic header bar화면 상단에 있습니다. 제목, 아이콘, 버튼 또는 그 위에 다른 요소를 포함 할 수 있습니다. 사용할 수있는 미리 정의 된 헤더 클래스가 있습니다. 이 튜토리얼에서 모두 확인할 수 있습니다.

헤더 추가

앱에서 사용할 수있는 모든 막대의 기본 클래스는 bar. 이 클래스는 항상 앱의 모든 막대에 적용됩니다. 모두bar subclasses 접두사를 사용합니다 – bar.

헤더를 만들려면 다음을 추가해야합니다. bar-header 메인 후 bar수업. 당신의www/index.html 파일에 헤더 클래스를 추가하고 body꼬리표. 우리는 헤더를index.html body 앱의 모든 화면에서 사용할 수 있기를 원하기 때문입니다.

이후 bar-header 클래스에는 기본 (흰색) 스타일이 적용되어 있으며 그 위에 제목을 추가하므로 화면의 나머지 부분과 구분할 수 있습니다.

<div class = "bar bar-header">
   <h1 class = "title">Header</h1>
</div>

위의 코드는 다음 화면을 생성합니다.

헤더 색상

헤더 스타일을 지정하려면 적절한 색상 클래스를 추가하기 만하면됩니다. 요소의 스타일을 지정할 때 기본 요소 클래스를 색상 클래스에 접두사로 추가해야합니다. 헤더 바의 스타일을 지정하므로 접두사 클래스는bar 이 예제에서 사용하려는 색상 클래스는 positive (푸른).

<div class = "bar bar-header bar-positive">
   <h1 class = "title">Header</h1>
</div>

위의 코드는 다음 화면을 생성합니다.

다음 9 개의 클래스 중 하나를 사용하여 앱 헤더에 원하는 색상을 지정할 수 있습니다.

색상 클래스 기술 결과
바 라이트 흰색에 사용  
바 안정 밝은 회색 색상에 사용  
바 양성 파란색에 사용  
평온한 하늘색에 사용  
균형 잡힌 녹색에 사용  
바 에너지 노란색에 사용  
변호사 붉은 색에 사용  
바 로얄 바이올렛 컬러에 사용  
바-다크 검은 색에 사용  

헤더 요소

헤더 안에 다른 요소를 추가 할 수 있습니다. 다음 코드는menu 버튼과 home헤더 안의 버튼. 또한 헤더 버튼 위에 아이콘을 추가합니다.

<div class = "bar bar-header bar-positive">
   <button class = "button icon ion-navicon"></button>
   <h1 class = "title">Header Buttons</h1>
   <button class = "button icon ion-home"></button>
</div>

위의 코드는 다음 화면을 생성합니다.

하위 헤더

헤더 표시 줄 바로 아래에있는 하위 헤더를 만들 수 있습니다. 다음 예제는 앱에 헤더와 하위 헤더를 추가하는 방법을 보여줍니다. 여기에서는 "assertive"(빨간색) 색상 클래스로 하위 헤더의 스타일을 지정했습니다.

<div class = "bar bar-header bar-positive">
   <button class = "button icon ion-navicon"></button>
   <h1 class = "title">Header Buttons</h1>
   <button class = "button icon ion-home"></button>
</div>

<div class = "bar bar-subheader bar-assertive">
   <h2 class = "title">Sub Header</h2>
</div>

위의 코드는 다음 화면을 생성합니다.

경로가 앱 화면 중 하나로 변경되면 아래 스크린 샷과 같이 헤더와 하위 헤더가 일부 콘텐츠를 덮고 있음을 알 수 있습니다.

이 문제를 해결하려면 다음을 추가해야합니다. ‘has-header’ 또는 ‘has-subheader’ 클래스 ion-content화면의 태그. 다음에서 HTML 파일 중 하나를 엽니 다.www/templates 그리고 추가 has-subheader 클래스 ion-content. 앱에서 헤더 만 사용하는 경우 다음을 추가해야합니다.has-header 대신 수업.

<ion-content class = "padding has-subheader">

위의 코드는 다음 화면을 생성합니다.