Chakra UI를 사용하는 고정 Navbar

Chakra UI는 CSS-In-Js 라이브러리로, React 개발자가 애플리케이션의 UI를 정말 쉽게 코딩할 수 있게 해줍니다. Chakra UI를 사용하여 대부분의 일반적인 UI 구성 요소를 개발하는 것은 쉽지만 때로는 까다로울 수 있습니다.

이러한 시나리오 중 하나는 사용자가 헤더의 탐색에 액세스할 수 있도록 하는 동시에 뷰포트 높이보다 긴 애플리케이션의 페이지를 스크롤할 수 있는 상단 고정 탐색 모음을 만드는 것입니다.

Chakra UI를 사용하여 이러한 고정 탐색 모음을 빌드하는 단계를 살펴보겠습니다.

1 단계

먼저 상단의 탐색 모음을 수정하고 일반 문서 흐름에서 제거되었는지 확인해야 합니다. 그렇지 않은 경우 일반 요소와 마찬가지로 스크롤 시 헤더가 사라집니다. 이를 달성하기 위해 position 속성을 사용할 수 있습니다.

애플리케이션의 나머지 부분은 이제 헤더를 그대로 덮어씁니다.
문서의 흐름에서 사용할 수 없습니다.

<Flex as="header" position="fixed" w="100%">
  ...
</Flex>

2 단계

문서의 나머지 부분이 포함된 div에 상단 여백을 추가하여 애플리케이션 콘텐츠가 스크롤되지 않은 상태의 헤더 뒤에서 시작하도록 합시다. 헤더에는 Flex, 나머지 애플리케이션에는 Container과 같은 Chakra UI 구성 요소를 사용했지만 모든 레이아웃 구성 요소를 대신 사용할 수 있습니다.

<>
 <Flex as="header" position="fixed" w="100%">
  ...
 </Flex>
 <Container as="main" mt="20">
  ...
 </Container>
</>

참고: 위쪽 여백 값은 머리글 요소의 높이에 따라 다릅니다.

3단계

다음으로 페이지의 나머지 부분에서 탐색 모음을 눈에 띄게 만드는 데 집중할 수 있습니다. 이를 위해 응용 프로그램의 다른 구성 요소보다 큰 값z-index으로 수정해야 합니다.
참고: 합리적인 z-인덱스 값은 대부분의 사용 사례에서 200이 되어야 한다고 말합니다.

4단계

마지막으로 탐색 모음이 스크롤의 기본 구성 요소 위에 그려져 있는지 확인해야 합니다. 이를 달성하는 방법에는 두 가지가 있습니다.

유형 1

헤더에 불투명한 배경색을 사용할 수 있습니다. 그러면 스크롤 시 기본 요소가 완전히 숨겨집니다. 이 경우 헤더의 최종 코드는 다음과 같습니다.

<>
 <Flex as="header" position="fixed" backgroundColor="white" 
  w="100%">
  ...
 </Flex>
 <Container as="main" mt="20">
  ...
 </Container>
</>

첫 번째 접근 방식을 사용한 헤더의 최종 이미지는 다음과 같습니다.

유형 2

헤더가 스크롤할 때 기본 콘텐츠를 완전히 숨기는 대신 흐림 효과를 적용할 수 있습니다. 이것은 backdrop-filter의 도움과 헤더에 대한 반투명 배경색으로 달성할 수 있습니다.

<>
 <Flex as="header" position="fixed" backgroundColor="rgba(255, 
 255, 255, 0.8)" backdropFilter="saturate(180%) blur(5px)" 
 w="100%">
  ...
 </Flex>
 <Container as="main" mt="20">
  ...
 </Container>
</>

면책 조항: this 웹 사이트를 통해 유도를 통해 위의 접근 방식에 대해 알게 되었습니다.

참고: 이 기사를 작성할 당시에는 backdrop-filter 속성이 IE 및 Firefox와 호환되지 않습니다. 따라서 프로덕션에서 사용하기 전에 mdn 문서에서 속성의 브라우저 호환성 섹션을 확인하십시오.

두 번째 방법을 사용한 헤더의 최종 이미지는 다음과 같습니다.



위 헤더의 어두운 버전은 다음과 같습니다.



그게 다야. Chakra UI를 사용하여 상단 고정 내비게이션 바를 만들었습니다.

읽어주셔서 감사하고 더 많은 기사를 보려면 저를 팔로우하세요.