스파이더젠 AButton

 

사용자와의 상호작용을 처리하는 데 사용 및 클릭 이벤트를 통해 특정 기능을 수행하는 버튼 컴포넌트 에요

 

Data

  • Text 버튼의 텍스트를 설정하는 속성.
  • Align 텍스트의 정렬을 설정하는 속성.
Align 설명
left 버튼 텍스트 좌측 정렬
center 버튼 텍스트 텍스트 중앙 정렬
right 버튼 텍스트 우측 정렬
  • Icon : 버튼에 아이콘을 삽입하는 속성.

Icon 설명
After Text 아이콘이 텍스트 다음에 위치
New Line Text 아이콘과 텍스트를 위아래로 위치


기본


✅After Text


✅New Line Text


✅After Text ✅New Line Text

Option

🔹Fast Click

버튼을 연속으로 빠르게 클릭할 수 있도록 설정.

 

- 일반적으로 클릭 이벤트가 발생한 후 버튼이 비활성화되거나 딜레이가 생기는 경우가 있는데, Fast Click 옵션을 사용하면 이러한 딜레이 없이 연속 클릭이 가능.

🔹Tool Button

버튼을 툴 버튼으로 설정.

 

- 툴 버튼은 default, down, over, disable의 네 가지 상태에 따라 버튼의 이미지를 변경. 버튼의 가로 크기의 4배로 이미지를 이어붙여서 버튼의 백그라운드 이미지로 지정하면, 각 상태에 맞는 이미지가 자동으로 변경 됨.

🔹Check Button

버튼을 체크박스처럼 사용할 수 있도록 설정.

 

- 이 옵션을 활성화하면 버튼이 선택되거나 선택 해제될 수 있으며, setCheck() 및 getCheck() 메서드를 사용하여 버튼의 체크 상태를 제어 가능.

🔹Down State

버튼이 눌렸을 때의 상태를 자동으로 조절.

 

- 버튼이 눌린 상태일 때 배경색의 밝기를 조절하여 시각적으로 눌린 느낌을 제공. 이 옵션을 체크 해제하면 스타일을 넣지 않으면 버튼이 눌린 상태여도 아무런 변화가 없음.

 

Style

 


Style 설명
Over 버튼에 마우스 오버(호버) 시 스타일을 설정하는 속성.
Down 버튼의 마우스 다운(클릭) 시 스타일을 설정하는 속성.
Disable 버튼 비활성 시 스타일을 설정하는 속성.

 

Example

 

🦜버튼을 추가하고, 클릭 시 토스트 창 출력 이벤트 생성하기

1. 툴을 이용하여 추가하는 방법

1-1. 버튼 컴포넌트를 추가하고, ID를 할당


Component -> Button


Identify -> ID -> btn001 입력

1-2. Click 이벤트를 설정.


방법 1 : 버튼을 오른쪽 클릭후 Add Event 선택하여 이벤트 추가.
방법 2 : 캡처 화면과 같이 Event -> click 이벤트 리스트 우측 영역을 클릭 후 이벤트 추가.

1-3. 버튼이 클릭 될 시 발생할 코드를 작성.

onBtn001Click(comp, info, e)
{
    AToast.show('Hello Button!');
};
// 버튼 클릭 시 'Hello Button!' 토스트 출력

1-4.빌드해서 결과물을 확인.

2. 코드를 통해 추가하는 방법

	// 1. 버튼 컴포넌트 생성 
   const btn001= new AButton(); 

   // 2. 버튼 초기화 
   btn001.init({ id: 'btn001', text: 'button' }); 

   // 3. 버튼 이벤트 설정 
   btn001.addEventListener('click', function(comp, info, e) {
       AToast.show('Hello Button!'); 
   }); 

   // 4. 버튼 추가 
   this.addComponent(btn001);;

 

Properties

btnStyles <Array>

버튼의 상태별 스타일 클래스명

// 순서대로 over, down, disable의 스타일
btn.btnStyles = ['', '', ''];

isTabable <Boolean>

탭키 이동이 가능한 컴포넌트 여부

btn.isTabable = true;

 

 

Instance Methods

applyBaseState()

버튼의 defStyle 변수에 저장해둔 기본 클래스를 적용.

  • 툴 버튼인 경우: 배경 이미지 위치를 0px 0px로 설정
  • 일반 버튼인 경우: defStyle 클래스를 추가하고, baseState에 저장된 background-color를 적용

changeBtnState( newState )

