ionic-framework
이오니아 CSS 구성 요소

비고

기본 그리드 시스템 구문

기본 그리드

Ionic에서는 row 클래스를 요소로 설정하여 row 선언 할 수 있습니다. 행은 가로로 정렬 된 요소가되며이 요소 내부의 모든 요소는 행에 속합니다. 행 내에서 너비가 다른 열을 선언 할 수 있습니다. 다음 선언 중에서 선택할 수 있습니다.

최대 값 열은 행 내부에 100을 가질 수 있습니다. 다음은 기본 격자의 몇 가지 예입니다.

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

오프셋 격자

열에 col-offset-<value> 를 설정할 수도 있습니다. 아래의 예에서 너비 열의 3 분의 1은 너비 오프셋의 3 분의 1을 가지며, 너비가 1/3 너비이고 페이지가 오프셋되어 있기 때문에 페이지 중앙에 위치합니다.

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

열 정렬

컬럼을 수직으로 정렬하는 것은 가능하면 col-<align_value> 를 이와 같이 별도의 컬럼으로 설정하십시오.

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

위의 코드는 각 열을 자체에 정렬합니다. 행 안의 모든 열을 정렬하려면 정렬 값을 행 자체에 설정할 수 있습니다. 아래 예제에서이 행의 모든 ​​열은 행의 가운데에서 세로로 정렬됩니다.

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

반응 형 그리드

또한 일부 뷰포트 너비에서 서로 위에 겹쳐 쌓이게 될 때 열의 반응을 원할 수 있습니다. 세 가지 선택이 있습니다.

이 예에서 이러한 열은 대략 가로 폰의 너비 아래로 쌓입니다.

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

또한 이러한 중단 점이 적합하지 않은 경우 나 더 구체적인 중단 점이 필요한 경우 자신의 미디어 쿼리를 만들 수 있습니다.

기본 목록 항목 구문

거의 모든 응용 프로그램에는 일종의 목록이 있습니다. Ionic은 자신의 응용 프로그램 내에서 목록을 쉽게 만들 수있는 자체 빌드 인 준비 (built-in-go) 목록 항목 CSS 선언입니다. HTML 요소를 사용하거나에 대한 클래스를 선언하거나 directive ion-list 를 사용하여이를 만들 수 있습니다. 지시문의 예는 맨 아래에 있습니다.

기본 목록 항목 CSS 구문 :

<ul class="list">
  <li class="item"></li>
</ul>

분배기 목록 :

<div class="list">
  <a class="item" href="#">
    List item
  </a>
  <div class="item item-divider">
    Divider that looks a bit different from items
  </div>
  <a class="item" href="#">
    Another list item
  </a>
</div>

아이콘이있는 항목 나열 :

<div class="list">
  <a class="item item-icon-left" href="#">
    <i class="icon ion-trash-b"></i>
    List item with a trashcan icon on the left
  </a>
</div>

다음 구문을 사용하여 항목의 양쪽에 아이콘을 설정할 수도 있습니다.

<div class="list">
  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-trash-b"></i>
    List item with a trashcan icon on the left and a briefcase icon on the right
    <i class="icon ion-briefcase"></i>
  </a>
</div>

버튼 또는 버튼이있는 목록 항목은 다음과 같이 만들 수 있습니다.

<div class="list">
  <div class="item item-button-right">
    Item with a button on the right that has a clock icon in it
    <button class="button button-positive">
      <i class="icon ion-clock"></i>
    </button>
  </div>
</div>

또한 아바타, 축소판 및 인세 트를 사용하여 목록 항목을 만들어 목록 항목 주위에 패딩을 만들 수 있습니다. Ionic은 또한 목록 항목에 따라 패딩을 설정하여 목록 항목의 아이콘 설정 등을 처리합니다.

Ionic은 또한 체크 박스, 라디오 버튼 등을위한 자체 지시문을 가지고 있습니다. 여기에 Ionic이있는 체크 박스 목록의 예가 있습니다.

<ion-list>
  <ion-checkbox ng-model="choice1">Choice 1</ion-checkbox>
  <ion-checkbox ng-model="choice2">Choice 2</ion-checkbox>
</ion-list>

유틸리티 색상의 기본 사용법

프리셋 이오니아 CSS는 주제와 미리 설정된 색상을 갖습니다. ionic.css 또는 사용자 정의 CSS 파일의 기본 값을 수정하거나 무시할 수 있습니다. 또한 SASS로 정의 할 수도 있고 Ionic에서 SASS를 사용하려면 터미널에서 ionic setup sass 명령을 실행하기 만하면됩니다.

버튼의 기본 사용법. button-<phrase> 클래스는 버튼 배경을 만들고 설정된 테마의 색을 지정합니다.

<button class="button button-positive">
  button-positive
</button>

<button class="button button-calm">
  button-calm
</button>

<button class="button button-balanced">
  button-balanced
</button>

CSS 프리픽스 선택 항목은 다음과 같습니다.

• <element>-light

• <element>-stable

• <element>-positive

• <element>-calm

• <element>-balanced

• <element>-energized

• <element>-assertive

• <element>-royal

• <element>-dark

이러한 클래스는 배지 등에서도 추가 할 수 있습니다. 다음은 배지의 예입니다.

<span class="badge badge-positive">Positive badge</span>