맨위로가기
 

SBUx

닫기

3.5 체크박스 사이 간격 조정하기

STEP 1. 컴포넌트 생성

1. checkbox 컴포넌트를 생성합니다. 
<sbux-checkbox id="sbIdx1" name="sbTagNm.a" uitype="normal" text="SBUx Checkbox1"></sbux-checkbox>
<sbux-checkbox id="sbIdx2" name="sbTagNm.b" uitype="normal" text="SBUx Checkbox2"></sbux-checkbox>
<sbux-checkbox id="sbIdx3" name="sbTagNm.c" uitype="normal" text="SBUx Checkbox3"></sbux-checkbox>

STEP 2. 좌우 간격 조정

1. text-right-padding 속성으로 text 기준 오른쪽 간격을 조정합니다. 
<sbux-checkbox id="sbIdx1" name="sbTagNm.a" uitype="normal" text="SBUx Checkbox1" text-right-padding="50px"></sbux-checkbox>
<sbux-checkbox id="sbIdx2" name="sbTagNm.b" uitype="normal" text="SBUx Checkbox2" text-right-padding="50px"></sbux-checkbox>
<sbux-checkbox id="sbIdx3" name="sbTagNm.c" uitype="normal" text="SBUx Checkbox3" text-right-padding="50px"></sbux-checkbox>
2. text-left-padding 속성으로 text 기준 왼쪽 간격을 조정합니다. 
<sbux-checkbox id="sbIdx1" name="sbTagNm.a" uitype="normal" text="SBUx Checkbox1" text-left-padding="50px"></sbux-checkbox>
<sbux-checkbox id="sbIdx2" name="sbTagNm.b" uitype="normal" text="SBUx Checkbox2" text-left-padding="50px"></sbux-checkbox>
<sbux-checkbox id="sbIdx3" name="sbTagNm.c" uitype="normal" text="SBUx Checkbox3" text-left-padding="50px"></sbux-checkbox>

오른쪽 간격을 조정

왼쪽 간격을 조정