버튼 상태를 변경.

  • newState <String> : 변경할 상태값
    예: AButton.OVER, AButton.DOWN, AButton.DISABLE
btn.changeBtnState(AButton.OVER);

clearStateClass()

버튼 상태 클래스를 초기화(삭제)

defaultBtnState()

버튼이 enable이 true일 때, 버튼 상태를 기본 상태로 돌림

내부적으로 clearStateClass()와 applyBaseState()를 호출

disableState()

downState()를 호출해, 버튼을 비활성화와 유사한(어두워진) 상태로 변경

downState()

버튼의 background-color 속성의 보색(Complementary Color)으로 border를 지정하고,
밝기를 줄여주는 함수. (툴 버튼일 경우 배경 이미지 위치만 조정)

enable( isEnable )

버튼의 활성/비활성 상태를 설정.

  • isEnable <Boolean> : true면 활성, false면 비활성

getCheck()

체크 버튼(isCheckBtn = true)인 경우 체크 상태를 반환.

  • Returns <Boolean>

getHtml()

버튼의 HTML 내용을 문자열로 반환.

  • Returns <String>

getIconMargin()

아이콘 버튼인 경우 아이콘에 적용된 마진(margin) 값을 반환.

  • Returns <String> 예: '10px 10px 10px 0px'

getIconSize()

아이콘 버튼인 경우 아이콘의 사이즈(width, height)를 반환.

  • Returns <String> 예: 'auto 10px'

getImage()

버튼에 설정된 이미지의 src 값을 반환.

  • Returns <String>

getQueryData( dataArr, keyArr, queryData )

컴포넌트가 갖고 있는 정보를 keyArr의 정보에 따라 dataArr에 채움
dataArr은 AQueryData의 특정 부분을 참조하며, 자세한 구조는 QuerySystem.pptx 참고

  • dataArr <Array> 예: [ {key1:value, key2:value ...}, {}, ... ]
  • keyArr <Array> 예: [ key1, key3, key10 ]
  • queryData <AQueryData> 전체 값(필요 시 참조)

getText()

버튼의 텍스트 값을 얻음

  • Returns <String>

overState()

버튼 밝기를 높이는 방식으로, Over 상태를 표현 (툴 버튼일 경우 배경 이미지 위치를 이동)

saveBaseState()

버튼이 초기화될 때 호출되는 함수.
- data-style 속성을 defStyle로 저장
- background-color, border 등을 baseState에 저장

setBtnStyle( state, styles )

버튼의 상태별 스타일 클래스를 설정

  • state <String> : 버튼 상태 (AButton.OVER, AButton.DOWN, AButton.DISABLE)
  • styles <String> : 클래스 이름
btn.setBtnStyle(AButton.OVER, 'hoverStyleClass');

setCheck( check )

체크 버튼(isCheckBtn = true)인 경우, 체크 상태를 변경

  • check <Boolean> : 체크 상태 여부

setData( data )

버튼에 임의의 데이터를 저장

  • data <Any>

setDefStyle( style )

버튼의 기본 스타일을 지정

  • style <Object> 예: { width:'80px', height:'22px' }
btn.setDefStyle({ width:'80px', height:'22px' });

setHtml( text )

버튼 내부의 HTML 내용을 설정

  • text <String> : HTML 문자열
btn.setHtml('<div>Button Content</div>');

setIconMargin( value )

아이콘 버튼인 경우, 아이콘의 margin을 지정

  • value <String> 예: '10px 10px 10px 0px'
btn.setIconMargin('10px 5px 10px 0px');

setIconSize( value )

아이콘 버튼의 크기를 설정 가로, 세로값을 띄어쓰기로 구분해 입력.

  • value <String> 예: 'auto 10px'
btn.setIconSize('auto 15px');

setImage( url )

버튼의 이미지를 설정 아이콘을 텍스트 앞에 배치할지 뒤에 배치할지는 imgAfterText, imgNewLine 등에 따라 변화

  • url <String> : 이미지 경로
btn.setImage('asset/img/btn_icon.png');

setQueryData( dataArr, keyArr, queryData )

dataArr 값을 keyArr 정보에 따라 컴포넌트에 세팅 dataArr은 AQueryData 특정 부분 참조자

  • dataArr <Array> 예: [ {key1:value, key2:value ...}, {}, ... ]
  • keyArr <Array> 예: [ key1, key3, key10 ]
  • queryData <AQueryData>

setText( text )

버튼의 텍스트를 설정

  • text <String>
btn.setText('확인');



저작자표시 비영리 변경금지 (새창열림)

티스토리툴바