본문으로 건너뛰기

ButtonTabBar (버튼탭바) Widget Control

정보

예제 파일: 07_Work_with_Widgets/tabbar_buttontabbar_objet.lfp

ButtonTabBar(버튼탭바) 위젯을 스크립트에서 제어할 때 사용하는 Widget Control(Property · Method · Event) 목록입니다. 위젯 소개와 사용법은 ButtonTabBar 문서를 참고하세요.

정보

아래 예시의 buttontabbarID는 캔버스에서 ButtonTabBar 위젯에 지정한 이름(ID)입니다. 스크립트에서는 위젯ID.멤버 형태로 접근합니다.

노트

ButtonTabBar의 Widget Control은 TabBar와 동일합니다(모양만 버튼형). 차이는 사용법(속성)에 있습니다.

Widget Control 요약​

Widget Control종류시그니처설명
setTabsMethodsetTabs(tabs): void전체 탭을 목록으로 교체
addMethodadd(tab): void끝에 탭 하나 추가
changeTabMethodchangeTab(index, tab): void특정 위치의 탭 교체
getTextMethodgetText(index): string해당 탭의 라벨 텍스트 반환
indexPropertynumber (읽기/쓰기)현재 선택된 탭 인덱스
onChangedEventonChanged = (index) => { ... }선택 탭이 바뀔 때 실행

Property​

index​

현재 선택된 탭의 인덱스(0부터 시작)입니다. 값을 쓰면 해당 탭으로 전환됩니다.

  • 타입: number
  • 접근: 읽기 / 쓰기

Example

buttontabbarID.index = 1;
const current = buttontabbarID.index;

Method​

add​

탭 하나를 목록 끝에 추가합니다.

  • Parameters
    • tab: 탭 정의(라벨 텍스트)
  • Returns: 없음 (void)

Example

buttontabbarID.add("Settings");

setTabs​

전체 탭을 주어진 목록으로 교체합니다. 빈 목록이면 무시됩니다.

  • Parameters
    • tabs: 탭 목록
  • Returns: 없음 (void)

Example

buttontabbarID.setTabs(["Home", "Chart", "Settings"]);

changeTab​

지정한 위치(index)의 탭을 교체합니다. 범위를 벗어난 index는 무시됩니다.

  • Parameters
    • index (number): 교체할 탭 위치
    • tab: 새 탭 정의(라벨 텍스트)
  • Returns: 없음 (void)

Example

//1번째 인덱스의 탭을 'Chart'로 교체
buttontabbarID.changeTab(1, "Chart");

getText​

지정한 index 탭의 라벨 텍스트를 반환합니다. 범위를 벗어나면 빈 문자열('')을 반환합니다.

  • Parameters
    • index (number): 읽을 탭 위치
  • Returns: string - 탭의 라벨 텍스트(범위 밖이면 '')

Example

const label = buttontabbarID.getText(0);

Event​

onChanged​

선택된 탭이 바뀔 때 실행됩니다.

  • 종류: Event
  • 핸들러 인자
    • index (number): 새로 선택된 탭의 인덱스
  • Returns: 없음

Example

buttontabbarID.onChanged = (index) => {
  // index: 새로 선택된 탭 인덱스
};

공통 Widget Control (모든 위젯)​

노트

모든 위젯은 setProperty(name, value) / getProperty(name) / setStyleProperty(styleName, styleProperty, value) 같은 공통 Widget Control(Method)도 사용할 수 있습니다. 자세한 규칙은 공통 Widget Control 레퍼런스를 참고하세요.