ionic2
Ionic2 CSS 구성 요소

그리드

Ionic의 그리드 시스템은 Ionic이 지원하는 모든 장치에서 지원되는 CSS 기능인 flexbox를 기반으로합니다. 그리드는 격자, 행 및 열의 세 가지 단위로 구성됩니다. 열은 행을 채우기 위해 확장되고 추가 열에 맞게 크기가 조절됩니다.

예.

    <ion-grid>
      <ion-row>
        <ion-col width-10>This column will take 10% of space</ion-col>
      </ion-row>
    </ion-grid>

카드

카드는 중요한 콘텐츠를 표시하는 좋은 방법이며 앱의 핵심 디자인 패턴으로 급부상하고 있습니다. 이는 정보를 포함하고 구성하고 사용자에게 예측 가능한 기대치를 설정하는 좋은 방법입니다. 한 번에 너무나 많은 콘텐츠를 표시하고 종종 화면 공간이 적기 때문에 많은 회사에서 카드가 빠르게 디자인 패턴이되었습니다.

예.

<ion-card>
  <ion-card-header>
        Header
  </ion-card-header>
  <ion-card-content>
        The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
  </ion-card-content>
</ion-card>