컴포넌트2_컴포넌트 프로퍼티를 적용한 리스트 만들

1. 1. 컴포넌트 페이지에서 프레임(320 * 80) 리스트로 만들 프레임 리스트를 하나 생성 해 보자.
2. 레이아웃 그리드를 적용 해 보자.
3. 프로필사진이 들어갈 원을 그려 인물사진을 삽입하자. - 플러그인을 사용 해 보자.
   

   

   
   

   

   
   
   
4. 이름과 메일을 작성하자. - 이때도 컨텐츠 릴 플러그인을 사용 해 보자.

 

5. 정렬하자. - constraint > 좌측 정렬

6. 우측 아이콘을 삽입하자.

• - 머터리얼 아이콘을 이용
• 컨포넌트 추가 :  아이콘 디렉토리 추가

7. 리스트 컴포넌트 생성

---

속성을 생성 해 보자.

 

 

---

---

주의 : 레이어의 속성을 불런임으로 텍스트탭의 하단의 속성을 추가

• name: name
• value : 텍스트 그대로

같은 방식으로 이메일도 추가 해 보자.

 

name: email

---

아이콘 불런 속성과 인스턴스 속성 추가

인스턴스 스와프 추

불런 추가 : 레이어> 컴포넌트 속성 추가

---

최종 list 컴포넌트 확인

• 각각의 속성을 변경 해 보면서 main 추가 해 보자.

---

메인 페이지에 추가 해 보기

1. 메인프레임 안에 프레임g_list 생성
2. 오토레이아웃 설정(수직정렬)
3. 에셋에 있는 리스트 가져와서 5개 복사
4. 각 속성을 변경 해서 리스트를 변경 해 보자.
5. 이메일과 이름을 사이드 속성에서 바로 작성 해 보자.
6. 프로필을 안 보이게 해 보자.
7. 아이콘을 다른 것으로 변경 해 보자.
8. 아이콘을 안 보이게 해 보자.

---

리스트 수를 overflow 시켜서 스크롤을 생성 해 보자.

1. 리스트를 10개이상 복사 해서 오버플로워가 되게 만들어 보자.
2. 메인 플레림 선택  > 사이트 프레임 속성 하단의 clip content를 해지하면 over 된 부분도 보인다.
3. 프로토타입 > scroll behavior 속성값을 변경 해 보자.
4. 플로어 출발 포인트 추가 후 확인 해 보자.