체크박스
type basic (01)
<%- include(`${_src}/views/components/form/input-checkbox.ejs`, {
variant: 'basic', // basic 타입
size: 's', // s, m
name: 'ckbox1',
list: 'column', // column 또는 row
gap: 16, // list gap(간격)
datas: [
{
text: '오늘출발',
value:'오늘출발',
checked: false, // 기본값 false (true일 때만 기입해도 됨)
disabled: false, // 기본값 false (true일 때만 기입해도 됨)
required: false, // 기본값 false (true일 때만 기입해도 됨)
},
{
text: '내일출발',
value:'내일출발',
checked: false, // 기본값 false (true일 때만 기입해도 됨)
disabled: false, // 기본값 false (true일 때만 기입해도 됨)
required: false, // 기본값 false (true일 때만 기입해도 됨)
},
]
}) %>
type basic (2)
<%- include(`${_src}/views/components/form/input-checkbox.ejs`, {
variant: 'basic', // basic 타입
size: 'm', // s, m
name: 'ckbox2',
list: 'column', // column 또는 row
gap: 16,
datas: [
{
text: 'CRETOS 용접봉',
value:'CRETOS 용접봉',
qty: 15,
checked: false, // 기본값 false (true일 때만 기입해도 됨)
disabled: false, // 기본값 false (true일 때만 기입해도 됨)
required: false, // 기본값 false (true일 때만 기입해도 됨)
},
{
text: 'GEMINI',
value:'GEMINI',
qty: 1,
checked: false, // 기본값 false (true일 때만 기입해도 됨)
disabled: false, // 기본값 false (true일 때만 기입해도 됨)
required: false, // 기본값 false (true일 때만 기입해도 됨)
},
]
}) %>
type card
<%- include(`${_src}/views/components/form/input-checkbox.ejs`, {
variant: 'card', // 카드 타입
name: 'ckbox3',
list: 'column', // column 또는 row
gap: 18,
datas: [
{
text: '폴더명 입니다',
value: '폴더명 입니다',
total: 12,
checked: false, // 기본값 false (true일 때만 기입해도 됨)
disabled: false, // 기본값 false (true일 때만 기입해도 됨)
required: false, // 기본값 false (true일 때만 기입해도 됨)
},
{
text: 'ABCD',
value: 'ABCD',
total: 30,
checked: false, // 기본값 false (true일 때만 기입해도 됨)
disabled: false, // 기본값 false (true일 때만 기입해도 됨)
required: false, // 기본값 false (true일 때만 기입해도 됨)
},
{
text: '긴 폴더명 말줄임을 적용 긴 폴더명 말말줄줄이이이임!!',
value: '250',
total: 10,
checked: false, // 기본값 false (true일 때만 기입해도 됨)
disabled: false, // 기본값 false (true일 때만 기입해도 됨)
required: false, // 기본값 false (true일 때만 기입해도 됨)
}
]
}) %>
type single
<%- include(`${_src}/views/components/form/input-checkbox-single.ejs`, {
datas: [
{
className: 's',
name: 'ckbox1',
value: 'checkbox-single-s',
srText: '단독 체크박스 (S)',
},
{
className: 'm',
name: 'ckbox2',
value: 'checkbox-single-m',
checked: true,
srText: '단독 체크박스 (M)',
},
{
className: 'l',
name: 'ckbox3',
value: 'checkbox-single-l',
srText: '단독 체크박스 (L)',
},
{
className: 's',
name: 'vits-cart-checkbox',
value: 'vits-cart-checkbox',
srText: '동의 체크란',
agreeText: '동의하기 같은 UI가 필요할 때 사용합니다.',
},
],
}) %>
checkbox-item (단일 사용)
<!-- 전체 선택 / 아이템 관련 -->
<div data-checkbox-scope> <!-- 스코프 컨테이너 -->
<%- include(`${_src}/views/components/form/checkbox-item.ejs`, {
name: 'ckbox01',
value: 'all',
checkboxType: 'all',
text="전체 선택" // 전체 선택 체크박스
}) %>
<%- include(`${_src}/views/components/form/checkbox-item.ejs`, {
name: 'ckbox01',
value: 'all',
checkboxType: 'item',
text="항목" // 개별 아이템 체크박스 (여러 개)
suffix: '(필수)', // 필수 체크박스 라벨 뒤에 붙는 텍스트 (class=label-tag)
}) %>
</div>
<!-- 단일 -->
<%- include(`${_src}/views/components/form/checkbox-item.ejs`, {
name: 'ckbox01',
value: 'all',
checkboxType: 'item',
}) %>
<!-- 사이즈 -->
<%- include(`${_src}/views/components/form/checkbox-item.ejs`, {
name: 'ckbox01',
value: 'all',
checkboxType: 'item',
size: 'x' | 'm' | 'l' | 'xl' | 'xxl'
}) %>
-
아이콘만 - size: 's'
-
아이콘만 - size: 'm'
-
아이콘만 - size: 'l'
-
아이콘만 - size: 'xl'
-
아이콘만 - size: 'xxl'
checkbox-toggle
<%- include(`${_src}/views/components/form/checkbox-toggle.ejs`, {
name: 'ckb-i1',
value: 'ckb-i1',
label: '전체 알림 동의'
}) >
* _checkboxType : checkbox-item 에서 사용하는 방법과 동일
ㄴ 'all' : 전체 선택 / 'item' : 개별 항목