알림
분류: 폼 요소
설정 화면의 알림 수신 항목처럼, 항목명과 On/Off 스위치를 좌우로 배치한 목록형 스위치 그룹입니다. divide-y로 항목 사이에 구분선을 넣고, 각 줄은 row로 항목명(col)과 스위치(col-auto)를 양 끝에 배치합니다. 스위치에는 form-check-single을 추가해 옆에 별도 텍스트 라벨 없이 스위치만 단독으로 표시했습니다.
소스
<div class="mb-3">
<label class="form-label">알림</label>
<div class="divide-y">
<div>
<label class="row">
<span class="col">푸시 알림</span>
<span class="col-auto">
<label class="form-check form-check-single form-switch">
<input class="form-check-input" type="checkbox" checked="">
</label>
</span>
</label>
</div>
<div>
<label class="row">
<span class="col">SMS 알림</span>
<span class="col-auto">
<label class="form-check form-check-single form-switch">
<input class="form-check-input" type="checkbox">
</label>
</span>
</label>
</div>
<div>
<label class="row">
<span class="col">이메일 알림</span>
<span class="col-auto">
<label class="form-check form-check-single form-switch">
<input class="form-check-input" type="checkbox" checked="">
</label>
</span>
</label>
</div>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
divide-y | 자식 요소 사이에 가로 구분선을 자동으로 추가 |
row | 항목명과 스위치를 한 줄에 좌우로 배치하는 Bootstrap 그리드 행 |
col | 항목명 영역, 남은 공간을 모두 차지 |
col-auto | 스위치 영역, 내용 크기만큼만 차지하며 오른쪽에 붙음 |
form-check | 입력과 라벨을 묶는 기본 컨테이너 |
form-switch | 체크박스를 토글 스위치 모양으로 표시 |
form-check-single | 텍스트 라벨 없이 스위치 하나만 단독으로 표시할 때 사용하는 여백 조정 클래스 |
form-check-input | 실제 <input type="checkbox">에 적용하는 스타일 |
form-label | 목록 전체의 제목 라벨 |
mb-3 | 목록과 다음 요소 사이의 아래쪽 여백 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/폼-요소-알림.html 경로에서 렌더링 결과를 확인할 수 있습니다.