Component

GroupButton

Basic

GroupButton은 여러개의 버튼을 하나의 그룹으로 보여주는 컴포넌트입니다. class="Groupbutton"

<div class="Groupbutton">
	<button class="Button">btn1</button>
	<button class="Button">btn2</button>
	<button class="Button">btn3</button>
	<button class="Button">btn4</button>
</div>

Align

"Vertical" 클래스를 추가하면 그룹 버튼의 방향을 조정할 수 있습니다.

<div class="Groupbutton Vertical">
	<button class="Button">btn1</button>
	<button class="Button">btn2</button>
	<button class="Button">btn3</button>
	<button class="Button">btn4</button>
</div>

Radio Buttons

그룹 버튼을 라디오 버튼처럼 활용할 수 있습니다.

Radio1 Radio2 Radio3 Radio4

<div class="Groupbutton">
	<label class="Button">
		<input class="Radio" name="radio1" value="value1">Radio1
	</label>
	<label class="Button">
		<input class="Radio" name="radio1" value="value2">Radio2
	</label>
	<label class="Button">
		<input class="Radio" name="radio1" value="value3">Radio3
	</label>
	<label class="Button">
		<input class="Radio" name="radio1" value="value4">Radio4
	</label>
</div>

Checkbox Buttons

그룹 버튼을 체크박스처럼 활용할 수 있습니다.

checkbox1 checkbox2 checkbox3 checkbox4

<div class="Groupbutton">
	<label class="Button">
		<input class="Checkbox" name="radio1" value="value1">checkbox1</label>
	<label class="Button">
		<input class="Checkbox" name="radio1" value="value2">checkbox2</label>
	<label class="Button">
		<input class="Checkbox" name="radio1" value="value3">checkbox3</label>
	<label class="Button">
		<input class="Checkbox" name="radio1" value="value4">checkbox4</label>
</div>

Functions

.setEnabled (isEnabled)

그룹 버튼의 활성화/비활성화를 동적으로 조정할 때 사용하는 함수입니다.

parameter
- isEnabled {Boolean} Required
  - 설정된 값에 의해서 버튼이 활성화/비활성화 됩니다.

.setOrient (string)

그룹 버튼의 정렬 방향을 설정하는 함수입니다.

parameter
- "horizontal"
  - 그룹 버튼이 가로 정렬 됩니다.
- “vertical”
  - 그룹 버튼이 세로 정렬 됩니다.

본문 상단으로 이동