[스트링 배리어블로
드롭다운 만들기]
드롭다운 만들기]안녕하세요!! 좋은 아침입니다
오늘은 간단한 튜토리얼 하나 공유합니다.
실무에서 자주 쓰이는 드롭다운 메뉴를
스트링 배리어블로 만들어 보았어요.
전체 프로세스는 크게
인터랙티브 컴포넌트 만들기 - 배리어블 등록하기- 프로토타입 적용 이렇게 3가지 단계로 볼 수 있어요. 자세한 방법은 아래 튜토리얼과
예제 원본을 참고해보세요!
예제 원본 바로가기인터랙티브 컴포넌트 만들기Local variable 옆의 필터를 눌러 등록
1.
Default, hover시 상태를 컴포넌트 세트로 만들고 While hovering 적용(Default-> Hover 방향으로만)
2.
1에서 만든 메뉴로 열린 상태 메뉴를 만들고,
닫힘&열림 메뉴 컴포넌트 세트로 만들고
On Click(tab)-> Change to 설정
스트링 배리어블 등록 및 적용1. Local variables에서 스트링 배리어블을 등록하고 카드 순서대로 등록하기
프로토타이핑 적용하기1. 메뉴 열림 컴포넌트 세트 메뉴 각각에 예시와 같이 프로토 타이핑 적용하면 끝! (기본옵션으로 셋팅 된 메뉴가 클릭 했을 때 해당 텍스트로 바뀌어요)
추가로 알면 좋은 팁 -배리어블 등록, 컴포넌트 세트 만드는 방법 모르시는 분들은 추가 카드를 확인해보세요!