아이오닉 컴포넌트 체크 박스 4개를 한줄에 출력해보자.

  • html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ion-content padding>
<ion-item class="timeDivision">
<ion-label>아침</ion-label>
<ion-checkbox [(ngModel)]="morning"></ion-checkbox>
</ion-item>
<ion-item class="timeDivision">
<ion-label>점심</ion-label>
<ion-checkbox [(ngModel)]="noon"></ion-checkbox>
</ion-item>
<ion-item class="timeDivision">
<ion-label>저녁</ion-label>
<ion-checkbox [(ngModel)]="evening"></ion-checkbox>
</ion-item>
<ion-item class="timeDivision">
<ion-label>심야</ion-label>
<ion-checkbox [(ngModel)]="night"></ion-checkbox>
</ion-item>
</ion-content>
  • scss
1
2
3
4
.timeDivision {
width: 23%;
display: inline-flex;
}