영상
영상스크립트
좋아요, 마지막 수업입니다.
몇 가지 마무리할 것입니다.
주된 부분은 결과가 없을 때 사용자에게 알림을 표시해야 한다는 것입니다. 이미 하나의 회사에서 이를 구현했습니다. 그녀가 직업을 검색했지만 아무 결과도 나오지 않았을 때, 작은 디자인 그룹이 "직업이 없 습니다"라고 표시됩니다.
검색 페이지에서도 동일하게 해봅시다. 검색 페이지를 열어주세요. 반복 그룹 아래에 있으며, 기본적으로 숨겨져 있을 것입니다. 데이터가 발견되지 않거나 결과가 없음을 보여주는 그룹을 추가할 것입니다. 이 작업의 일부는 이미 했습니다.
회사 페이지로 가서 우리가 한 디자인 작업을 찾아봅시다. 그룹 컨테이너, 그룹 직업을 열겠습니다. 네, 여기 있습니다. 그룹 데이터 없음. 드롭다운에서 그룹 데이터 없음으로 검색할 수도 있습니다. 수정하고 재사용 가능한 요소로 변환합시다. 이것을 "데이터 없음"이라고 부릅시다. 이런 것을 "널 상태"라고도 칭하는데, 다른 사람들에게서도 들을 수 있을 것입니다.
좋아요, 갑니다. 여기서 더 이상 할 일은 없습니다. 다시 검색 페이지로 돌아가서 그룹 콘텐츠 내부에 넣어야 합니다, 알겠죠? 재사용 가능한 요소를 찾기 위해 스크롤을 내려서 그룹 데이터 없음을 찾아서 12개의 결과와 반복 그룹 사이에 넣겠습니다. 이것이 어떻게 나오는지 봅시다. 이 검색 쿼리에 대한 직업이 없습니다. 괜찮다고 생각합니다. 이해가 됩니다.
이 재사용 가능한 요소에는 동적 요소가 없어서, 분리할 필요가 없습니다. 그냥 그 자리에 두세요. 레이아웃 탭에서 페이지 로드 시 보이지 않도록 설정해야 합니다. 숨길 때는 압축됩니다. 하지만 언제 다시 가져올까요? 반복 그룹의 직업 목록이 하나 미만일 때입니다. 반복 그룹의 직업 목록이 작거나 하나보다 작거나 같은 경우, 그때 다시 가져옵니다. "데이터 없음 직업"을 전송하겠습니다. 이것을 테스트해봅시다.
여기 몇 가지 문제가 있습니다. 무엇일까요? 재사용 가능한 요소에 추가 진술이 복 사되었습니다. 제거해 주세요. 필요 없습니다. 회사 페이지에만 해당됩니다. 이것이 작동하는지 확인합시다. 페이지를 새로고침하겠습니다.
검색 페이지에서 브라우즈 직업으로 돌아가겠습니다. 이것도 수정해야 합니다. URL을 사용해서 검색을 찾아보겠습니다. 여기에 임의로 입력할 수 있습니다. "피그마"를 입력해봅시다. 사실, 리턴 키를 사용할 수 있습니다. 이 쿼리에 대한 직업이 없습니다.
내가 알아차린 것은 리셋 버튼이 보이지 않는다는 것입니다. 덮어쓴 것 같습니다. 이전에, 반응형 탭에 있었을 때 최소 너비 100%를 이 모든 버튼에 복사하고 붙여넣었을 때, 알아야 할 것은 조건부 표현식을 복사하고 붙여넣으면, 기존 조건부 표현식을 덮어쓴다는 것입니다. 따라서 지금 이를 수정해야 합니다.
하지만 이것도 필요합니다. 현재 위치와는 상관없이, 새로운 조건을 정의합시다. 이것은 말합니다, 검색 값이 비어 있지 않거나, 드롭다운 용어 값이 비어 있지 않거나, 드롭다운 위치 값이 비어 있지 않은 경우, 이 세 가지 조건 중 하나가 참이면, 이를 표시합니다. 페이지 로드 시 보이지 않습니다. 좋습니다, 이 실수 덕분에 배운 것이 있어서 다행입니다. 그냥 남겨두겠는데, 보면 저도 때때로 실수를 합니다. 기본적인 실수입니다. 하지만 조건부 표현식을 복사할 때, 기존 조건부 표현식을 덮어쓰지 않도록 주의하세요.
이 문제를 해결했습니다. 이제 여러분이 네비게이션 바에 들어가주세요. 요소를 편집하고 브라우즈 잡스를 수정합시다. 브라우즈 잡스라는 단어가 좋습니다. 여기서 검색이라고 할 수도 있습니다만, 검색 페이지를 가리키게 합시다. 이것들은 작동하지 않을 것입니다. 블로그와 어바웃을 구축 할 시간이 없습니다.
로그인에서는, 현재 로그인은 버튼입니다. 가입도 마찬가지입니다. 둘 다 링크로 바꿉시다. 이렇게 하면 구글이 앱을 탐색하는 데 도움이 됩니다. 오른쪽 클릭해서 이 요소 유형을 교체합시다. 링크를 선택하고 교체합니다. 로그인 페이지로 이동할 것입니다. 스타일은 Secondary 버튼 링크로 설정합니다. 레이아웃 탭에서는, 모든 것이 예상대로입니다. 44의 최소 높이, 콘텐츠에 맞게 너비 고정 checked. 여기서 고정 높이를 사용해도 됩니다, 44.
이것도 마찬가지로 합시다. 오른쪽 클릭하여 요소 유형을 교체합시다. 다시 링크 요소를 선택합니다. 교체합니다. 이는 가입 페이지로 이동합니다. 스타일은 Primary 버튼 링크를 사용합니다. 나머지 설정을 가져온 것 같습니다. 고정 높이 44를 사용하겠습니다.
디자인의 일부를 잃었습니다. 간단히 보겠습니다. Secondary 버튼 링크. 여기서 스타일을 편집합시다. Secondary 버튼 링크. 여러분도 마찬가지로 하세요. 테두리 스타일에서, 실선 테두리를 추가하세요. 테두리 색상이 필요하고, 라운드니스는 8입니다. 그러면 문제가 해결됩니다.
네비게이션 바에서는 사용자 로그인 시 이 그룹을 숨기고 사용자의 아바타를 보여주세요. 간단히 할 수 있습니다. 하지만 아바타 클릭 시 작은 네비게이션, 작은 그룹 포커스가 필요합니다. 아바타 클릭 후 작은 메뉴가 드롭다운됩니다. 이를 그룹 포커스 메뉴라고 합니다. 이번 섹션에서는 생성하지 않을 것입니다. 다음 섹션에서 생성할 것입니다.
먼저 그룹 사용자를 추가하는 것으로 시작합시다, 그런 다음 조건성 살펴보기. 그룹 버튼을 복사하고 붙여넣습니다. 그룹 버튼 복사가 오른쪽에 추가됩니다. 이를 그룹 사용자 로 변경합시다. 조건 탭부터 살펴봅시다.
언제 그룹 사용자를 표시하겠습니까? 지금은 스마트하게 생각해야 합니다. 이 그룹을 보아야 할 두 가지 조건이 있습니다. 아바타가 포함된 그룹입니다. 분명히, 사용자가 로그인해야 합니다. 그렇지 않으면 아바타를 표시하지 않습니다. 아바타가 없습니다. 두 번째는 991 이상에서만 이 그룹을 보고 싶습니다. 즉, 992 이상입니다. 기존 조건이 있습니다. 현재 페이지 폭이 992 미만이라고 되어 있습니다. 연산자를 클릭하고 크거나 같음을 선택합니다. 왜냐하면 992 미만은 991입니다. 따라서 992를 포함해야 합니다. 그리고 더 많은 아이콘을 클릭하여 '및'을 선택합니다. 두 가지 조건이 충족되어야 이 그룹을 볼 수 있습니다. 페이지는 991보다 넓어야 하며, 현재 사용자가 로그인해야 합니다. 현재 사용자가 로그인했습니다. 그럴 때 표시됩니다.
이제 체크 박스를 확인하세요. 기본적으로 페이지 로드 시 보이지 않도록 합시다. 이는 이 그룹과 반대입니다. 완전히 반대입니다. 이 그룹은 페이지 로드 시 보이게 두고, 이를 숨길 조건을 사용할 것입니다. 그룹 사용자, 지금은 숨겨져 있지만, 요소 트리에서 그룹 사용자로 이동할 수 있으며, 기본적으로 숨긴 상태지만, 992 이상에서 사용자도 로그인했을 때 보일 것입니다.
이미지를 가져와서 이 그룹 사용자 안에 삽입하세요. 현재 사용자의 아바타입니다. 이를 아바타로 이름을 변경하겠습니다. 이미지 아바타. 여기서 확대할 때, 모양이 이상한 이미지를 대처하기 위해 설정할 크기로 맞추겠습니다. 대체 태그. 태그는 필요 없습니다. 이는 사용자가 로그인했을 때만 존재합니다. 구글은 앱에 로그인할 수 없습니다. 구글은 공개 데이터만 볼 수 있습니다. 캔버스 플레이스홀더. 사용자 아바타 중 하나를 업로드하세요. 사용자 자신의 이미지나 하나의 이미지를 사용하세요. 하나의 이미지를 업로드하기로 했습니다. 그냥 플레이스홀더입니다. 둥글게 하려면, 20을 선택합니다.
레이아웃 탭에서, 너비는 40으로 하고 고정 비율 유지로 1:1을 줘 완벽한 원을 만듭니다. 완료했으면 두 링크를 모두 삭제할 수 있습니다. 쉬프트를 누르며 선택하고 키보드에서 백스페이스를 누르세요. 좋습니다.
다음 수업에서 이것을 테스트할 것이며, 다음 섹션에서 사용자가 아바타를 클릭하면 그룹 포커스 메뉴가 나타나고 앱을 탐색할 수 있는 기능을 추가할 것입니다. 현재 URL을 입력하여 페이지를 미리 보는 중이지만, 시간이 지남에 따라 네비게이션 바를 구축할 것입니다. 구성할 것이 몇 가지 더 있습니다.
여러분, 섹션이 완료되었습니다. 직업 관련 모든 작업을 마쳤습니다. CSV를 업로드했고, 반응형 디자인을 살펴보았습니다. 제가 가장 좋아하는 섹션 중 하나였습니다. 아름다운 직업 목록을 보는 것이 정말 좋았습니다.
여기서 잠시 휴식을 취하고, 다음 섹션에서는 후보자로 가입할 것입니다. 새로운 유형의 사용자가 가입할 것입니다. 사용자가 "저는 후보자입니다"를 클릭했을 때, 조금 다른 워크플로, 조금 다른 데이터, 조금 다른 대시보드가 필요한 것을 확인할 것입니다.
이 섹션을 즐기셨길 바라며, 다음 섹션에서 뵙겠습니다.